unfolding - workshop at rca

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

Author: till-nagel

Post on 17-Aug-2014




3 download

Embed Size (px)


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."


  • 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
  • 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!
  • Thank you. Visit http://unfoldingmaps.org RCA Information Experience Design Till Nagel, FHP & KUL 7th January 2014, London [email protected] twitter: @tillnm