Fork of Fork of D3 Hierarchy Component 3

100%

Fork of Fork of D3 Hierarchy Component 3

✓ Published1🌍 Public

Last edited May 27, 2023

Created on Jan 16, 2023

Forked from Fork of D3 Hierarchy Component 2

This example shows a hierarchical task tree rendered as an SVG, with nodes displayed as rectangles containing text labels and connected by horizontal links. The visualization uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables panning and scaling of the entire graph. Data is loaded from a JSON file, and both nodes and links respond to hover events by changing their fill or stroke color.

AI-generated description

Hierarchy Component.

TODO:

Adjustable shape of links
Add possibility to add nodes
Show additional information when node hovered
Show weight of the link (if present)
Allow to collapse subhierarchy
Set proper size of rectangle over text
Add radial style

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

D3 Hierarchy Component 1

This example displays a hierarchical tree of tasks, branching from a root "Tasks" node into categories like "Main Goal," "Health," and "Awards," with sub-goals such as "Programming," "Cardio," and "Pizza." The visualization uses a D3.js horizontal tree layout, rendered as an SVG, with nodes positioned via a tree algorithm and connected by green path links. The code loads data from a JSON file, employs a custom `hierarchy` component, and uses `linkHorizontal` for path generation, with zoom functionality enabled through D3's zoom module. Text labels are styled with the Poppins font, with compound and leaf nodes distinguished by font size and text anchor.

WWRCIECH

87% match

Loading thumbnail…

D3 Hierarchy Component 4

A hierarchical tree diagram displays task categories and subgoals, such as Programming under Main Goal and Cardio under Health, using SVG rectangles and text labels connected by curved horizontal links. The D3 v3 component builds the layout with `d3.hierarchy` and `d3.tree`, applies `linkHorizontal` for edge paths, and supports zooming via `d3.zoom`. Node positions derive from the tree layout’s separation function, while styling applies green translucent links and hover effects. Data loads from a local `data.json` file.

WWRCIECH

85% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

84% match

Loading thumbnail…

Fork of Fork of Fork of D3 Tree with Multiple Parents

This interactive visualization displays a hierarchical tree with multiple parent links, allowing nodes to connect across branches. Clicking a node collapses or expands its children with smooth transitions. Using D3 v5’s tree layout, linkHorizontal paths, and zoom behavior, the code renders SVG text labels and links, with node positions recalculated from a JSON dataset via Underscore utility functions.

AASHA

83% match

Loading thumbnail…

Fork of a model

This visualization presents a hierarchical dataset as an indented tree layout rendered with SVG. The root node, labeled "bruh," branches into a deep structure of numeric values, and each node displays its name as text with a font size that decreases with depth. The code uses d3.hierarchy and d3.tree to compute the layout, while linkHorizontal generates the curved paths connecting parent and child nodes. Pan and zoom interactions are enabled through d3.zoom, applying transforms to a group element. The styling uses a green stroke for links, a serif font, and text shadows for readability. Data is loaded from the JSON file data.json.

JJavaDummy4

82% match

Loading thumbnail…

Fork of Fork of D3 Tree with Multiple Parents

This example visualizes a hierarchical tree with multiple parents, showing how nodes like "Laborer" and "Foreign worker" connect to several top-level categories. It flattens the hierarchy by deduplicating repeated nodes and manually recalculating their x- and y-positions using `_.uniq`, `_.where`, and depth-based spacing. The SVG renders horizontal links with `d3.linkHorizontal`, supports zooming via `d3.zoom`, and animates node transitions on click. Data comes from a local JSON file, and traversal uses `d3.hierarchy` and `d3.tree`. The latest top-level child is highlighted with a steel-blue stroke.

AASHA

82% match

Loading thumbnail…

Fork of Tree

A fork of a three-layer D3 v7 tree visualization renders a hierarchical dataset of continents, countries, and cities using SVG. The code builds a vertical tree layout with `d3.hierarchy` and `d3.tree()`, then draws curved links with `d3.linkVertical()`. Node shapes encode depth: rounded rectangles for the root and countries, diamonds for continents, and circles for leaf cities, with a legend explaining each.

Mmaddulanagasanjana@gmail.com

82% match