Skip to main content
SimilarExport ZIP
100%

Fork of D3 Tree with Multiple Parents

✓ Published0🌍 Public
AAnton Kozlovskyi
Last edited Aug 1, 2023
Created on Aug 1, 2023

This example shows a multi-parent tree diagram where nodes can have multiple parents, using a simple dataset with overlapping children. The visualization highlights the selected node and its connections. The code uses D3 v5's `tree`, `hierarchy`, and `linkHorizontal` to create the layout, with a custom algorithm to handle duplicate node IDs by consolidating them and adjusting their positions. Links and nodes are rendered as SVG paths and text elements, with animated transitions and zooming, while underscore.js helps with unique node filtering and depth calculations.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This block-and-line diagram, titled "Fork of D3 Tree with Multiple Parents," visualizes a hierarchical dataset where nodes can have multiple parent connections, as seen in the `data.json` structure. It demonstrates a modified D3 tree layout that de-duplicates shared descendants and recalculates positions to flatten overlapping branches. The visualization uses D3 v7 APIs including `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal`, with underscore.js for node uniqueness. Rendered as static SVG text labels with link strokes, it includes zoom and pan interactions via `d3.zoom`, though transitions and selection highlighting are only partially implemented in the code.

Pprogrammerd3
92% match
Loading thumbnail…

Fork of D3 Tree with Multiple Parents

A tree diagram diverges from typical hierarchies by allowing shared child nodes to have multiple parents. The code uses `d3.tree` and `d3.hierarchy` to layout the graph, then deduplicates nodes by ID with underscore.js, and recalculates positions based on depth. Links are drawn with `d3.linkHorizontal`, while labels render as SVG text. The visualization also includes zooming via `d3.zoom` and smooth animated transitions for node updates, with data loaded from a JSON file containing two top-level topics that reference overlapping concepts.

Ttayyqi
92% match
Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This visualization shows a tree diagram with multiple parent nodes, where shared child nodes appear under multiple branches. The example uses a custom D3 v5 layout with `d3.tree()` and `d3.hierarchy()`, then post-processes nodes with underscore.js to deduplicate them by ID. It renders HTML tables inside `foreignObject` elements for each node, with collapsible sections triggered by clicks. Links are drawn using `d3.linkHorizontal()`, and the entire SVG supports pan and zoom via `d3.zoom()`. The data comes from a JSON file describing government and market hierarchies.

Bbjm97
91% match
Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example displays a tree diagram with multiple parent nodes, using custom data that maps topics like "Government" and "Stock market" to shared children. It builds the hierarchy with `d3.hierarchy`, applies a `d3.tree` layout, and renders links as horizontal paths via `linkHorizontal`. The code uses `_.uniq` from Underscore to deduplicate nodes, then manually recalculates x and y positions so shared children appear once. Interactive zooming via `d3.zoom` and animated transitions on node positions and opacity are included, with SVG text elements showing labels.

Pprogrammerd3
90% 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
89% 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
89% match
Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example shows a tree diagram where nodes can have multiple parents, allowing shared entities like "Supply and demand" and "Foreign worker" to branch from both "Government of the United States" and "Stock market." The code uses d3.tree and d3.hierarchy to lay out the hierarchical structure, with d3.linkHorizontal drawing curved links between nodes. The node positions are recalculated after duplicate nodes are removed using Underscore.js, while d3.zoom enables panning and zooming of the SVG rendering. Links and nodes transition smoothly to their updated positions, with the most recently selected parent branch highlighted in steelblue.

Wwonjiky
88% match
Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example visualizes a tree diagram where nodes can have multiple parents, shown through linked relationships between shared topics like Supply and demand and Foreign worker. The code uses D3 v5’s `tree` layout, `linkHorizontal` generator, and zoom behavior, alongside Underscore.js utilities to deduplicate nodes and reassign links after layout. Animated transitions reposition nodes using D3’s `transition` method. Data is loaded from a JSON file, rendered as SVG text labels with horizontal curved paths, and displayed on a canvas with a Playfair Display font.

AAnkitha B H
88% match