Dataviz: Connecting the Atlantic

Dataviz: Connecting the Atlantic

“A treaty of peace has been signed between Austria and Prussia” – the first message that was transmitted across the Atlantic via telegraph. That's the first connection that appears in this animated globe visualisation. It shows a timeline of various trans-Atlantic subsea telegraph connections starting with the first successfully laid cable…

D3.js Choropleth Map Code Walkthrough

D3.js Choropleth Map Code Walkthrough

Maps are some of the most shared and sought after forms of visualisation. In this  video, I walk through an example that visualises unemployment data at the US county level. The code was updated from this bl.ocks.org v4 example to use d3.js version 7.  The walkthrough touches…

Fruit of the algorithm: Generative fabric design

Fruit of the algorithm: Generative fabric design

This shirt was designed by code. More accurately, the fabric pattern was composed with the help of a generative design tool. It randomly selected and arranged images from the US Dept. of Agriculture's Pomological Watercolour collection to visualise hundreds (if not thousands and thousands) of different shirt designs. In my…

D3.js Pannable Chart Code Walkthrough

D3.js Pannable Chart Code Walkthrough

A code-walkthrough of one of Mike Bostock's d3.js examples, Pannable Chart. In this video, I look at a fairly simple area chart, with the added twist of a scroller to pan across the large area created by this visualisation. The walkthrough covers the CSS that provides this kind of…

Mapping the UK's oldest trademarks, part 2.

Mapping the UK's oldest trademarks, part 2.

The second of two parts, this video covers the front-end steps in creating a map of the UK's oldest trademarks. Here we visualise the trademarks data we gathered in part 1 using D3js by rendering a map of the UK with postal area boundaries, labelling and then filling with the…

Principles of D3.js, a talk at Edinburgh.js

Principles of D3.js, a talk at Edinburgh.js

A mostly introductory talk about D3.js at the Edinburgh.js monthly meetup. Contents: * Is D3 a charting library? What is it good for? * A taste of capabilities- what can the library do? * Core concepts (selections & data bindings) * Examples of d3.js in action * 'Tech Companies in Edinburgh' data visualisation…

Dataviz: Tech Companies in Edinburgh

Dataviz: Tech Companies in Edinburgh

A data visualisation exploring the growth of the tech industry from 1980 to 2022. Each dot on the graph represents a company incorporation in the city. This visualisation was created for my talk on Principles of D3.js at the Edinburgh.js Meetup (Summer 2022).…