CodePen - D3 TreeMap

100%

CodePen - D3 TreeMap

✓ Published1🌍 Public

Last edited Jun 29, 2023

Created on Jun 29, 2023

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

AI-generated description

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

Similar vizzes

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

83% match

Loading thumbnail…

Treemaps

This treemap visualizes a hierarchy of movie genres and individual film titles, with color-coded circles representing different generations of the data. The dataset defines a root "MovieGroup" with subcategories like Action, Romantic, and Mythology, each containing specific movies. Built with d3.stratify and d3.tree, the visualization uses SVG elements, including animated paths for connections and circles that transition to a fixed radius. Text labels display the names of each genre and movie, rendered in bold white text over the circles.

SSwapna1915

76% match

Loading thumbnail…

Untitled

This example displays a treemap visualization of hierarchical data, with the current view showing video game sales grouped by platform, or movie and Kickstarter data sets selectable via links at the top. It uses the d3 v4 API, specifically `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal` with the `schemeCategory20` color palette, to render the nested rectangles. The SVG output includes tooltips on mouseover, which display the name, category, and value of each tile using data attributes.

Vvaynexie

74% match

Loading thumbnail…

Movie tree

This visualization shows a hierarchical tree of movie genres and film titles, with a central “Movies” root branching into Action, Horror, Thriller, and Drama, each leading to specific movies. The D3.js `stratify()` method converts flat parent-child data into a hierarchy, which is then laid out using `d3.tree()`. SVG circles represent nodes, connected by animated paths that draw straight lines, while text labels fade in with a staggered duration based on depth. The rendering emphasizes a simple, colorful circular-node aesthetic over explicit positional encoding.

Bbindusreeja

74% match

Loading thumbnail…

Tree layout

This example uses the D3 tree layout to display hierarchical data from a CSV file. The visualization shows a hierarchy of film records, grouped by genre and lead studio, as a node-link diagram with curved paths connecting parent and child nodes. The code uses `d3.tree`, `d3.hierarchy`, and `d3.nest` to structure the data, and renders the result as SVG with circles for nodes and labels for names at specific depths. The layout is sized to 900 by 600 units within an SVG canvas.

JJoe M

74% match

Loading thumbnail…

Zoomable test 2

This interactive visualization displays a zoomable circular treemap of celebrities, organized by industry category (Hollywood, Bollywood) and gender. The hierarchy is constructed from a CSV file using `d3.csv` and `d3.nest`, with circles sized according to the `sample` metric. Rendered as SVG with React, the pack layout uses `d3.pack` and `d3.hierarchy` to position the circles. Users click circles to zoom, which triggers a smooth animated transition using `transition.tween` with `d3.interpolateZoom`. Leaf nodes include celebrity profile images clipped within their circles, with offsets applied to center faces.

0007ebey

73% match

Loading thumbnail…

Tree Map Representation

This tree map shows a hierarchy of movie genres and example titles, with nodes represented as colored circles and connections drawn as straight lines. The visualization uses D3 v6’s `d3.stratify` to convert the flat parent-child dataset into a hierarchy and `d3.tree` to compute the layout, which aligns nodes at the same depth vertically. Circles are color-coded by generation level (root, genre, and title) and animate their radius and link paths on load via `.transition().duration()`. The SVG is rendered with a centered HTML heading and black strokes on the circles.

SSwapna1915

73% match

Loading thumbnail…

D3 Starter Updating scatter plot + Interaction

This interactive scatter plot displays movie budgets against revenue, with buttons to switch between revenue, budget, and popularity metrics, updating the top 100 films via a general update pattern. Built with D3 v5, it uses `d3.scaleLinear`, `transition`, and `d3.selectAll` to animate SVG circles and axes. Tooltips appear on mouseover, showing film details via `d3.event` and HTML manipulation. The dataset from 2000–2009 is filtered and sorted in JavaScript, with axes formatted using `d3.format`.

Mmaxthamt

73% match