Phase 13Advanced14 of 19 in Data Visualization

Maps, Hierarchies and Networks

Draw the stations on a map of Ardenvale, the fleet as a treemap and the busiest routes as a network, with D3's geo, hierarchy, force and chord tools.

Some data has a shape that is not a line or a set of bars. Places sit on a map. A fleet splits into districts, stations and bike types, like boxes inside boxes. Stations are joined by routes, like beads on strings. D3 has a tool for each: d3-geo for maps, d3-hierarchy for boxes inside boxes, d3-force and d3-chord for connections.

You start with the file formats (GeoJSON and TopoJSON) and the one bug that makes a map fill the whole world. Then projections, colour maps and symbol maps, trees and treemaps, force-directed networks, and flows between districts. Every example uses Lumen's made-up island, Ardenvale, so you can check every number yourself.

At the end you build the station map of the dashboard (districts and river from TopoJSON, stations sized by docks and coloured by free bikes) and a treemap of the fleet.

Phase 13 · the story

Priya, operations lead

“I want to see our stations on a map of Ardenvale, so I can tell at a glance which part of the island is running out of bikes.”

At 8:15 on a June morning Priya has a list: 25 stations, each with a number of free bikes. The list says Rope Walk has 7 and Quay has 12. It does not say where those places are, or that the three emptiest stations are next to each other on the west side.

Tomás asks a different question in the same meeting: "How many bikes do we own, and where?" Arjun adds a third: "Which routes carry the most trips? I want to know where to put a new station." A table answers each question, but slowly. A map, a set of boxes and a network answer them in a glance.

In this phase the team learns the three drawing tools behind those pictures. By the end the dashboard has a map of Ardenvale with every station on it, and a treemap that shows the whole fleet.

In this phase

You will learn

Read GeoJSON and TopoJSON, and fix a polygon that fills the whole world
Project longitude and latitude to pixels, and fit a map to its box
Colour districts and size symbols honestly, and draw trees, treemaps, networks and flows
Build the dashboard's station map and fleet treemap

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/charts/station-map.js
src/charts/fleet-treemap.js
src/main.js

0/7 · 0%

7 topics ~3 h 18 code blocks & diagrams

Start with the first topic

13.1

Geographic Data: GeoJSON and TopoJSON

A map is data first: a list of places, each with shapes made of [longitude, latitude] points. GeoJSON writes every shape out in full, TopoJSON stores each shared border once, and a ring written in the wrong direction can make a small island fill the whole world.

24 min 2 code practice

13.2

Projections and geoPath

A projection turns [longitude, latitude] on a ball into [x, y] on a flat screen, and every way of doing it bends something: shape, area, distance or direction. geoPath draws projected shapes, and fitSize makes a map fill its box.

23 min 2 code practice

13.3

Choropleths and Symbol Maps

A choropleth colours each area by a value, and a symbol map puts a circle on each place. Both are easy to draw and easy to get wrong: totals follow size, classes decide the colours, a circle's area (not its radius) must show the value, and zoom must not grow the symbols.

27 min 3 code practice

13.4

Trees, Treemaps, Packs and Sunbursts

Some data is boxes inside boxes: a fleet is split into districts, stations and bike types. d3.hierarchy wraps that data in nodes, sum adds the values up, and a layout (treemap, pack, partition or tree) gives every node a position and a size.

27 min 4 code practice

13.5

Force-Directed Networks

A network is things (nodes) joined by connections (links). A force simulation places the nodes by pretending they are charged balls joined by springs, and lets them settle. You decide how many steps to run, and how to keep it readable when there are too many links.

26 min 3 code practice

13.6

Flows: Chord Diagrams and Sankey

A flow is an amount that moves from one place to another: trips from the district where they start to the one where they end. A chord diagram draws it as ribbons round a circle and a Sankey as bands between columns. A plain matrix often reads better than both.

27 min 3 code practice

13.7

Build: The Ardenvale Station Map

The station map becomes a real map of Ardenvale: districts and river from TopoJSON under the stations, circles sized by docks and coloured by bikes there now. A treemap of the whole fleet joins it. It answers Priya: where are the bikes, and which stations are running low?

42 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Fit the island to its box

The map of the island is drawn with a Mercator projection nobody fitted, so it is a dot in the corner of the box.

Beginner

Size circles by area

Three stations have 12, 24 and 30 docks. Their circles use the number of docks as the radius, so the biggest looks far too big.

Intermediate

A treemap that has no rectangles

A small fleet is laid out as a treemap, but no rectangle has a size and the console shows NaN errors.