Unfolding Workshop
A Library for Interactive Maps and Geovisualizations
in Java and Processing

Till Nagel, mail@tillnagel...
Goals of this workshop
•  Understand basic principles of maps & geovis
•  Knowledge of techniques and methods
•  Improve P...
Data Visualization
Visualization process

Ben Fry
Manuel Lima
Visual & Cognitive principles
•  Physiological 
Color perception, spatial vision, …
•  Psychological 
Experiences, cultura...
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 informat...
Visual variables
Jacques Bertin defined seven visual variables:
•  Position
•  Size
•  …
Visual variables
Jacques Bertin defined seven visual variables:
•  Position
•  Size
•  Shape
•  Value
•  Color
•  Orientat...
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,
2...
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 itera...
Learning
Hello World, literally
Use in University Courses
•  FH Potsdam, Germany
•  KU Leuven, Belgium 
•  IUAV University of Venice, Italy
•  Carnegie Me...
Prototyping
Explore data sets
https://vimeo.com/54539595
Creating
Applications
•  Design and dissemination of successful projects
•  Collected 50+ Unfolding projects
•  Some notably succes...
Max Planck Research Network

Moritz	
  Stefaner	
  and	
  Onforma0ve,	
  2012	
  
Installation & Setup
http://unfoldingmaps.org/rca
Unfolding Basics
Ok, let’s start …
Create and draw map

Example:	
  SimpleMap	
  
Set zoom and location

Example:	
  SimpleMap	
  
Finding the geo-location of …
Projections
Unfolding the world
h<p://www.elica.net	
  
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...
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 form...
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, Lon...
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Unfolding - Workshop at RCA
Upcoming SlideShare
Loading in …5
×

Unfolding - Workshop at RCA

6,478 views

Published on

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

Published in: Design, Education, Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,478
On SlideShare
0
From Embeds
0
Number of Embeds
808
Actions
Shares
0
Downloads
64
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Unfolding - Workshop at RCA

  1. 1. Unfolding Workshop A Library for Interactive Maps and Geovisualizations in Java and Processing Till Nagel, mail@tillnagel.com, @tillnm RCA Information Experience Design, 2014
  2. 2. Goals of this workshop •  Understand basic principles of maps & geovis •  Knowledge of techniques and methods •  Improve Processing skills •  How to iteratively design visualizations
  3. 3. Data Visualization
  4. 4. Visualization process Ben Fry
  5. 5. Manuel Lima
  6. 6. Visual & Cognitive principles •  Physiological Color perception, spatial vision, … •  Psychological Experiences, cultural background, symbols …
  7. 7. Pre-attentive properties Some properties can be easily recognized
  8. 8. Pre-attentive properties … some not.
  9. 9. 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.
  10. 10. Visual variables Jacques Bertin defined seven visual variables: •  Position •  Size •  …
  11. 11. Visual variables Jacques Bertin defined seven visual variables: •  Position •  Size •  Shape •  Value •  Color •  Orientation •  Texture
  12. 12. Visual variables Combine to encode different properties
  13. 13. Visual variables Krygier and Wood. 2005. Making Maps: A Visual Guide to Map Design for GIS.
  14. 14. Common types
  15. 15. Reading recommendation Jeffrey Heer, Michael Bostock, Vadim Ogievetsky. A Tour through the Visualization Zoo. ACM Queue, 2010
  16. 16. Parallel coordinates Heer et al, 2010
  17. 17. Stacked graph aka Steam graph, Theme river Heer et al, 2010
  18. 18. Small multiples Heer et al, 2010
  19. 19. Radial tree Heer et al, 2010
  20. 20. Tree map Heer et al, 2010
  21. 21. Proportional symbol map aka Graduated symbol map Heer et al, 2010
  22. 22. Choropleth map Heer et al, 2010
  23. 23. Unfolding Map Library
  24. 24. 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
  25. 25. Learning
  26. 26. Hello World, literally
  27. 27. 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)
  28. 28. Prototyping
  29. 29. Explore data sets
  30. 30. https://vimeo.com/54539595
  31. 31. Creating
  32. 32. Applications •  Design and dissemination of successful projects •  Collected 50+ Unfolding projects •  Some notably successful visualizations •  Featured in design blogs, magazines, books, …
  33. 33. Max Planck Research Network Moritz  Stefaner  and  Onforma0ve,  2012  
  34. 34. Installation & Setup
  35. 35. http://unfoldingmaps.org/rca
  36. 36. Unfolding Basics Ok, let’s start …
  37. 37. Create and draw map Example:  SimpleMap  
  38. 38. Set zoom and location Example:  SimpleMap  
  39. 39. Finding the geo-location of …
  40. 40. Projections Unfolding the world
  41. 41. h<p://www.elica.net  
  42. 42. Mercator projection
  43. 43. Draw onto a map
  44. 44. Screen coordinates to geo location Example:  SimpleConversionMap  
  45. 45. Geo location to screen coordinates Example:  SimpleConversionMap  
  46. 46. Tiles Map Styles & Tile Provider
  47. 47. Tile coordinates
  48. 48. Tiles in slippy maps
  49. 49. Tiles in slippy maps
  50. 50. Custom map styles Google  Maps   Google  Terrain   Microso0  Aerial   Open  Street  Map   (CloudMade)   Midnight  Commander   (CloudMade)   ImmoScout  Heatmap  
  51. 51. Specify map provider
  52. 52. Multiple maps with different tiles Example:  Mul0ProviderMul0MapApp  
  53. 53. Map layers Example:  Mul0ProviderOverlayMapApp  
  54. 54. Custom styles with CloudMade
  55. 55. Custom styles with TileMill
  56. 56. How to use TileMill with Unfolding
  57. 57. User Interactions Mouse, Keyboard, Multi-touch, etc
  58. 58. Default user interactions Example:  SimpleMap  
  59. 59. Event system
  60. 60. Multi-touch interactions Example:  Mul0touchMapApp  
  61. 61. Develop prototypes Prototype for evaluating Exploding menu, a novel interaction technique.
  62. 62. Exercise Visualize your way to RCA
  63. 63. Visualize data Read and display geospatial data
  64. 64. Dots on a map Example:  SimpleMarkerApp  
  65. 65. Dots on a map Example:  SimpleMarkerApp  
  66. 66. Reading geo-spatial data Example:  GeoRSSMarkerApp  
  67. 67. Reading geo-spatial data Example:  GeoRSSMarkerApp  
  68. 68. Reading geo-spatial data Example:  GeoRSSMarkerApp  
  69. 69. Using default marker Example:  GeoRSSMarkerApp  
  70. 70. Supports various data formats •  GeoRSS •  GeoJSON •  GPX •  GTFS •  … See tutorials for how to convert and use other formats such as KML, Shapefile, CSV
  71. 71. Supports various data formats My bike rides in Berlin, summer 2012 Tracked on smart phone as GPX files
  72. 72. Tutorials & Examples
  73. 73. Bike Map London Data Example 1
  74. 74. Cycle Hire (cc) Terry Freedman
  75. 75. Cycle Hire http://web.barclayscyclehire.tfl.gov.uk/maps
  76. 76. Cycle Hire http://api.bike-stats.co.uk/
  77. 77. CSV – Comma Separated Values
  78. 78. 18:30
  79. 79. Create a class
  80. 80. Create a class
  81. 81. 18:30
  82. 82. 12:00
  83. 83. Still interactive:
  84. 84. Bike Data Visualizations Andy Woodruff Copenhagen Wheel Till Nagel Aedas Research
  85. 85. Photo Map London Data Example 2
  86. 86. Photo Sharing Services www.panoramio.com
  87. 87. http://www.panoramio.com/map/get_panoramas.php?...
  88. 88. http://www.panoramio.com/map/get_panoramas.php?...
  89. 89. Conclusion & Discussion
  90. 90. MarkerManager
  91. 91. 3D GeoVis
  92. 92. Map Transformations
  93. 93. Play with it!
  94. 94. Thank you. Visit http://unfoldingmaps.org RCA Information Experience Design Till Nagel, FHP & KUL 7th January 2014, London mail@tillnagel.com – twitter: @tillnm

×