The making of Super Map World - Part 1.

The making of Super Map World - Part 1.

Super Map World is a site that offers over 17,000 maps and map graphics. They're colourful. They're free! And best of all, they're customisable using a map edit feature. It's one of the biggest side projects I've committed to. Over the course of the next few posts I'm going…

A drawing of Neurogliaform cells by Santiago Ramón y Cajal

Code & Learn: Set your mind in motion with a project vision

Figuring out where to start with a new programming language or framework can be challenging. Searching for advice can inundate you with long lists of prerequisites and concepts to learn. Forums will turn up tech veterans that demand newcomers "start from the ground up". The newcomers should know the fundamentals…

Using a text input to filter map data with Leaflet JS

Using a text input to filter map data with Leaflet JS

In this follow-up video, we add another method of filtering data on our doctors' practices map visualisation. If you're not too familiar with Leaflet or JavaScript in general, I recommend watching the first Leaflet.js video where we create our visualisation from scratch. You can find the complete map visualisation…

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…