Unfolding WorkshopTill Nagel, [email protected], @tillnm RCA Information Experience Design, 2014A Library for Interactive Maps and Geovisualizations in Java and Processing
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."
Text of Unfolding - Workshop at RCA
Unfolding Workshop A Library for Interactive Maps and
Geovisualizations in Java and Processing Till Nagel,
[email protected], @tillnm RCA Information Experience Design,
2014
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
Visualization process Ben Fry
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 Jacques Bertin defined seven visual variables:
Position Size
Visual variables Jacques Bertin defined seven visual variables:
Position Size Shape Value Color Orientation Texture
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
Task Areas 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.
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, lets start
Create and draw map Example: SimpleMap
Set zoom and location Example: SimpleMap
Finding the geo-location of
Projections Unfolding the world
h
Mercator projection
Draw onto a map
Screen coordinates to geo location Example:
SimpleConversionMap
Geo location to screen coordinates Example:
SimpleConversionMap
Tiles Map Styles & Tile Provider
Tile coordinates
Tiles in slippy maps
Tiles in slippy maps
Custom map styles Google Maps Google Terrain Microso0 Aerial
Open Street Map (CloudMade) Midnight Commander (CloudMade)
ImmoScout Heatmap
Specify map provider
Multiple maps with different tiles Example:
Mul0ProviderMul0MapApp
Map layers Example: Mul0ProviderOverlayMapApp
Custom styles with CloudMade
Custom styles with TileMill
How to use TileMill with Unfolding
User Interactions Mouse, Keyboard, Multi-touch, etc
Default user interactions Example: SimpleMap
Event system
Multi-touch interactions Example: Mul0touchMapApp
Develop prototypes Prototype for evaluating Exploding menu, a
novel interaction technique.
Exercise Visualize your way to RCA
Visualize data Read and display geospatial data
Dots on a map Example: SimpleMarkerApp
Dots on a map Example: SimpleMarkerApp
Reading geo-spatial data Example: GeoRSSMarkerApp
Reading geo-spatial data Example: GeoRSSMarkerApp
Reading geo-spatial data Example: GeoRSSMarkerApp
Using default marker Example: GeoRSSMarkerApp
Supports various data formats GeoRSS GeoJSON GPX GTFS See
tutorials for how to convert and use other formats such as KML,
Shapefile, CSV
Supports various data formats My bike rides in Berlin, summer
2012 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 Andy Woodruff Copenhagen Wheel Till
Nagel Aedas Research
Thank you. Visit http://unfoldingmaps.org RCA Information
Experience Design Till Nagel, FHP & KUL 7th January 2014,
London [email protected] twitter: @tillnm
