100%

Fork of D3 Hierarchies - eg2

✓ Published1🌍 Public

Last edited Mar 13, 2024

Created on Mar 13, 2024

This example shows a hierarchical tree visualization of movie data, grouped by distributor and genre, with the worldwide gross revenue aggregated for each group. The root hierarchy is built using `d3.rollup` and `d3.hierarchy`, then laid out with the `d3.tree` layout. Nodes are drawn as circles, connected by lines, with labels above and leaf counts below. The code uses D3 v7 APIs including `d3.sum`, `d3.select`, and `.join` to render the SVG elements.

AI-generated description

D3 Hierarchies

MIT Licensed

Similar vizzes

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

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

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

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

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

77% match

Loading thumbnail…

Fork of D3 Hierarchy Component 2

A static tree diagram visualizes a hierarchical task structure, with nodes labeled by category and sub-goals like “Programming” and “Health.” The layout is generated using D3’s `tree` and `hierarchy` functions, and links are drawn as horizontal curves via `linkHorizontal`. SVG text elements display node names, with font size scaling by depth. The view supports zooming through D3’s `zoom` behavior, and hover effects alter text styling. Data is loaded from a local JSON file.

WWRCIECH

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

77% match

Loading thumbnail…

Fork of Example

A collapsible D3 tree diagram visualizes the hierarchical relationships within a dataset on hip replacement rankings, organized by country, city, institution, and expert. The visualization uses a tidy tree layout calculated with `d3.tree()` and rendered with SVG paths. Data is loaded asynchronously from a CSV file via `d3.csv`, then processed into a nested tree structure. The hierarchy is built with `d3.hierarchy()`, and nodes use `d3.linkHorizontal()` for curved connecting links, with animations for collapsing and expanding branches.

AAkramjon1995

76% match