Vickoh

@Vickoh·2 public vizzes

CodePen - D3 TreeMap

This interactive treemap visualizes box office revenue for top-grossing movies, hierarchically grouped by genre. Users can click any tile to zoom into that category, revealing individual film titles, their genre, and revenue values via a tooltip on hover. Built with D3 v5, it uses `d3.hierarchy` and `d3.treemap` to compute the layout, with `d3.scaleOrdinal` assigning colors and `d3.schemeCategory10` for the palette. The code fetches movie data from a local JSON file and animates transitions between zoom levels with `d3.transition` and `d3.easeCubicOut`.

Jun 29, 2023

Loading thumbnail…

Zoomable Treemap

A zoomable treemap displays a hierarchical dataset as nested rectangles, with area encoding each node’s value. Users click a cell to zoom in and explore its children, or click the top to zoom back out. Built with d3.treemap, a custom tiling function, and d3.scaleLinear for positioning. Zoom transitions animate both SVG groups and their coordinates. Data comes from the flare-2.json file, rendered as animated SVG with click-driven navigation.

Jun 29, 2023