119
Unfolding Workshop Till Nagel, [email protected], @tillnm RCA Information Experience Design, 2014 A Library for Interactive Maps and Geovisualizations in Java and Processing

Unfolding - Workshop at RCA

Embed Size (px)

DESCRIPTION

Workshop at the Information Experience Design programme at RCA. The blurb: "Till Nagel will introduce his Unfolding Map library for Processing to create geospatial data visualizations. Participants will learn how to find and use urban data sets, how to load and display them, and how to design simple visualizations. It will be a very hands-on and interactive workshop. All participants should bring their own computer with Processing installed."

Citation preview

Page 1: Unfolding - Workshop at RCA

Unfolding Workshop

Till Nagel, [email protected], @tillnm RCA Information Experience Design, 2014

A Library for Interactive Maps and Geovisualizations in Java and Processing

Page 2: Unfolding - Workshop at RCA

Goals of this workshop •  Understand basic principles of maps & geovis

•  Knowledge of techniques and methods

•  Improve Processing skills

•  How to iteratively design visualizations

Page 3: Unfolding - Workshop at RCA

Data Visualization

Page 4: Unfolding - Workshop at RCA

Ben Fry

Visualization process

Page 5: Unfolding - Workshop at RCA

Manuel Lima

Page 6: Unfolding - Workshop at RCA

Visual & Cognitive principles •  Physiological

Color perception, spatial vision, …

•  Psychological

Experiences, cultural background, symbols …

Page 7: Unfolding - Workshop at RCA

Pre-attentive properties Some properties can be easily recognized

Page 8: Unfolding - Workshop at RCA

Pre-attentive properties … some not.

Page 9: Unfolding - Workshop at RCA

Visual mapping •  Graphical elements are being used as visual

syntax to represent semantic properties.

•  Mapping information to visual properties is called encoding (or mapping).

•  The encoding should be appropriate and fitting to the information, and the story to tell.

Page 10: Unfolding - Workshop at RCA

Visual variables

•  Position

•  Size

•  …

Jacques Bertin defined seven visual variables:

Page 11: Unfolding - Workshop at RCA

Visual variables

•  Position

•  Size

•  Shape

•  Value

•  Color

•  Orientation

•  Texture

Jacques Bertin defined seven visual variables:

Page 12: Unfolding - Workshop at RCA

Visual variables Combine to encode different properties

Page 13: Unfolding - Workshop at RCA

Visual variables

Krygier and Wood. 2005. Making Maps: A Visual Guide to Map Design for GIS.

Page 14: Unfolding - Workshop at RCA

Common types

Page 15: Unfolding - Workshop at RCA

Reading recommendation Jeffrey Heer, Michael Bostock, Vadim Ogievetsky. A Tour through the Visualization Zoo. ACM Queue, 2010

Page 16: Unfolding - Workshop at RCA

Parallel coordinates

Heer et al, 2010

Page 17: Unfolding - Workshop at RCA

Stacked graph aka Steam graph, Theme river

Heer et al, 2010

Page 18: Unfolding - Workshop at RCA

Small multiples

Heer et al, 2010

Page 19: Unfolding - Workshop at RCA

Radial tree

Heer et al, 2010

Page 20: Unfolding - Workshop at RCA

Tree map

Heer et al, 2010

Page 21: Unfolding - Workshop at RCA

Proportional symbol map aka Graduated symbol map

Heer et al, 2010

Page 22: Unfolding - Workshop at RCA

Choropleth map

Heer et al, 2010

Page 23: Unfolding - Workshop at RCA

Unfolding Map Library

Page 24: Unfolding - Workshop at RCA

•  Learning

Simple API to create simple sketches.

•  Prototyping

Explore data sets.

Quickly develop in an iterative design process.

•  Creating

Build applications for a broader audience.

Task Areas

See details in our paper: Nagel, Klerkx, Vande Moere, Duval. Unfolding – A Library for Interactive Maps. SouthCHI 2013

Page 25: Unfolding - Workshop at RCA

Learning

Page 26: Unfolding - Workshop at RCA

Hello World, literally

Page 27: Unfolding - Workshop at RCA

Use in University Courses •  FH Potsdam, Germany

•  KU Leuven, Belgium

•  IUAV University of Venice, Italy

•  Carnegie Mellon, USA

•  MIT, USA

•  Harvard, USA

•  …

(not only by design students, but also by students in urban planning, GIS, transport, etc)

Page 28: Unfolding - Workshop at RCA

Prototyping

Page 29: Unfolding - Workshop at RCA

Explore data sets

Page 30: Unfolding - Workshop at RCA
Page 31: Unfolding - Workshop at RCA
Page 32: Unfolding - Workshop at RCA
Page 33: Unfolding - Workshop at RCA

https://vimeo.com/54539595

Page 34: Unfolding - Workshop at RCA

Creating

Page 35: Unfolding - Workshop at RCA

Applications •  Design and dissemination of successful projects

•  Collected 50+ Unfolding projects

•  Some notably successful visualizations

•  Featured in design blogs, magazines, books, …

Page 36: Unfolding - Workshop at RCA

Max Planck Research Network

Moritz  Stefaner  and  Onforma0ve,  2012  

Page 37: Unfolding - Workshop at RCA

Installation & Setup

Page 38: Unfolding - Workshop at RCA
Page 39: Unfolding - Workshop at RCA
Page 40: Unfolding - Workshop at RCA

http://unfoldingmaps.org/rca

Page 41: Unfolding - Workshop at RCA
Page 42: Unfolding - Workshop at RCA
Page 43: Unfolding - Workshop at RCA

Unfolding Basics Ok, let’s start …

Page 44: Unfolding - Workshop at RCA

Example:  SimpleMap  

Create and draw map

Page 45: Unfolding - Workshop at RCA

Example:  SimpleMap  

Set zoom and location

Page 46: Unfolding - Workshop at RCA

Finding the geo-location of …

Page 47: Unfolding - Workshop at RCA

Projections Unfolding the world

Page 48: Unfolding - Workshop at RCA

h<p://www.elica.net  

Page 49: Unfolding - Workshop at RCA

Mercator projection

Page 50: Unfolding - Workshop at RCA

Draw onto a map

Page 51: Unfolding - Workshop at RCA

Example:  SimpleConversionMap  

Screen coordinates to geo location

Page 52: Unfolding - Workshop at RCA

Example:  SimpleConversionMap  

Geo location to screen coordinates

Page 53: Unfolding - Workshop at RCA

Tiles Map Styles & Tile Provider

Page 54: Unfolding - Workshop at RCA

Tile coordinates

Page 55: Unfolding - Workshop at RCA

Tiles in slippy maps

Page 56: Unfolding - Workshop at RCA

Tiles in slippy maps

Page 57: Unfolding - Workshop at RCA

Google  Maps   Google  Terrain   Microso0  Aerial  

Open  Street  Map   Midnight  Commander   ImmoScout  Heatmap  (CloudMade)   (CloudMade)  

Custom map styles

Page 58: Unfolding - Workshop at RCA

Specify map provider

Page 59: Unfolding - Workshop at RCA

Example:  Mul0ProviderMul0MapApp  

Multiple maps with different tiles

Page 60: Unfolding - Workshop at RCA

Example:  Mul0ProviderOverlayMapApp  

Map layers

Page 61: Unfolding - Workshop at RCA

Custom styles with CloudMade

Page 62: Unfolding - Workshop at RCA

Custom styles with TileMill

Page 63: Unfolding - Workshop at RCA

How to use TileMill with Unfolding

Page 64: Unfolding - Workshop at RCA

User Interactions Mouse, Keyboard, Multi-touch, etc

Page 65: Unfolding - Workshop at RCA

Example:  SimpleMap  

Default user interactions

Page 66: Unfolding - Workshop at RCA

Event system

Page 67: Unfolding - Workshop at RCA

Example:  Mul0touchMapApp  

Multi-touch interactions

Page 68: Unfolding - Workshop at RCA

Prototype for evaluating Exploding menu, a novel interaction technique.

Develop prototypes

Page 69: Unfolding - Workshop at RCA

Exercise Visualize your way to RCA

Page 70: Unfolding - Workshop at RCA

Visualize data Read and display geospatial data

Page 71: Unfolding - Workshop at RCA

Example:  SimpleMarkerApp  

Dots on a map

Page 72: Unfolding - Workshop at RCA

Example:  SimpleMarkerApp  

Dots on a map

Page 73: Unfolding - Workshop at RCA

Example:  GeoRSSMarkerApp  

Reading geo-spatial data

Page 74: Unfolding - Workshop at RCA

Example:  GeoRSSMarkerApp  

Reading geo-spatial data

Page 75: Unfolding - Workshop at RCA

Example:  GeoRSSMarkerApp  

Reading geo-spatial data

Page 76: Unfolding - Workshop at RCA

Example:  GeoRSSMarkerApp  

Using default marker

Page 77: Unfolding - Workshop at RCA

Supports various data formats •  GeoRSS

•  GeoJSON

•  GPX

•  GTFS

•  …

See tutorials for how to convert and use other formats such as KML, Shapefile, CSV

Page 78: Unfolding - Workshop at RCA

My bike rides in Berlin, summer 2012

Supports various data formats

Tracked on smart phone as GPX files

Page 79: Unfolding - Workshop at RCA

Tutorials & Examples

Page 80: Unfolding - Workshop at RCA

Bike Map London Data Example 1

Page 81: Unfolding - Workshop at RCA

Cycle Hire

(cc) Terry Freedman

Page 82: Unfolding - Workshop at RCA

Cycle Hire

http://web.barclayscyclehire.tfl.gov.uk/maps

Page 83: Unfolding - Workshop at RCA

Cycle Hire

http://api.bike-stats.co.uk/

Page 84: Unfolding - Workshop at RCA

CSV – Comma Separated Values

Page 85: Unfolding - Workshop at RCA
Page 86: Unfolding - Workshop at RCA
Page 87: Unfolding - Workshop at RCA
Page 88: Unfolding - Workshop at RCA
Page 89: Unfolding - Workshop at RCA
Page 90: Unfolding - Workshop at RCA
Page 91: Unfolding - Workshop at RCA

18:30

Page 92: Unfolding - Workshop at RCA
Page 93: Unfolding - Workshop at RCA

Create a class

Page 94: Unfolding - Workshop at RCA

Create a class

Page 95: Unfolding - Workshop at RCA
Page 96: Unfolding - Workshop at RCA
Page 97: Unfolding - Workshop at RCA
Page 98: Unfolding - Workshop at RCA

18:30

Page 99: Unfolding - Workshop at RCA

12:00

Page 100: Unfolding - Workshop at RCA
Page 101: Unfolding - Workshop at RCA

Still interactive:

Page 102: Unfolding - Workshop at RCA

Bike Data Visualizations

Copenhagen Wheel Aedas Research

Till Nagel Andy Woodruff

Page 103: Unfolding - Workshop at RCA

Photo Map London Data Example 2

Page 104: Unfolding - Workshop at RCA

Photo Sharing Services

www.panoramio.com

Page 105: Unfolding - Workshop at RCA
Page 106: Unfolding - Workshop at RCA
Page 107: Unfolding - Workshop at RCA
Page 108: Unfolding - Workshop at RCA

http://www.panoramio.com/map/get_panoramas.php?...

Page 109: Unfolding - Workshop at RCA

http://www.panoramio.com/map/get_panoramas.php?...

Page 110: Unfolding - Workshop at RCA
Page 111: Unfolding - Workshop at RCA
Page 112: Unfolding - Workshop at RCA
Page 113: Unfolding - Workshop at RCA
Page 114: Unfolding - Workshop at RCA

Conclusion & Discussion

Page 115: Unfolding - Workshop at RCA

MarkerManager

Page 116: Unfolding - Workshop at RCA

3D GeoVis

Page 117: Unfolding - Workshop at RCA

Map Transformations

Page 118: Unfolding - Workshop at RCA

Play with it!

Page 119: Unfolding - Workshop at RCA

Till Nagel, FHP & KUL [email protected] – twitter: @tillnm

Thank you.

RCA Information Experience Design 7th January 2014, London

Visit http://unfoldingmaps.org