Phasor2

100%

✓ Published1🌍 Public

Last edited Apr 18, 2021

Created on Apr 18, 2021

Forked from Fork of World Countries Tree

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Phasor2 without zoom

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.

PPiotr Paszek

81% match

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

79% match

Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR

69% match

Loading thumbnail…

Tree

This hierarchical tree visualization displays cartoon character relationships with color-coded labels, where node text size decreases with depth. Using D3 v5’s `tree()` layout and `linkHorizontal()` generator, it renders an SVG with curved links and zoomable panes via `zoom()`. The data comes from nested JSON, binding each node’s `id` and `color` from `d.data.data` to text elements. Font sizing scales by depth, while text shadows and the `event.transform` handler enhance readability and interaction.

Ssumitradevipolina

68% 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

67% match

Loading thumbnail…

Rectangle tree with links

This example displays a hierarchical dataset as an interactive rectangle tree, where each node is represented by a labeled box and connected by curved links. Clicking a node expands or collapses its children, with smooth 250ms transitions animating the layout and updating the view. Built with D3 v6, it uses `d3.tree` and `d3.linkHorizontal` for the graph structure, while SVG elements and a zoom behavior handle rendering and navigation. The data comes from the flare-2 JSON file, with node size and spacing defined by the layout.

PPiotr Paszek

67% 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

67% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

67% match