blocks by tomgp

grouped bars




a map of African nations

grid layouts

2d Slider

Stacked and stepped area chart

Radial stack layout

redux tutorial steps


svg calendar page

sine oscilator

canvas kaleidoscope

css mix-blend-mode

svg path jittering

convert a bunch of files using nodejs and the sips utility on osx

Simple end to end layout (for stacked area etc.)

simple npm script based build for js projects

some css layouts I've used, an ongoing collection

measure the elements in a d3 selection, and get the max dimensions

UK numberplate style

simple HTML + plain JS slider

move tick labels to another group

using external SVG icons with an icon array

path data polyfill example

image scanlines cf Shigeo Fukuda

Modal transport share

icon array widthFirst or not?

US senate icon array

icon array scale interactive example

Outcomes associated with group B strep (GBS) among pregnant women

Icon array hemicycle example

Simplest icon array


in NodeJS get a list of files, depth first down the directory tree, matching a certain function

Split an array

Isometric projection

ES6 bits and bobs

uses of reduce

Server side SVG via D3 & jsdom

SAT scores sluggish?

digital heatmap


Complex number division

get an SVG transform attribute and split it into an object with properties

do two DOM elements overlap?

New Political Compass

UK parliamentary constituency displays

simple resize

line interpolation with gaps

very simple tick formatter

Vibrational effect 1

topojson neighborhoods

drag circles around in a ring

Different style for origin tick

lables round a circle

SVG Arrow heads

evenly distribute points on a circle

Screensize vs Browser size

adding a particular date to an SVG axis

slider with map 'tooltip'

Small multiple maps


Dot density circles

Ternary Plot refactoring.

Ternary plot

Breaking down the pressures on energy bills

Control patch line

Control Patch

Convolution: smoothing noisy data

Discrete Gaussian distribution

Growth chart

Simple D3 clock

Snowden's Route