Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ppo-drik
Last edited Aug 15, 2019
Created on Aug 15, 2019
Forked from Hello VizHub

This example demonstrates an interactive, zoomable tree diagram built with D3.js, presenting hierarchical data from a JSON file. Users can pan and zoom the tree, as well as drag and drop nodes to rearrange them, with animations using `d3.layout.tree` and `d3.svg.diagonal`. The code includes custom panning logic and a zoom listener with scale constraints, rendering the visualization as SVG elements with linked paths and draggable node circles.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example renders a hierarchical tree diagram as an interactive SVG animation. It displays nodes and links with color-coded types, tooltips on hover, and zoom-and-drag navigation via `d3.behavior.zoom`. Built with React and D3’s `d3.layout.tree`, the visualization reads JSON data and styles elements using custom CSS. The code uses SVG groups for nodes, links, and tooltips, with smooth transitions for updates.

MMalempatiSaranya
89% match
Loading thumbnail…

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.

Rrca0214
85% match
Loading thumbnail…

dndTree

This example shows an interactive zoomable and pannable tree diagram that visualizes the hierarchical structure of the flare JSON dataset. The visualization supports drag-and-drop repositioning of nodes, with ghost circle indicators and animated path updates during the operation. Built with D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` to render SVG nodes and links. The diagram automatically sorts nodes alphabetically and includes panning near the viewport edges while dragging.

Rrainyrainyguo
85% match
Loading thumbnail…

Untitled

This example shows a collapsible tree diagram of a small hierarchical dataset with four labeled nodes. Users can click nodes to expand or collapse their children, triggering smooth animated transitions of the SVG links and circles. The code uses `d3.hierarchy`, `d3.tree`, and `d3.selectAll` with transition methods to update node positions and draw curved diagonal paths. Node and link styling is applied via CSS classes, with collapsed nodes rendered in lightsteelblue.

Aarydob
82% match
Loading thumbnail…

Untitled

This interactive visualization displays a hierarchical tree as a circular packing layout, where nodes are sized proportionally to their values. The code uses the D3.js library (v6.7.0) with its `pack` and `hierarchy` APIs to compute node positions, and transitions to animate changes. Clicking a parent node collapses or expands its children, triggering a re-layout. The SVG renders nodes as circles with labels, and blue directed links with arrowheads connect specific nodes across the hierarchy, based on a `links` array in the data.

Mmiloparra
82% match
Loading thumbnail…

Untitled

An interactive drag-and-drop tree diagram visualizes the hierarchical structure of the Flare JSON dataset. The visualization uses D3.js v3 to render nodes and links as SVG elements, and incorporates an animation system with a zoom listener and pan controls. The tree layout is computed using `d3.layout.tree` and `d3.svg.diagonal` projections, while node dragging and sorting are handled through custom JavaScript functions. The interface allows users to explore the dataset by repositioning nodes within the tree.

Ssrinivasjavvadi
82% match
Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi
82% match
Loading thumbnail…

Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

GGuillamon
81% match