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

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. Goals of this workshop
• Understand basic principles of maps & geovis
• Knowledge of techniques and methods
• Improve Processing skills
• How to iteratively design visualizations

3. Data Visualization

4. Visualization process
Ben Fry

5. Manuel Lima

6. Visual & Cognitive principles
• Physiological
Color perception, spatial vision, …
• Psychological
Experiences, cultural background, symbols …

7. Pre-attentive properties
Some properties can be easily recognized

8. Pre-attentive properties
… some not.

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. Visual variables
Jacques Bertin defined seven visual variables:
• Position
• Size
• …

11. Visual variables
Jacques Bertin defined seven visual variables:
• Position
• Size
• Shape
• Value
• Color
• Orientation
• Texture

12. Visual variables
Combine to encode different properties

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

14. Common types

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

16. Parallel coordinates
Heer et al, 2010

17. Stacked graph
aka Steam graph, Theme river
Heer et al, 2010

18. Small multiples
Heer et al, 2010

19. Radial tree
Heer et al, 2010

20. Tree map
Heer et al, 2010

21. Proportional symbol map
aka Graduated symbol map
Heer et al, 2010

22. Choropleth map
Heer et al, 2010

23. Unfolding Map Library

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

26. Hello World, literally

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

29. Explore data sets

33. https://vimeo.com/54539595

34. Creating

35. Applications
• Design and dissemination of successful projects
• Collected 50+ Unfolding projects
• Some notably successful visualizations
• Featured in design blogs, magazines, books, …

36. Max Planck Research Network
Moritz
Stefaner
and
Onforma0ve,
2012

37. Installation & Setup

40. http://unfoldingmaps.org/rca

43. Unfolding Basics
Ok, let’s start …

44. Create and draw map
Example:
SimpleMap

45. Set zoom and location
Example:
SimpleMap

46. Finding the geo-location of …

47. Projections
Unfolding the world

48. h<p://www.elica.net

49. Mercator projection

50. Draw onto a map

51. Screen coordinates to geo location
Example:
SimpleConversionMap

52. Geo location to screen coordinates
Example:
SimpleConversionMap

53. Tiles
Map Styles & Tile Provider

54. Tile coordinates

55. Tiles in slippy maps

56. Tiles in slippy maps

57. Custom map styles
Google
Maps
Google
Terrain
Microso0
Aerial
Open
Street
Map
(CloudMade)
Midnight
Commander
(CloudMade)
ImmoScout
Heatmap

58. Specify map provider

59. Multiple maps with different tiles
Example:
Mul0ProviderMul0MapApp

60. Map layers
Example:
Mul0ProviderOverlayMapApp

61. Custom styles with CloudMade

62. Custom styles with TileMill

63. How to use TileMill with Unfolding

64. User Interactions
Mouse, Keyboard, Multi-touch, etc

65. Default user interactions
Example:
SimpleMap

66. Event system

67. Multi-touch interactions
Example:
Mul0touchMapApp

68. Develop prototypes
Prototype for evaluating Exploding
menu, a novel interaction technique.

69. Exercise
Visualize your way to RCA

70. Visualize data
Read and display geospatial data

71. Dots on a map
Example:
SimpleMarkerApp

72. Dots on a map
Example:
SimpleMarkerApp

73. Reading geo-spatial data
Example:
GeoRSSMarkerApp

74. Reading geo-spatial data
Example:
GeoRSSMarkerApp

75. Reading geo-spatial data
Example:
GeoRSSMarkerApp

76. Using default marker
Example:
GeoRSSMarkerApp

77. Supports various data formats
• GeoRSS
• GeoJSON
• GPX
• GTFS
• …
See tutorials for how to convert and use other formats
such as KML, Shapefile, CSV

78. Supports various data formats
My bike rides in Berlin, summer 2012
Tracked on smart phone as GPX files

79. Tutorials & Examples

80. Bike Map
London Data Example 1

81. Cycle Hire
(cc) Terry Freedman

82. Cycle Hire
http://web.barclayscyclehire.tfl.gov.uk/maps

83. Cycle Hire
http://api.bike-stats.co.uk/

84. CSV – Comma Separated Values

91. 18:30

93. Create a class

94. Create a class

98. 18:30

99. 12:00

101. Still interactive:

102. Bike Data Visualizations
Andy Woodruff
Copenhagen Wheel
Till Nagel
Aedas Research

103. Photo Map
London Data Example 2

104. Photo Sharing Services
www.panoramio.com

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

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

114. Conclusion & Discussion

115. MarkerManager

116. 3D GeoVis

117. Map Transformations

118. Play with it!

119. Thank you.
Visit http://unfoldingmaps.org
RCA Information Experience Design
Till Nagel, FHP & KUL
7th January 2014, London
mail@tillnagel.com – twitter: @tillnm