Fractal Trees with Svelte
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...
Post Archive
2022
Line to Stacked Area Chart with Svelte Transitions
This chart transitions from a conventional multi-line chart to a stacked area chart, using Svelte transitions. LayerCake and D3 add ballast to the foundation...
Circular Bar Chart Component with Svelte, LayerCake and D3
This is a little demo of a circular bar chart, built using Svelte, Layer Cake and a little D3.
A Binary Tree with Svelte, D3 and Layercake
A client wanted a recreation of the rather superb binary tree demo by R2D3. Without appropriating the specific aesthetics but building a configurable compon...
Svelte Scatterplot Component with Gapminder-esque Demo
I used Svelte (with Layercake) to build a little scatterplot component with selectable axes and toggled log-plots. This makes for an easy Gapminder-alike dem...
Picasso Sketches with Evo-canvas
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...
Mountain Car Challenge
Introduction To quote the OpenAI Gym page, the challenge consists of:
Visualizing The Nobel Prize Winners
My book Data-visualization with Python and JavaScript uses a freshly scraped, cleaned and refined Nobel-prize dataset to build a JavaScript web visualization...
2021
Bespoke Charts with Svelte, D3 and LayerCake
In order to present their data on discrimination against Asian-Americans in the United States, Dataface Dataface required some bespoke interactive charts, ba...
Covid Vaccine Efficacy - Visualising Simpson’s Law Permalink
I recently came across a tweet which mentioned the likelihood that recent Covid vaccine efficacy stats coming out of Israel were an example of a famous stati...
2020
All That Jazz, Patterns in the Keys Permalink
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
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
The course structure and some online resources for the UCL Business Management Dataviz module.
D3 Chess Board Permalink
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
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
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...
2019
D3 Chess Board Permalink
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
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...
UK Demographics Explorer (Verify GOV.UK) Permalink
A data visualisation for the UK government’’s Verify project, allowing exploration of Verify’’s demographic coverage using a dataset provided by the Office o...
Observable Intro
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
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
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
The course structure and some online resources for the UCL Business Management Dataviz module.
Visualizing Walking Gaits from Smartphone Sensors Permalink
The phone in your pocket isn’‘t just recording your position by satellite and wifi signal (and sending it on to who knows where?), it also has little acceler...
Warped England: Why young people can’t buy houses anymore Permalink
A D3 maps visualization of the change in the ratio of English house-prices to household incomes over the period 1997-2012. By warping the map of England to r...
A Dynamic D3 Filter Menu Permalink
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 ...
2018
A Bespoke D3 Histogram Permalink
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
A recent client wanted a way to filter a large dataset of objects while seeing any changes immediately reflected by data-selective charts. Using ...
