Custom Viz with AI
We have the building blocks now — shapes, scales, data, colour. From here the interesting question shifts from “how do I draw a circle?” to “what’s worth drawing?”
This chapter is a small gallery of charts you could reach for next, each one a good fit for building alongside an AI assistant: you describe the idea, it drafts the D3, and you refine. Every example comes with the prompt that produced it — in the sidebar — so you can try it yourself.
1. Packing the Discs by Genre
Our grid gave every song the same square. But songs aren’t really a flat list — they cluster: many songs share an artist, and many artists share a genre. A circle-packing layout shows that nesting directly: each song sits inside its artist’s circle, and each artist inside its genre’s circle.
Every leaf is the same vinyl disc we built — a dark record with four wedges radiating from the centre for popularity, tempo, energy and danceability, and a genre-coloured hub. Here each disc is sized by popularity, so the hits grow large while the deep cuts stay small, and every genre is tinted its own colour.
2. A Force-Directed Cloud
The packing was tidy and still. This time we let the discs move. A force simulation gives each disc a little physics: they drift, bump into one another, and settle — and we nudge them so that discs of the same genre drift together into loose clumps, with each genre pushing the others away. No fixed grid, no anchors; the layout just emerges.
It’s also interactive. The circle under your cursor shoves nearby discs aside, so you can carve a path through the cloud, and the slider changes how many songs are in play at once — drag it and watch the simulation re-settle.