unfolding - workshop at rca

Unfolding Workshop

Till Nagel, mai[email protected], @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

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: 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

Create a class

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

Conclusion & Discussion

MarkerManager

3D GeoVis

Map Transformations

Play with it!

Till Nagel, FHP & KUL [email protected] – twitter: @tillnm

Thank you.

RCA Information Experience Design 7th January 2014, London

Visit http://unfoldingmaps.org