Jo Wood
LightNews LightNews
banner
jwolondon.bsky.social
Jo Wood
@jwolondon.bsky.social
3.2K followers 370 following 620 posts
Professor of Visual Analytics who does datavis, visualization storytelling and natural travel. Did I mention visualization?
Posts Replies Media Videos
jwolondon.bsky.social
Do you want a bit more sketchiness in your #datavis?

Here's my @observablehq.com Plot plugin that turns an Plot specification into a sketchy version with minimal extra work:

observablehq.com/@jwolondon/m...

Builds on the work of Gordon Tu and rough.js
A grid of 24 data visualizations all rendered in a sketchy style. From left to right, top to bottom: An area chart in red and black; a vector arrow in red; a grid with axis labels; three red dots; an empty frame; a world map; a bar chart; a Bollinger chart; three box plots; a grid; a hex bin density plot in red and blue; a red line with one maximum and one minimum point of inflexion; a contour plat in rainbow colours; three elliptical regions in yellow, blue and red; a dodge plot showing two peaks; a scatterplot of blue points with red linear regression line; 4 lines intersecting at a central point; a normally distributed histogram; a normally distributed histogram represented as red vertical lines; vertical tick marks in red looking like a bar code; a tree diagram with 8 nodes; a vector arrow; a voronoi diagram with yellow, blue and red regions; a waffle chart showing 3 categories as vertical stacked squares in blue, orange and red.
October 19, 2025 at 5:11 PM
jwolondon.bsky.social
Possibly something happening in your browser/OS? Here is the same block of text as seen on my Mac / Safari. The x-height is pretty consistent. Note also the larger gap below the dots on the i.
Small section of text in the Quiosco font. The text reads "Trump's decisive Elect more sharply defined st" with the left and right words truncated in this enlarged sample.
October 15, 2025 at 6:12 PM
jwolondon.bsky.social
Channels
A complex knotted path of curved red lines but structured around a meandering channel and apparent contours each with a different texture of curved lines.
September 27, 2025 at 7:13 AM
jwolondon.bsky.social
Fields
A complex knotted path of curved red lines but structured in seven rows of unequal height, each with a different texture of curved lines.
September 27, 2025 at 7:13 AM
jwolondon.bsky.social
And another thing...
A complex knotted path of curved red lines that show a grid-like structure. Produced by a tessellation of hex Truchet tiles with arcs and bezier curves that intersect with each hex edge's midpoint. Rendered in Observable Plot with a custom Truchet mark.
September 27, 2025 at 5:41 AM
jwolondon.bsky.social
* Where shall we go for a walking holiday this year?
- How about the Alps?
* No, way too scary. I don't have a head for heights.
- OK, what about the gentle grassy domes of the Auvergne?
* Sounds great.

Day two of our walking holiday...
A black-and-white photograph of a dramatic mountain landscape around Puy De Sancy, Auvergne. Jagged peaks rise steeply, their dark, textured surfaces contrasting with the low-hanging clouds that partially obscure the summit. Near the center top, a solitary building (cable car lift) sits above a steep cliff.
July 29, 2025 at 2:58 PM
jwolondon.bsky.social
Currently in Lyon for some #eurogames and in preparation for some Auvergne walking next week. And Lyon is certainly good preparation, being a city of many many steps.

Here's just the first set from the 400+ up to our apartment.
A photo of a long, steep outdoor staircase between buildings, in Lyon. Each step painted with vibrant, coluorful abstract patterns forming a cohesive mural when viewed from below. The stairs are flanked by railings and lush green foliage on either side.
July 26, 2025 at 4:41 PM
jwolondon.bsky.social
A minor word of caution. Lightness doesn't vary linearly across the gradient (a peak at yellow), so not ideal for linear scaling.

The lower band uses a perceptually linear gradient via CSS oklch:

oklch(95% 0.02 190deg) to oklch(65% 0.2 25deg)

See observablehq.com/@jwolondon/h...
Two colour gradients both varying from pale blue/grey on the left through green and yellow to orange/red on the right. Between them are the labels 0 25 50 75 and 100 evenly spaced from left to right. The upper band is the Tableau colour gradient, the lower produced using okLCH colour specifications: oklch(95% 0.02 190deg) to oklch(65% 0.2 25deg).
July 10, 2025 at 12:51 AM
jwolondon.bsky.social
Onomatopoeic programming you say?

Here's a Rivulet program that generates a Collatz sequence from any given start integer.

en.wikipedia.org/wiki/Collatz...
A Rivulet program of meandering linear strands that has the appearance of the word COLLATZ and also generates a Collatz sequence when passed to the Rivulet interpreter. The source code is 1 ╵╭─────╯╵╵╭──────╮╵╵ ╭─ ╵╵╭─── ╵╵╰──╮ ╵╵╵╭───╮ ╵╰──╮╵╵ ╭─────────╮ 2 │ ╭──╶ │╷╰──╮ │ ╵╴╮╵╯ │╭─ ─╮│ │ │╭─│ │ ╷ ╮╰──╮ │ 3 │ │ ╭╯ │ │ │ │╰─╯╮ ╯╯ ╰─╯╷ ╴╮ ╰──╶││ │╴──╯ ╰╮│ ╰╶╭╶ ╭╯ 5 │ │ ╷ ─╮│ │ │ │ │╮ ╭╭ │ │ ╷│╯ │╭ ╷│ ╭╶ ╭╯ ╭╯ 7 │ │ │ ╰╯ │ │ │ ││ ││ │ ╭ ╭─╮ ╯ ╭╯╯╭ ╯│ │╷ ╯ ╯ ╯ │ ╰───╮ │ │ │ ╰───╯│ ││ ╰───╮ │ │ │ ╭ ╷ │ ╭╰─ ╭ ╭ ╭ ╭ ╰─────╯ ╰──────╯ ╰──────╯ ╰─────╯ ╰─ │ │ ╰─╮│ │ │ │ │ │ ╷ ╷ ╷ ╷ ╰─╯╷ ││ │ │ │ │╭─╯ ╭─╯ ╭│ │ ╰─╯ ││ │ ││ ╰╶ ╭──╯╰───╰───╮ │ │ ╰────── ────╯ ╰─╯ ╷ ╷
June 19, 2025 at 10:45 PM
jwolondon.bsky.social
Excited to receive this today. Chart by @nadiehbremer.com . I was lucky enough to get early access to a digital copy to provide feedback, but the paper copy is more lovely to hold & smell.

Bridges an important gap between design exposition (e.g Data Sketches by Bremer and Wu) and a design handbook.
Photo of the cover of the book 'Chart' by Nadieh Bremer. Comprises the word Chart repeated over 5 rows, but with the middle row abbreviated to 'Art' next to the subtitle 'Designing creative data visualizations from charts to art. Nadieh Bremer'. Around the edge of the sold black rectangle containing this text is a brightly coloured radial plot. A photo of a double-page spread from the book 'Chart' by Nadieh Bremer. Across the two pages is large text reading 'ADD' on the left, and 'Randomness into the mix' on the right. On the left page is a subtitle 'Randomness broadens your visual possibilities and will reveal unexpected refreshing outcomes'. The remaining text on both pages is smaller and too fine to read at this distance. A photo of a double page spread from the book 'Chart' by Nadieh Bremer. The title is 'Crops that drive world trade in hazardous pesticides'. On the left is a collection of voronoi-like cells within 5 diamond shaped regions, with a slice of the voronoi cells colour coded by toxicity type, the other cells being shown in grey. On the right are 5 packed circle designs with similar colour encoding. To the right of them is explanatory text.
June 19, 2025 at 1:55 PM
jwolondon.bsky.social
@dtemkin.bsky.social 's Rivulet esolang prompts ideas around code and #datavis comprehension. How do we make sense of visualizations when we are unfamiliar with the 'grammar' of their design?

An introduction Rivulet:

observablehq.com/@jwolondon/r...

An editor:

observablehq.com/@jwolondon/r...
A Rivulet program in the form of coloured lines meandering over a yellow background with faint grey gridlines. The red line on the left traces a vaguely stag-like image with three-tined 'antlers'. On the right are orange, green and blue lines tracing a vaguely castle or maze-like structure with crenellations on the top edge. The program calculates the factorial of some input value, which in this case is 7! =5,040. The Rivulet source is 1 ╵╰─ ╵╵╰──╮ 2 ╮ ╮ ╭ ─╯╷ 3 ╮╷ ─╮│ │╭──╯ 5 │╭ ╭╶╵╰─╯│ │╷ 7 ─╮ ╭─ ││ │ ╰───╯ │╰──│ 11 ╭─ │ │ ╭─ │╰─╯ ╭ ╰───╯╷ 13 │ │ ╭─│ │╭─│ ╭─╮│ 17 │ ╭──╯╭───╯ │╭────╯│ │ │ ││ 19 │╭──╯ ╭─╯╭────╯│ │ ╰───╮ │ ││ 23 ╰───╯╯ ╯ ╯ ╮╯ ╰───╯╮ ─╮╷ │╴╯│ 29 ╰─── ╰───╯ ╭╯ ─╯ 31 ╭ ╭╯ 37 │ ╭─╯ 41 ╰─╯ 43 ╷
June 15, 2025 at 7:50 AM
jwolondon.bsky.social
It's the time of year when this season's fox cubs try being more independent of their family unit. We have three surviving cubs in the den next to our garden. This one likes to snooze on the warm patio at the end of a sunny day just outside our garden door.
Photo of a fox cub sleeping against a glass door on a patio. In front of the cub, on the inside of the door is a brown door mat with the faint image of an adult fox. Both the cub and the door mat are similar orange-brown colours.
May 31, 2025 at 4:33 PM
jwolondon.bsky.social
But, this doesn't pack well if adjacent numbers are of similar magnitude.

I wonder if we can algorithmically determine a good packing of strands (ignoring for the moment the need to align with Action strands). Here's a more compact version of the same program with more efficient packing.
Another Rivulet program representing the ASCII codes for HELLO WORLD!. Coloured lines on a pale yellow background that fill space more efficiently than the 'L' shaped strands produced when minimising strand length. Here is the .riv code that produces this result: 1 ╵ ╶╮╰─╮╶╮╭╯╰─╮╭╯╭╯╰─╮╰─╮╭─╯ ╶╮╭╯ 2 │ │ ││ ││ ╰─╮ ╰─╮││ ││ 3 ╭──╯ │ ││ ││ │ ││╰────╮ ││ 5 │╭────╯ │╰──╮│╰──╮╰──╮│╰──╮ │ ││ 7 ││ ╰──╮││ │ ││╭──╯ │ ││ 11 │╰──────── │││ ╰── │││ ╭───╯ │╰─── 13 ╰────── ╭──╯│╰────── │││ ╰────╮│ 17 ╭──────╯ ╰─────╮╭─╯│╰───── │╰──── 19 ╰────────── ─╯│ ╰──── │ 23 ╰──── ╰── ╷
May 18, 2025 at 9:45 PM
jwolondon.bsky.social
I love this!

Experimenting with simple value strands, thinking about how to minimise strand length for any given number representation. A variation of the knapsack problem with primes? I think shortest strands will never have lefts. Here's ASCII 'HELLO WORLD!' in list 1 with shortest strands:
Rivulet program representing the ASCII codes [72, 69, 76, 76, 79, 32, 87, 79, 82, 76, 68, 33] (HELLO WORLD!). The show 12 coloured lines arranged left to right in a row. Each is broadly 'L' shaped. The text of the .riv file that produces this is: 1 ╵ ╮╮ ╮ ╮ ╮╮ ╮ ╮╮ ╮ ╮╮ 2 ││ │ │ ││ │ ││ │ ││ 3 │╰─╮ │ │ ││ │ ││ │ ││ 5 │ │ │ │ │╰──╮ │ │╰─╮ │ ││ 7 ╰─╮│ │ │ │ │ │ │ │ │ ││ 11 │╰────── ╰─╮ ╰─╮ ╰─╮ ╰── ╰──╮ ╰─╮╰─────── ╰─╮ │╰─── 13 ╰───── ╰───── ╰───── │ ╰───── │ ╰───── │ 17 ╰──── ╰──── ╰──── ╷
May 18, 2025 at 9:45 PM
jwolondon.bsky.social
Will try to navigate the satire/serious path here.

Important to distinguish data ink *ratio* (however flawed a concept) from data density or mark density.

The attached has c. 1,000,000 data points represented as marks. Not necessarily hard to interpret; high data-ink ratio; high data density.
A shaded relief map of the English Lake District. A raster (bitmapped) grid of terrain shading is coloured by absolute elevation from green (low) to sandy brown (high). Thin contour lines are overlaid to emphasise terrain shape. The major rivers and lakes in light blue are overlaid on this forming a radial pattern away from the centre of the map. Selected towns are labelled: Ambleside in the bottom centre; Keswick in the top centre and Pooley Bridge in the top right. Three high peaks are also labelled: Scafell towards the bottom left, Helvellyn towards the centre and Skiddaw at the top centre.
April 24, 2025 at 3:00 PM
jwolondon.bsky.social
From 1929 (JF Horrabin's cartoon used in a British Labour Party campaign that year).
Cartoon used in 1929 Labour campaign with the title "Equality of Sacrifice?" below which is a cartoon of 4 men on a ladder resting against in flood water. The man at the top is large, wearing a top hat and "£10,000 a-year man" on his jacket. Below him on the ladder is a bowler hatted man with "£1000 a-year man" on his jacket. Below him is a trilby-hatted man with "£250 a year man" with his lower legs in the flood water. At the bottom with just his head above water is a flat capped man with an annotation "The unemployed man". The caption to the left reads "The man at the top - 'Equality of sacrifice – that's the big idea, friends! Let's all step down one rung!". At the bottom of the poster is the text "Vote Labour"
April 3, 2025 at 4:14 PM
jwolondon.bsky.social
Want to create your own custom marks in @observablehq.com Plot, but don't want to go full D3?

I've created a guide with 6 approaches of varying sophistication for specifying reusable custom marks:

observablehq.com/@jwolondon/h...
A selection of custom marks generated with Observable Plot. From top to bottom: A categorical bar chart with black hachured patterns in 6 different directions; A faceted bar chart using Isotope symbols showing cattle, pigs and sheep in red, grey and blue; a sequence of geometric symbols in blue gradually increasing in size: circle, triangle, square and fan, repeating 3 times, below which is a sequence of 12 human-like figures also increasing in size; A curve made up of ellipses that transition from vertical to horizontal to cicrcular shapes; a set of thee dot and whisker symbols in black and white; an abstract geometric arrangement of teardrop shapes in green to brown colours forming concentric bands away from the bottom left; a map of cycle hire journeys in London represented by asymmetric curves in a range of colours, overlaid over the river Thames; a map on London boroughs symbolised with dots of varying density with the highest density of dots towards the outside, lowest in the centre; a 'chart' of flowers of different shades of purple and orange.
March 31, 2025 at 8:16 PM
jwolondon.bsky.social
Playing with pinhole camera and today's partial #solarEclipse. It kind of works, but unexpectedly, lens ghosting works even better.
Photo of a pinhole shadow projected onto a vertical piece of plastic piping in the garden. Within the shadow can be seen a small crescent shape of light showing the partial solar eclipse shape. Photo of the sun and blue sky and condensation trails with a rooftop silhouette showing a chimney stack. To the left of the stack is a green lens ghosting showing clearly the crescent shape of a partial solar eclipse.
March 29, 2025 at 11:31 AM
jwolondon.bsky.social
Although the evening speed limit is voluntary, probably best to obey.
A road sign in Zurich with a picture of a very large toad looming over a person getting out of a car on the road. Above the image is the word "Amphibienschutz" and below it "Abends freiwillig 20 lm/h". The English translation would be "Amphibian protection: Voluntary evening speed limit 20 km/h"
March 24, 2025 at 8:00 AM
jwolondon.bsky.social
I suppose once upon a time, a local newspaper site could legitimately claim "Local newspaper says it has published the world's first unreadable news site littered with popup ads for anti aging snake oil, slimming pills and crypto investment opportunities. Not sure it's something to be proud of.
Screenshot from the Guardian front page, 18th March 2025. Under red text saying "Italy", the headline in black text reads "Italian newspaper says it has published world's first AI-generated edition"
March 18, 2025 at 4:36 PM
jwolondon.bsky.social
I love these! Such a variety of forms achievable with just small parameter tweaks.
Clifford attractor forming a triangle of rainbow coloured funnel-like shapes. Based on the these parameters: https://observablehq.com/@rreusser/clifford-and-de-jong-attractors-revised-coloring?type=Clifford&a=-0.698555402688055&b=-2.5&c=-0.948401947296007&d=0.280267964864016&brightness=0.3&contrast=1.05&gamma=2.2&saturation=0.8&colorSpeed=1.46004815891265&colorPhase=228.403361344538&invert=false&flip=true Clifford attractor forming two large lobes extending right and down from a green triangle shape at their intersection. Formed from these parameters: https://observablehq.com/@rreusser/clifford-and-de-jong-attractors-revised-coloring?type=Clifford&a=-1.00334956080002&b=-1.856545666208&c=-0.711339824320028&d=0.314133982432007&brightness=0.3&contrast=0.79453781512605&gamma=0.890389094129673&saturation=0.777310924369748&colorSpeed=0.194861107748022&colorPhase=180&invert=false&flip=true Clifford attractor look like a series of orchid like flowers on long stems radiating from a central green mass of intersecting stems. Formed from these parameters: https://observablehq.com/@rreusser/clifford-and-de-jong-attractors-revised-coloring?type=Clifford&a=-2.16133982432&b=-1.1114932797121&c=-0.637369033760203&d=-1.37916689596787&brightness=0.3&contrast=1.05&gamma=0.890389094129673&saturation=0.340336134453782&colorSpeed=0.194861107748022&colorPhase=180&invert=false&flip=true Clifford attractor forming a shell-like torus structure in muted greens. Formed from these parameters: https://observablehq.com/@rreusser/clifford-and-de-jong-attractors-revised-coloring?type=Clifford&a=-2.16133982432&b=-2.1952058418881&c=-0.637369033760203&d=-1.37916689596787&brightness=0.466386554621849&contrast=2&gamma=1.21348276774914&saturation=0.172268907563025&colorSpeed=0.106495820255651&colorPhase=213.27731092437&invert=false&flip=true
March 16, 2025 at 9:20 AM
jwolondon.bsky.social
More places available for fully funded 4-year PhDs in #datavis 📊 with us at diverse-cdt.ac.uk in London / Warwick.

We welcome applications from anyone with enthusiasm for #datavis. We aim to diversify approaches to datavis & the people who lead it.

Change what we can see. See what we can change.
Yellow banner across the top with black text reading "Looking for a funded PhD in data visualization?" and smaller text reading "EPSRC Centre of Doctoral Training in Diversity in Data Visualization". Below this is a mosaic of around 100 different data visualizations in many colours and styles. Bellow that is another yellow banner with black text reading "Change what we can see. See what we can change". At the bottom is a QR code and associated URL pointing to https://diverse-cdt.ac.uk and the text 'Scan QR to apply'. To its right are three lines of text reading "DIVERSE-CDT offers fully funded 4-year PhDs in London or Warwick. One year of training and three years of internships, lab busts and study. Work as a cohort of PhD students for a career using data visualization". In the bottom right corner are three logos representing UKRI EPSRC, City St George's University of London, and Warwick University.
March 3, 2025 at 4:48 PM
jwolondon.bsky.social
And for me, both in data visualization and board gaming, I am drawn to well crafted graphic design. I want my games (and datavis) just to look and feel "right". Where boardgames can often go one step further than #datavis is in their physical design. Hello Azul and your lovely tiles.
Photo of the board game Azul from above showing the central layout of 6 circular mats with some tiles placed on them and some discarded tiles in the centre. Below is one player's board with some tiles placed on it.
February 22, 2025 at 3:53 PM
jwolondon.bsky.social
Some games, like Mysterium (pictured) and Dixit rely explicitly on decoding visual encoding to succeed in the game. The fun is often in realising how different we each are in the way we interpret complex visual scenes.
February 22, 2025 at 3:53 PM
jwolondon.bsky.social
Pax Pamir is one of my favourites because it ostensibly follows the 'map as control' but subverts the idea in gameplay. Yet the visual remains important. There's great use of physicalisation via the unused clay pieces that form an evolving bar chart of game status.
Photo of the board game Pax Pamir from above showing the grid of 'marketplace' cards at the top and a fabric map below with clay pieces laid out over and between different regions. To the right are three stacks of clay pieces in green, pink and yellow forming a bar chart of unplayed pieces. At the bottom is one player's board with red cylinders in a row also giving an immediate indication of player progress.
February 22, 2025 at 3:53 PM