Treemaps

100%

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 17, 2023

Created on Jul 17, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% 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

88% match

Loading thumbnail…

D3 Hierarchies

This example uses the D3 library to render a hierarchical tree from a small dataset of movies, grouped by distributor and genre. It shows the distribution of films across these categories, with nodes connected by lines and labeled with category names. The visualization is built using `d3.rollup` to create a nested data structure, `d3.hierarchy` to process it, and `d3.tree` to compute the layout. Circles represent nodes, and leaf nodes display the count of movies.

SSubhendu Karmakar

79% match

Loading thumbnail…

Films Example Data

This example visualizes a dataset of films using a hierarchical tree layout. It nests films by year and genre, then renders the hierarchy as a node-link diagram in SVG, with circles for nodes and curved paths for links. The code uses d3.nest to group data, d3.hierarchy and d3.tree to compute the layout, and custom link path generation for the curves. The data comes from a CSV file with film titles, genres, years, and other attributes.

JJoe M

77% 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

76% match

Loading thumbnail…

Fork of D3 Hierarchies

This tree visualization displays the hierarchical relationship between movie distributors and genres, using a dataset of ten films. It shows how genres are grouped under their respective distributors, with leaf nodes labeled by film count. The code uses `d3.rollup` to aggregate data, `d3.hierarchy` and `d3.tree` to compute the layout, and joins SVG elements to render nodes, edges, and labels. The root node is the aggregate of all distributors, with genres as intermediate nodes and film counts as leaf labels.

Yyashasvi.singh0601@gmail.com

76% 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

76% match

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

76% match