Fork of Phasor2 without zoom

100%

Fork of Phasor2 without zoom

✓ Published1🌍 Public

Last edited Apr 18, 2021

Created on Apr 18, 2021

Forked from Phasor2

This example displays a static dendrogram visualization of a hierarchical JSON dataset, with nodes labeled by identifiers such as “MV,” “G1,” and “G101.” The tree layout, generated using `d3.tree` and `d3.hierarchy`, places parent-child relationships along vertical link paths drawn with `d3.linkVertical`. The code loads data via `d3.json` and renders text labels directly onto an SVG canvas. While the original version includes zoom functionality, this fork deliberately omits the `d3.zoom` interaction, leaving the diagram fixed at a predetermined width and height with margins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Phasor2 v3 with boxex

This visualization shows a hierarchical tree with nodes displayed as red-bordered white boxes connected by green curved links, using sample data with a root node "MV" and children like "G1," "G2," and "G3." The code employs d3.v5's `tree` layout and `hierarchy` to position nodes, while `linkVertical` generates the paths between parent and child nodes. Each node renders as a `rect` and `text` element in SVG, with the viewport fixed to 900 by 300 pixels. Though zoom functionality is defined via `d3.zoom`, it remains commented out in the current example.

PPiotr Paszek

86% match

Loading thumbnail…

Phasor2

Phasor2 renders a hierarchical dataset as a vertical tree, with nodes labeled by IDs from a nested JSON structure and connected by curved paths. The visualization applies D3’s `tree` layout and `linkVertical` generator to position elements, while a zoom behavior enables interactive panning and scaling of the SVG. Node labels are styled with a serif font and white text shadows for readability.

PPiotr Paszek

81% match

Loading thumbnail…

Fork of interactive family graph

This fork of an interactive family graph visualizes hierarchical data as a collapsible tree with color-coded nodes representing different data types. The D3 v3 layout renders SVG rectangles connected by curved links, with tooltips and directional arrows showing relationships. The example loads its tree structure from a JSON file and supports zooming and dragging via `d3.behavior.zoom`, while node expansion and collapse animate through D3 transitions.

VVenkata Sai Preetham

78% match

Loading thumbnail…

Fork of ANY JSON tree (DRAFT)

This example shows any JSON object as a selectable, zoomable tree diagram using D3’s hierarchical layout. A custom `hierarchify` function converts arbitrary JSON data into the nested `{ name, children }` structure expected by `d3.hierarchy`, with node labels indicating each value’s type and content. The tree is rendered as SVG, with curved links via `d3.linkHorizontal` and pan/zoom through `d3.zoom`. It visualizes a sample dataset containing error and response fields, including nested arrays and objects. The interface supports interactive exploration of the JSON structure.

AArefa Patwary

77% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays hierarchical data from a flare.json dataset, with arcs sized by numeric values and colored by top-level category. Clicking a node zooms to focus on that subtree, using smooth 750-millisecond transitions. The code builds the hierarchy with `d3.hierarchy` and `d3.partition`, renders arcs via `d3.arc`, and animates using `transition.attrTween` with interpolated angular coordinates. Labels rotate radially, and a central circle resets the view when clicked.

LLiml

77% match

Loading thumbnail…

Fork of Tree test

This fork of a tree test displays hierarchical product data as a dendrogram with curved links and circular nodes. The visualization maps category labels like "CAFES MELANGE MOULUS" and their child levels, using node size and spacing to convey structural relationships. Built with D3 v5, it applies `d3.cluster`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the layout from a JSON data source. The SVG rendering includes zoom functionality via `d3.zoom`, though node labels remain commented out, leaving only the tree topology visible.

OOussama Hajji

77% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

77% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of the D3 v5 Zoomable Sunburst visualizes hierarchical data as an interactive radial partition layout. Clicking a node zooms the view to focus on that node’s subtree, with smooth animated transitions between levels. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates arc paths and labels. Data is loaded from the Observable `@observablehq/flare` dataset, rendered as SVG paths with color-coded top-level branches and interactive click handlers.

CChase Hall

77% match