Beyoncé's entire solo discography as one interactive hive plot - eight albums wearing their own cover art, every track coloured by its era, all seven tours, and every credited collaborator with live Wikipedia bios. It shimmers, it glows, and yes - it sings.
- Albums as art - each album node is its cover, clipped into a gold-ringed circle, fetched live from the iTunes Search API
- Every track, every era - 100+ songs in a two-strand zigzag along the songs axis, each dot and its curve coloured by the era it belongs to, with a visible breath between albums so the axis reads as a timeline
- Song previews - toggle sound on, hover a song, and a 30-second preview plays with a "now buzzing" pill and animated equalizer
- Deep tooltips - albums get hand-written facts (the five-Grammys night, the midnight drop, the four key changes of "Love On Top"); songs get track number, duration, and feature chips; tours get their own stories (the on-stage pool, the chrome dress code)
- Live collaborator bios - hover any collaborator and their photo and first line of biography arrive from Wikipedia's API, lazily, cached on first hover
- The spotlight - hover anything and everything unconnected fades to a whisper; underneath it's just an adjacency lookup and an opacity change
Each era's colour is picked from its album cover:
| Era | Year | Colour |
|---|---|---|
| Dangerously in Love | 2003 | #ff7a5c coral |
| B'Day | 2006 | #f5b83d gold |
| I Am... Sasha Fierce | 2008 | #cfd4dd platinum |
| 4 | 2011 | #e88fb0 rose |
| Beyoncé | 2013 | #b48be0 midnight violet |
| Lemonade | 2016 | #ffe066 lemon |
| Renaissance | 2022 | #8fd6cf chrome teal |
| Cowboy Carter | 2024 | #e05c5c rodeo red |
The graph structure (albums, tours, era facts) is hand-curated in the file. Everything else is fetched live at load time:
- Tracklists, artwork, durations & previews - iTunes Search API (no key needed)
- Collaborator photos & bios - Wikipedia REST API (no key needed)
- Featured artists - parsed straight out of track titles (
feat. …), which means the collaborators axis builds itself from the data - Critic scores - coming soon, hand-verified from Pitchfork & Metacritic. When every album has one, the albums axis automatically reorders itself from by year to by acclaim
Everything you need to change lives at the top of the file:
- Swap the
ALBUMSarray - name, year, era colour, and a fact per album - Swap the
TOURSarray - or delete it if your artist doesn't tour - Change
"Beyoncé"in the iTunes search term to your artist - That's it. Tracklists, artwork, features, previews, and bios all rebuild themselves.
A network visualisation where nodes sit on axes by type instead of floating in a force-directed hairball, invented by Martin Krzywinski, used on graph data by Max De Marzi's 2012 Neo4j experiment.
This is the sister project of my Odyssey hive plot EPIC: The Musical's story graph, modelled in Neo4j and exported to d3. That one comes with a full tutorial if you want to build your own from a real graph database.
Made by Kemi Elizabeth Ojogbede - Technical Curriculum Developer at Neo4j GraphAcademy
Hive plot concept by Martin Krzywinski. Built with d3.js. All music, artwork, and imagery belong to their respective owners; this is a non-commercial fan project for the love of the craft (and Beyoncé).