txomin.sirera@gmail.com

@txomin55·2 public vizzes

Fork of D3 Tree with Multiple Parents

This example adapts the D3 tree layout to support nodes with multiple parents, displaying a network of concepts such as "Government of the United States" and "Stock market" that share children like "Supply and demand." The visualization renders as a set of horizontally oriented links and text labels, with an interactive zoom feature controlled through the `d3.zoom` API. The code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute and draw the graph, while `_uniq` from the Underscore library deduplicates nodes by ID, and a manual recalculation of x and y positions accounts for the merged structure. Data is loaded from a local `data.json` file, and all elements are animated and styled within an SVG canvas using the Playfair Display font.

Jun 23, 2024

Loading thumbnail…

Fork of D3 Tree with Multiple Parents Example

This example adapts the D3 tree layout to visualize hierarchical data with multiple parents, where nodes may be shared across different branches. It shows a network of interconnected categories like "Government" and "Supply and demand" organized into overlapping trees, with the last root branch highlighted in blue. The code uses d3.hierarchy and d3.tree to compute positions, then deduplicates nodes by ID using underscore.js and manually recalculates their x/y coordinates to accommodate shared descendants. Links are drawn with d3.linkHorizontal, and the SVG view supports pan-and-zoom via d3.zoom, with data loaded from a local JSON file.

Jun 23, 2024