D3 Tree with Multiple Parents Example

100%

D3 Tree with Multiple Parents Example

✓ Published0🌍 Public

Last edited Dec 17, 2023

Created on Dec 17, 2023

Forked from D3 Tree with Multiple Parents

This example visualizes a hierarchical tree with multiple parents, where nodes like “Developer” and “Laborer” appear under several root categories such as “Stock market” and “Grape-market.” The data comes from a local JSON file, and the layout uses d3.tree combined with Underscore.js utilities to deduplicate nodes and reassign links by ID. SVG rendering includes horizontal links via d3.linkHorizontal, with zoom interaction and animated transitions for node positioning. A selected root category highlights its children with steelblue strokes and full opacity.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Tree with Multiple Parents

This example visualizes a D3 tree layout with multiple parents, allowing nodes to be shared between different branches of a hierarchical structure. The graph displays data from a JSON file, with nodes representing concepts like "Government of the United States" and "Stock market" linking to common children such as "Supply and demand" and "Foreign worker." The code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the layout, while underscore.js handles deduplication of nodes by ID and recalculation of their positions. SVG paths and text elements render the links and labels, with zoom and transition animations applied throughout.

SSai Karthik Ginni

89% match

Loading thumbnail…

D3 Tree with Multiple parents

This example shows a tree diagram where nodes can have multiple parents, linking shared concepts like "Supply and demand" across different top-level categories. The visualization uses D3 v5 and Underscore.js to deduplicate hierarchical data by node ID, then manually recalculates node positions before rendering horizontal links and labels as SVG elements. Clicking a node collapses or expands its children with animated transitions, while zoom and pan are enabled through D3’s zoom behavior. The data comes from a static JSON file, and the code applies a Playfair Display font to the text labels.

AASHA

89% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This visualization presents a multi-parent tree structure using D3 v5 and underscores.js, showing how a node like "Laborer" can inherit from multiple roots including "Government," "Stock market," and "test-market." The code builds a hierarchical layout from JSON data, then uses `_.uniq` to deduplicate shared nodes and remaps links to maintain all parent-child relationships. Rendered as SVG with horizontal link paths (`d3.linkHorizontal`), the tree includes zoom/pan interaction via `d3.zoom` and click-to-collapse behavior with animated transitions. Nodes are positioned manually based on depth, and the final root's descendant subtree is highlighted in steel blue.

AASHA

87% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example shows a tree diagram with multiple root nodes, where nodes can share parents and duplicates are removed to create a branching structure. It renders company and market data as text labels connected by horizontal links, with the most recently selected root highlighted in steelblue. The visualization uses D3 v5’s `tree` layout, `linkHorizontal` path generator, and `zoom` behavior, while manually recalculating node positions after filtering duplicates with Underscore.js. Animated transitions update node and link positions smoothly, and the data is loaded from a JSON file.

AAnkitha B H

86% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example visualizes a tree diagram with multiple parent nodes, showing how shared child concepts like "Supply and demand" and "Laborer" branch from both "Stock market" and "Government of the United States." The layout removes duplicate nodes by ID and recalculates positions based on depth, with links filtered to exclude the synthetic root. Built with D3 v5, the code uses `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and a `zoom` event to handle interactive panning and scaling. SVG text elements display labels with a Playfair Display font, and the animation uses `transition` to smoothly update node positions. Data comes from a local JSON file.

PPrabhat

86% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This visualization shows a hierarchical tree structure in which multiple parent nodes can share the same child, as demonstrated by two top-level categories both linking to common descendants like “Supply and demand” and “Laborer.” It uses D3 v5’s `stratify` and `tree` layouts to convert flat JSON data into a dendrogram, rendering nodes as text labels and edges as horizontally curved `linkHorizontal` paths. The SVG canvas supports zooming via D3’s `zoom` behavior, and text styling relies on the Playfair Display font with a white shadow for readability.

85% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example visualizes a hierarchical dataset of food categories and items, where nodes can have multiple parents, creating a non-tree structure. It displays the data as a left-to-right node-link diagram, with each item's label rendered as text and connections drawn as curved paths. The code uses D3.js v5 and the `tree`, `hierarchy`, and `linkHorizontal` APIs to lay out the graph, while a custom algorithm deduplicates repeated child nodes by ID and repositions them. The visualization is rendered as an SVG and includes pan and zoom interaction via D3's `zoom` event. The data is loaded from a JSON file and uses a transition animation to update node positions.

RRobert Wolf

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

85% match