Unfolding Workshop
Till Nagel, [email protected], @tillnm RCA Information Experience Design, 2014
A Library for Interactive Maps and Geovisualizations in Java and Processing
Goals of this workshop • Understand basic principles of maps & geovis
• Knowledge of techniques and methods
• Improve Processing skills
• How to iteratively design visualizations
Data Visualization
Ben Fry
Visualization process
Manuel Lima
Visual & Cognitive principles • Physiological
Color perception, spatial vision, …
• Psychological
Experiences, cultural background, symbols …
Pre-attentive properties Some properties can be easily recognized
Pre-attentive properties … some not.
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.
Visual variables
• Position
• Size
• …
Jacques Bertin defined seven visual variables:
Visual variables
• Position
• Size
• Shape
• Value
• Color
• Orientation
• Texture
Jacques Bertin defined seven visual variables:
Visual variables Combine to encode different properties
Visual variables
Krygier and Wood. 2005. Making Maps: A Visual Guide to Map Design for GIS.
Common types
Reading recommendation Jeffrey Heer, Michael Bostock, Vadim Ogievetsky. A Tour through the Visualization Zoo. ACM Queue, 2010
Parallel coordinates
Heer et al, 2010
Stacked graph aka Steam graph, Theme river
Heer et al, 2010
Small multiples
Heer et al, 2010
Radial tree
Heer et al, 2010
Tree map
Heer et al, 2010
Proportional symbol map aka Graduated symbol map
Heer et al, 2010
Choropleth map
Heer et al, 2010
Unfolding Map Library
• 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
Learning
Hello World, literally
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)
Prototyping
Explore data sets
https://vimeo.com/54539595
Creating
Applications • Design and dissemination of successful projects
• Collected 50+ Unfolding projects
• Some notably successful visualizations
• Featured in design blogs, magazines, books, …
Max Planck Research Network
Moritz Stefaner and Onforma0ve, 2012
Installation & Setup
http://unfoldingmaps.org/rca
Unfolding Basics Ok, let’s start …
Example: SimpleMap
Create and draw map
Example: SimpleMap
Set zoom and location
Finding the geo-location of …
Projections Unfolding the world
h<p://www.elica.net
Mercator projection
Draw onto a map
Example: SimpleConversionMap
Screen coordinates to geo location
Example: SimpleConversionMap
Geo location to screen coordinates
Tiles Map Styles & Tile Provider
Tile coordinates
Tiles in slippy maps
Tiles in slippy maps
Google Maps Google Terrain Microso0 Aerial
Open Street Map Midnight Commander ImmoScout Heatmap (CloudMade) (CloudMade)
Custom map styles
Specify map provider
Example: Mul0ProviderMul0MapApp
Multiple maps with different tiles
Example: Mul0ProviderOverlayMapApp
Map layers
Custom styles with CloudMade
Custom styles with TileMill
How to use TileMill with Unfolding
User Interactions Mouse, Keyboard, Multi-touch, etc
Example: SimpleMap
Default user interactions
Event system
Example: Mul0touchMapApp
Multi-touch interactions
Prototype for evaluating Exploding menu, a novel interaction technique.
Develop prototypes
Exercise Visualize your way to RCA
Visualize data Read and display geospatial data
Example: SimpleMarkerApp
Dots on a map
Example: SimpleMarkerApp
Dots on a map
Example: GeoRSSMarkerApp
Reading geo-spatial data
Example: GeoRSSMarkerApp
Reading geo-spatial data
Example: GeoRSSMarkerApp
Reading geo-spatial data
Example: GeoRSSMarkerApp
Using default marker
Supports various data formats • GeoRSS
• GeoJSON
• GPX
• GTFS
• …
See tutorials for how to convert and use other formats such as KML, Shapefile, CSV
My bike rides in Berlin, summer 2012
Supports various data formats
Tracked on smart phone as GPX files
Tutorials & Examples
Bike Map London Data Example 1
Cycle Hire
(cc) Terry Freedman
Cycle Hire
http://web.barclayscyclehire.tfl.gov.uk/maps
Cycle Hire
http://api.bike-stats.co.uk/
CSV – Comma Separated Values
18:30
Create a class
Create a class
18:30
12:00
Still interactive:
Bike Data Visualizations
Copenhagen Wheel Aedas Research
Till Nagel Andy Woodruff
Photo Map London Data Example 2
Photo Sharing Services
www.panoramio.com
http://www.panoramio.com/map/get_panoramas.php?...
http://www.panoramio.com/map/get_panoramas.php?...
Conclusion & Discussion
MarkerManager
3D GeoVis
Map Transformations
Play with it!
Till Nagel, FHP & KUL [email protected] – twitter: @tillnm
Thank you.
RCA Information Experience Design 7th January 2014, London
Visit http://unfoldingmaps.org
Recommended
