Chart types

10a: Spatial / Geospatial data

Recap: How to design viz idioms

Recap: Data Types

Tabular data
Networks
Geographic / spatial
Fields
Hierarchical

Spatial

Geospatial data

GeoJSON / TopoJSON (GeoJSON spec) (TopoJSON spec)

Shapefile (SHP) (spec)

There are a ton of GIS file formats.

D3 Graph Gallery

D3 Graph Gallery, by Yan Holtz

Geospatial (2D)

Libraries

Map Tiles

Open street map

Geospatial (2D)

Tools

Platforms

Carto (formerly cartoDB)

ArcGIS, Esri

Google Maps API

Geospatial (3D)

Mapbox, MapboxGL

Idiom: Map Markers (e.g. Leaflet)

What: Data	Geographic geometry data. Points, polygons, etc. Additional qualitative / quantitative fields.
How: Encoding	Area and point marks on a geographic map. Often allows for zoom, pan and rotate functions.
Why: Task	Task: Lookup, compare values, find spatial trends
Scale	Color channel: If quantitative up to 8, if categorical up to 12.

D3 Graph Gallery - Leaflet

Idiom: Choropleth Map

What: Data	Geographic geometry data. Table with one quantitative attribute per region
How: Encoding	Space: use given geometry for area mark boundaries. Color: sequential (or divergent) segmented colormap
Why: Task	Task: Lookup, compare values, find spatial trends
Scale	Color channel: If quantitative up to 8, if categorical up to 12.

D3 Graph Gallery - Choropleth Map

SG Population by Subzone vs OneMap Population Query

Idiom: Hexbin Maps

What: Data	Geographic data: lat/lon points, quantitative count attribute.
How: Encoding	Encode Use given geographic data geometry of points, overlay on hexbin map depening on zoom value.
Why: Task	Task: Find spatial trends, esp at different zoom values
Scale	Color channel: Quantitative (up to 8)

D3 Graph Gallery - Hexbin Charts

Leaflet + D3.js, Tom Nightingale

SG Taxi Availbility, Yong Quan (repo)

Idiom: Tile cartograms

What: Data	Typically districts or states in a country
How: Encoding	Convert districts/states into boxes and lay them out in the rough shape of the country.
Why: Task	Use geography as a layout so we can quickly zoom into the district/state.
Scale	Color channel: Quantitative (up to 8)

Tile Cartograms

Idiom: Iscocontours

What: Data	2D spatial field; geographic data. Derived Geometry: set of isolines computed from field.
How: Encoding	Encode Use given geographic data geometry of points, lines, and region marks. Use derived geometry as line marks.
Why: Task	Task: Get a sense of spatial shape
Scale	Dozens of contour levels.

D3: Contour density maps

Mapbox - Isochrone Maps

Check Weather.sg

Idiom: Vector Fields

What: Data	2D or 3D spatial field. Each grid square - vector values (e.g. wind speeds, u and v)
How: Encoding	Encode vectors as arrow marks on a 2D / 3D spatial field
Why: Task	Task: Get a holistic sense of both direction and maginitude of the vectors. (e.g. wind speed and direction)
Scale	Hundreds of thousands of marks.

ObservableHQ - Vector Fields

Divergence and curl, 3Blue1Brown

Idiom: Flow visualization

What: Data	2D or 3D spatial field. Each grid square - vector values (e.g. wind speeds, u and v)
How: Encoding	Encode moving particle animation in a vector field to make flow patterns visible
Why: Task	Task: Get a holistic sense of the flow patterns
Scale	Hundreds of thousands of marks.

earth.nullschool.net

3D Viz (examples)

One Map 3D, SLA Singapore (Cesium)

Questions?

Chi-Loong | V/R