unfolding - workshop at rca

Unfolding Workshop

Till Nagel, mail@tillnagel.com, @tillnm RCA Information Experience Design, 2014

A Library for Interactive Maps and Geovisualizations in Java and Processing

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

Ben Fry

Visualization process

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

•  Position

•  Size

•  …

Jacques Bertin defined seven visual variables:

Visual variables

•  Position

•  Size

•  Shape

•  Value

•  Color

•  Orientation

•  Texture

Jacques Bertin defined seven visual variables:

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

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

Task Areas

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, let’s start …

Example:  SimpleMap  

Create and draw map

Example:  SimpleMap  

Set zoom and location

Finding the geo-location of …

Projections Unfolding the world

h<p://www.elica.net  

Mercator projection

Draw onto a map

Example:  SimpleConversionMap  

Screen coordinates to geo location

Example:  SimpleConversionMap  

Geo location to screen coordinates

Tiles Map Styles & Tile Provider

Tile coordinates

Tiles in slippy maps

Tiles in slippy maps

Google  Maps   Google  Terrain   Microso0  Aerial  

Open  Street  Map   Midnight  Commander   ImmoScout  Heatmap  (CloudMade)   (CloudMade)  

Custom map styles

Specify map provider

Example:  Mul0ProviderMul0MapApp  

Multiple maps with different tiles

Example:  Mul0ProviderOverlayMapApp  

Map layers

Custom styles with CloudMade

Custom styles with TileMill

How to use TileMill with Unfolding

User Interactions Mouse, Keyboard, Multi-touch, etc

Example:  SimpleMap  

Default user interactions

Event system

Example:  Mul0touchMapApp  

Multi-touch interactions

Prototype for evaluating Exploding menu, a novel interaction technique.

Develop prototypes

Exercise Visualize your way to RCA

Visualize data Read and display geospatial data

Example:  SimpleMarkerApp  

Dots on a map

Example:  SimpleMarkerApp  

Dots on a map

Example:  GeoRSSMarkerApp  

Reading geo-spatial data

Example:  GeoRSSMarkerApp  

Reading geo-spatial data

Example:  GeoRSSMarkerApp  

Reading geo-spatial data

Example:  GeoRSSMarkerApp  

Using default marker

Supports various data formats •  GeoRSS

•  GeoJSON

•  GPX

•  GTFS

•  …

See tutorials for how to convert and use other formats such as KML, Shapefile, CSV

My bike rides in Berlin, summer 2012

Supports various data formats

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

Copenhagen Wheel Aedas Research

Till Nagel Andy Woodruff

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!

Till Nagel, FHP & KUL mail@tillnagel.com – twitter: @tillnm

Thank you.

RCA Information Experience Design 7th January 2014, London

Visit http://unfoldingmaps.org