rca0214

@rca0214·3 public vizzes

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Aug 3, 2020

Loading thumbnail…

World Countries Tree(Dendogram)

This visualization displays a dendrogram of world countries, representing a hierarchical tree of bibliographic data from a JSON file. It shows the structure and relationships between publications, with each node labeled and sized by depth. The code uses D3 v5’s `tree` layout and `linkHorizontal` generator to create the SVG paths, with zoom functionality via `d3.zoom`. Node labels are positioned using the layout’s coordinates and styled with a Roboto font.

Aug 3, 2020

Loading thumbnail…

World Countries Tree(Dendogram)

This dendrogram visualizes the hierarchical structure of academic publications on culture and management, using a tree layout to show relationships between research papers and authors. The visualization reads from a JSON data file and renders the tree using SVG paths generated by `d3.tree` and `d3.linkHorizontal` APIs. Node labels display publication IDs with font sizes that vary by depth, while zooming functionality is implemented via the `d3.zoom` API, allowing interactive exploration of the hierarchical data. The visualization uses a viewport-sized SVG canvas with fixed margins to accommodate the tree’s horizontal expansion.

Aug 3, 2020