DEV Community: notbigmuzzy

Genregraphy - Cartographic History of Music Genres

notbigmuzzy — Fri, 13 Mar 2026 13:10:49 +0000

Genregraphy is an interactive map of music genres from 1950 to 2025. It groups genres by similarity and renders them as continents. The size and borders of each "country" change year by year based on release data.

The system architecture runs on two ends. Python scripts scrape and normalize the historical release numbers offline. The browser then takes that dataset and uses D3.js to calculate the Voronoi polygon geometry on the fly, with Vue managing the timeline state.

Scraping

The underlying dataset comes from MusicBrainz and Last.fm, but clean timeline data for genre popularity was an absolute nightmare to extract.

There is no single API endpoint for "all albums by genre per year." The data pipeline required a massive multi-step process. First, the script queries MusicBrainz for baseline releases ( I drink tea ). Then hits Last.fm to cross-reference tags and pull detailed descriptions ( I drink tea ).

This forced me to deal with API rate limits, massive inconsistencies in tagging (sync "post-punk" vs "post punk"), and manual mappings of micro-genres to assign them to top-level families ( drink more tea ).

The backend is a labyrinth of Python scripts that fetch, merge, deduplicate, and calculate the exact album counts for every year since 1950 ( while I drink tea).

The final output consists of heavily optimized JSON shards grouped by decade.

Cartography

To keep the terrain stable as years pass and data wildly fluctuates, the layout uses a strict macro-geography model:

Anchored Continents: The logic groups micro-genres into 9 macro-families (Rock, Electronic, Jazz, etc.) and anchors them to precise cardinal directions. Rock & Metal live in the East and North. Electronic & Hip-Hop dominate the West. Reggae and Global Beats sit in the South.
Organic Borders: D3.js handles the geometry via nested hierarchies. The engine packs genres together based on volume, and these packed nodes serve as primary seeds for a Weighted Voronoi tessellation. The Voronoi algorithm draws contiguous, polygon-shaped borders around these seeds, mutating raw numbers into a continuous, geographical landmass.

To push hundreds of complex SVG paths efficiently while a user scrubs the timeline, the engine resolves the math in phases. It calculates the rigid macro-continents first to establish solid borders, then dynamically packs the mutating micro-genres inside them.

Code

Here is the logic for terrain calculation without layout thrashing:

// First, map the macro-continents based on global album totals
const macroHierarchy = d3.hierarchy({
    name: 'root',
    children: allGroups.map(name => {
        const group = yearData.genre_group.find(g => g.name === name)
        const trueRatio = group && computedGlobalTotal > 0 ? (group.total / computedGlobalTotal) : 0
        return { name, value: Math.max(0.001, trueRatio) } // Prevent UI collapsing
    })
}).sum(d => d.value)
  .sort((a, b) => a.data.name.localeCompare(b.data.name))

const macroPack = d3.pack().size([width, height])
const macroNodes = macroPack(macroHierarchy).leaves()

// Then, dynamically pack the actual genres inside their assigned continent limits
macroNodes.forEach(macroNode => {
    // ...
    const root = d3.hierarchy(hierarchyData)
        .sum(d => {
            // Apply a logarithmic scale to the album counts so dominant 
            // genres don't completely swallow the map 
            if (!d.value || d.value <= 0) return 0
            return 25 + (Math.log10(d.value) * 20)
        });

    // Determine the exact required diameter to fit our genres
    const minNeededDiameter = 2 * minNodeR * Math.sqrt(totalSum / Math.max(minValue, 1));
    const dynamicDiameter = Math.max(baseDiameter, minNeededDiameter);

    const pack = d3.pack()
        .size([dynamicDiameter, dynamicDiameter])
        .padding(3);
    // ...
});

Frontend

The D3 layer handles the map math, wrapped in an immersive shell powered by Vue 3 and Vite. This combination forces the DOM updates to remain smooth. The visual jump from the early 1950s rock-and-roll expansion directly to the 2010s EDM explosion remains completely seamless.

Live Demo - https://notbigmuzzy.github.io/genregraphy/
Source Code - https://github.com/notbigmuzzy/genregraphy

Data disclamer

To make this thing fun to use, some decisions had to be made:

The 120 Limit: MusicBrainz and Last.fm return thousands of micro-genres. Plotting thousands of tiny nodes on a single map would not be realistic, so I chose a curated set of 120 foundational genres and umbrellas. Some will agree with the list, some will not, that is fine.

120 Genres - text

The "Round Year" Compensation: Early on I noticed heavy clustering of data. I'm guessing that when people log album releases but aren't sure of the exact year, they naturally default to round numbers (1980, 1990, 2000). The year 2000 was an absolute anomaly in the dataset—without mathematical compensation, that single year would appear as the defining peak for 50 different genres simultaneously. I had to algorithmically balance the numbers for these milestone years. Again, some will agree with this, some will not, that is also fine with me.
Logarithmic Scaling: If you size the map areas purely geographically (1-to-1 based on release numbers), majority of genres would simply disappear from the screen. Pop and Rock would take up 95% of the space, leaving everything else as a single unclickable pixel. A logarithmic scale guarantees the massive genres stay prominent without completely hiding smaller, culturally vital movements.
The Parent Tag Problem: Terms like "Blues", "Rock", or "Metal" function as both specific genres and wide colloquial umbrellas. There is rarely a "pure" Rock artist (they are Indie Rock, Hard Rock, etc.), but discarding tens of thousands of tags labeled just "Rock" ignores valid data. I kept these massive parent nodes in the ecosystem, accepting the tradeoff that they inherently capture a larger percentage of total territory on the map.

Powered by MusicBrainz and Last.fm.

Immersive Gallery: Mapping the MET API to Dynamic Soundscapes

notbigmuzzy — Thu, 05 Feb 2026 12:14:00 +0000

The last time I created an online museum experience, it kinda felt off. You walk from room to room, wait for things to load, and look at static images. It's not bad, but it lacks vibes.

So I decided to try a different approach: build something that felt less like a museum and more like a stream of consciousness. What if you could scrub through art history the way you scrub through a YouTube video?

Enter Gogh With The Flow :)

The Metropolitan Museum of Art has an incredible Open Access API. It’s a treasure trove of human history. But APIs have rate limits, and fetching data for 1450, 1451, 1452... as fast as a user can scroll would instantly hit a wall (or just be incredibly slow).

I wanted the experience to be fluid. No "Loading..." text. No spinners. Just flow.

To solve this, I employed a "hybrid" strategy:

Pre-indexed "Shards": I scraped the collection to build lightweight JSON files for every year (e.g., 1889.json, 1450.json). These contain just the valid Object IDs for that year. They are tiny and load instantly.
On-Demand Detail: When the dialer settles on a year, the app grabs a random selection of IDs from that shard and fetches the images.
Lazy High-Res: We load optimized thumbnails first. Only when you click to "enter" a painting do we ping the API for the massive, high-resolution file, allowing you to zoom in and see the individual brushstrokes.

GSAP does the heavy lifting regarding animations. DOM manipulation is heavy but by using GSAP's InertiaPlugin and careful tweening, the transition between years—fading out the old era and drifting in the new—happens without layout trashing or "ghosting" ( as much as I could pull it off :) )

Example here showing how 'paralax' panels are handles with minimal perf impact

// The "Time Travel" Engine
const updatePanels = () => {
    // Calculate how fast we are scrubbing
    const scrollPos = dialer.scrollLeft;
    const delta = scrollPos - lastScrollPos;

    panels.forEach(panel => {
        // Create parallax depth: background moves slower, 
        // the "window" moves counter to create focus
        let speedMultiplier = panel.className.includes('panel-window') ? -1.5 : 
                              panel.className.includes('panel-further') ? 0.25 : 0.5;

        // Apply momentum without layout thrashing
        let currentX = gsap.getProperty(panel, 'x') || 0;
        currentX += delta * speedMultiplier;

        // Infinite Loop Logic: 
        // If a panel goes off-screen, warp it to the other side
        const screenPos = panel.offsetLeft + currentX;
        if (screenPos > viewportWidth + 200) {
            currentX -= viewportWidth + 400;
        } else if (screenPos < -200) {
            currentX += viewportWidth + 400;
        }

        // Use transforms for 60fps performance
        gsap.set(panel, { x: currentX });
    });
};

Visuals are only half the story. To truly sell the time travel aspect, the soundscape shifts with you.

1400s: Pre-Renaissance choral echoes
1600s: Baroque strings
1800s: Romantic orchestral swells
1900s: Early variations of impressionistic sound

The audio player is set up so it cross-fades tracks as you traverse centuries and even handles "radio" logic, automatically queuing up a new random track from the current era when one finishes

If it sounds interesting, go ahead and give it a spin. 1889 is a good year ( but me personally, I'm into baroque heavily, didn't even realize it until debugging this thing :) )

Live Demo - https://notbigmuzzy.github.io/goghwiththeflow/
Source Code - https://github.com/notbigmuzzy/goghwiththeflow

Powered by the Metropolitan Museum of Art API.

Virtual 3D Museum - Three.js

notbigmuzzy — Tue, 13 Jan 2026 22:09:09 +0000

So, I was shitcanned recently and said to myself: "Hey, why not actually learn something new and interesting for once?"

Three.js has been high on my list for a long time. I tried to make a pinball game a couple of years back, failed miserably, and never quite forgot about it. This time, I wanted to see if I could turn Wikipedia entries into something more visual and "walkable"

The result is a Virtual 3D Museum. It’s a 3D environment where the "exhibits" are pulled dynamically from the Wikipedia API, and gallery rooms are populated with that info on the fly

The Tech:

Three.js: Handles the spatial layout and rendering.
Vanilla JS: No frameworks. I wanted to keep it lightweight and see how far I could get with just the basics (spoiler: it can go really far).
Wikipedia API: The source of all the data.

The Details:

Multi-language support: You can toggle between different language versions of Wikipedia.
Persistence: It uses basic local storage, so it remembers your session when you come back.
Environment: I went for a "faux 3D" look—enough to feel immersive without being heavy on the hardware. I know it doesn't look "well" yet; I don't know how to use Blender properly, and I'm still learning exactly how far you can push a browser before the stuttering ruins the experience.

It’s been a fun experiment in data visualization and spatial UI. If you’re into Three.js or just want to see a weird way to read about history or universe, check it out ;)

Source Code: GitHub - https://github.com/notbigmuzzy/linkwalk
Live Demo: Full version with languages and persistence - https://notbigmuzzy.github.io/linkwalk/