Ankitha B H

@AnkithaBH·3 public vizzes

Fork of D3 Tree with Multiple Parents

This example visualizes a hierarchical company ownership structure where nodes can have multiple parents, showing relationships between companies, government, labor, and the stock market. The visualization uses a D3 tree layout with data from a JSON file, and employs Underscore.js to deduplicate nodes by ID and recalculate their positions. Nodes and links render as SVG text and paths, with interactions including zoom and pan via `d3.zoom`, while the code uses `d3.hierarchy`, `tree()`, and `linkHorizontal`. The rendering includes animations when nodes transition positions using D3 transitions.

Nov 15, 2023

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.

Nov 15, 2023

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.

Nov 15, 2023