Fork of CodePen - D3 TreeMap

100%

Fork of CodePen - D3 TreeMap

✓ Published0🌍 Public

Last edited Jun 13, 2024

Created on Jun 13, 2024

A zoomable treemap visualizes the hierarchical distribution of top-grossing movies, grouped by genre, with each tile sized and colored by category. The visualization uses D3 v5’s `d3.hierarchy` and `d3.treemap` to compute the layout, while click interactions and a zoom-out button invoke transitions that re-scale the x and y domains for drill-down navigation. Movie data is loaded from a local JSON file, and tooltips display details on hover.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

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`.

VVickoh

90% match

Loading thumbnail…

fCC Treemap

This visualization displays a treemap of the top 100 highest-grossing movies, grouped by genre. Each rectangle’s size represents a movie’s box office value, and color encodes its category, with an interactive tooltip revealing the movie name and value on hover. Built with React and D3.js, it uses `d3.hierarchy` and `d3.treemap` for layout, and dynamically renders SVG rectangles and text labels. The color legend, defined in static SVG, maps seven genres to distinct fills, while data loads from a freeCodeCamp-hosted JSON dataset. The chart fills the entire browser window, with a tooltip that tracks the cursor.

Ppkdvalis

79% match

Loading thumbnail…

Fork of Untitled

A zoomable treemap visualizes hierarchical data, with rectangles sized by a user-selected measure and color-coded by an optional metric. The chart supports interactive drilling down through levels, showing breadcrumb navigation and tooltips on hover. Built with D3 v4, the visualization uses `d3.treemap` for layout, `d3.hierarchy` and `d3.nest` for data structuring, and SVG with animated transitions for smooth zooming between levels. Hover effects highlight parent-child relationships, and the code includes customizable parameters for multiple measures and tooltip fields.

Llimenzi

79% match

Loading thumbnail…

Fork of HTML Starter

This example presents a hierarchical tree visualization of movies organized by year, genre, and title. It uses D3.js version 3 to render SVG shapes—circles for years, rectangles for genres, and ellipses for individual movies—with distinct color coding per category. The tree layout is built from a static JavaScript data structure that lists movies under release years and genres. A legend in the top-right corner explains the shape-color mappings, while CSS styling controls the visual appearance, including node cursors and link colors. The visualization demonstrates a simple, static branching structure without interactive behavior.

Ppavan vasamsetti

76% match

Loading thumbnail…

Zoomable treemap template

This zoomable treemap template visualizes hierarchical data, allowing users to click on nested groups to zoom into deeper levels or click the orange top band to zoom out. Built with D3 v3, it uses `d3.layout.treemap`, custom layout functions, and SVG transitions to animate the zooming. The example includes sample data representing world population figures organized by region and subregion, sourced from countries.git. The code is written in ES2015 and follows an Airbnb-style format, with the main logic abstracted into `drawTreemap.js`.

PPacsangon

76% match

Loading thumbnail…

Fork of TreeMap Layout

This example displays a treemap visualization of hierarchical data using D3 v5’s `d3.hierarchy` and `d3.treemap` layouts. The SVG renders nested rectangles sized proportionally to node values, with labels for named leaves and empty labels for internal branches. The code manually constructs the dataset in `index.js`, sums values via `root.sum`, and applies layout properties like `paddingOuter`. Rectangles and text are appended into grouped `<g>` elements, with styling from `styles.css` using royal blue fills and white strokes.

ZZoha9

75% match

Loading thumbnail…

Fork of Fork of D3.js collapsible tree with boxes

This example shows a hierarchical tree of movies organized by release year and country of origin, with each movie as a leaf node. The visualization uses colored shapes—circles for years, rectangles for countries, and ellipses for movies—to represent different levels of the hierarchy. The D3.js v3 library builds the collapsible tree layout, using SVG elements for rendering. The code defines `treeData` as a static JavaScript array, and the legend explains the shape-color mappings for the categorical data.

BBelede Rahul

75% match

Loading thumbnail…

Fork of Treemap Demo

This interactive treemap displays a hierarchical company dataset with a CEO, three group leaders, and their employees. The visualization supports CRUD operations through buttons that update node values, add or remove employee nodes, and add or remove parent groups. Built with React and D3 v5, it uses `d3.hierarchy` and `d3.treemap` to compute layout, with SVG rectangles and text labels rendered, while `d3.transition` animates position and size changes over three seconds. Color and opacity scales encode group membership and node values.

Ddasari234

75% match