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

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

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

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

Create a class

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

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