Post Archive

2022

Fractal Trees with Svelte

1 minute read

I wanted to try Svelte’s self-calling components and building some fractal trees recursively seemed a good way to do that and end up with something pretty fo...

A Binary Tree with Svelte, D3 and Layercake

less than 1 minute read

A client wanted a recreation of the rather superb binary tree demo by R2D3. Without appropriating the specific aesthetics but building a configurable compon...

Picasso Sketches with Evo-canvas

2 minute read

Intro A variety of token-lists containing the word Picasso were used to produce a CLIP’s score against evolved images (see evo-canvas). Rather than using CLI...

Visualizing The Nobel Prize Winners

less than 1 minute read

My book Data-visualization with Python and JavaScript uses a freshly scraped, cleaned and refined Nobel-prize dataset to build a JavaScript web visualization...

Back to top ↑

2021

Back to top ↑

2020

All That Jazz, Patterns in the Keys Permalink

less than 1 minute read

This visualisation uses a force-directed layout, courtesy of D3, to view approximately 1200 classic Jazz standards by key, date and composer. Some interestin...

D3 CSS3D Chess Games Permalink

less than 1 minute read

Sometimes it’s good to imagine something a little exotic and then try and realize it using the tools to hand. So here we have a simultaneous chess tournament...

UCL Dataviz Workshops 2020

2 minute read

The course structure and some online resources for the UCL Business Management Dataviz module.

D3 Chess Board Permalink

less than 1 minute read

Packed circles are a good way to visualise certain tree structured data. Here I use a dataset of the 135 chess games played by the titans Kasparov and Karpov...

D3 Chess Parasets Permalink

less than 1 minute read

An attempt to capture the multi-dimensional complexity of chess openings, using the dataset of all games played between chess titans Kasparov and Karpov.

D3 Chess Squares Permalink

less than 1 minute read

Using the Kasparov-Karpov data-set, this visualisation shows relative occupation times for each square. The occupation times can be filtered by type of piece...

Back to top ↑

2019

D3 Chess Board Permalink

less than 1 minute read

I needed a chess-viewer for a larger data-viz project I’m working on ( see here ) and D3 seemed like the perfect tool for the job. The viewer takes lists of ...

Visualizing the UK’s Establishment Permalink

less than 1 minute read

This chart shows the findings of a recent commision into equality in Britain. It found that a small, self-perpetuating elite, attendees of the ‘‘right’’ scho...

Observable Intro

2 minute read

I decided to try out Observable, Mike Bostock’s (Mr D3) latest venture, by implementing a little demo I did to show how AFrame and D3 can help bring JavaScr...

Historic UK Weather Permalink

less than 1 minute read

I used Python and D3 to transform some old pages of row-columnar data provided by the UK Meteorological into an animated coloured map, showing hours of...

Gothic Window Generator Permalink

less than 1 minute read

A rainy bank-holiday Monday was a good excuse to try and indulge my aesthetic whims. Something to overload the frontal cortex with colors and symmetries, som...

UCL Dataviz Workshops 2019

1 minute read

The course structure and some online resources for the UCL Business Management Dataviz module.

A Dynamic D3 Filter Menu Permalink

less than 1 minute read

A recent job required a menu that lets one progressively filter a packet of row-column data, drilling down to items of interest. It was refreshing to use D3 ...

Back to top ↑

2018

A Bespoke D3 Histogram Permalink

less than 1 minute read

A bespoke D3 histogram, with synchronizing axes. The variable radius and color of the plotted circles allows the representation of four dimensions, the x and...

Brush Filters with Active Charts Permalink

less than 1 minute read

A recent client wanted a way to filter a large dataset of objects while seeing any changes immediately reflected by data-selective charts. Using ...

Back to top ↑