ASHA

@asha-c-r-123·4 public vizzes

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.

May 8, 2023

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.

May 8, 2023

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.

May 8, 2023

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.

May 8, 2023