Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published1🌍 Public
MMatt Morris
Last edited Feb 7, 2019
Created on Feb 6, 2019
Forked from Hello VizHub

This example shows an interactive dendrogram layout of a hierarchical data structure, rendered as SVG circles connected by curved paths. Users can click nodes to inspect them, press Shift-click to add random "florps" children, or Cmd-click to delete entire subtrees, triggering re-renders that change link and node colors. The code relies on d3.hierarchy, d3.cluster, d3.zoom, and the d3 v5 event handling, with data defined as a plain JavaScript object and layout computed at 500x900 pixels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

An interactive collapsible tree visualization displays the Flare dataset hierarchy, with nodes and links rendered as SVG elements. The graph supports dynamic restructuring through user interactions: shift-clicking appends new child nodes, while alt-clicking triggers name editing. The layout recalculates node positions with smooth transitions using D3 v5's hierarchy layout and transition APIs, including `root.descendants()`, `root.links()`, and `linkHorizontal()`. Node colors shift based on collapsed states, and the `update` function handles enter, update, and exit selections for both nodes and paths.

MMatt Morris
84% match
Loading thumbnail…

Untitled

A hierarchical cluster dendrogram renders an SVG tree from JSON data using D3 v3's `d3.layout.cluster` and `d3.svg.diagonal` for curved link paths. Nodes appear as circles with labels, positioned via the cluster layout’s size settings and a translate transform. The code loads D3 from UNPKG, fetches `dendrogram01.json` asynchronously via `d3.json`, and appends the visualization to the page. A separate ES6 module shows an unrelated "Hello VizHub!" message, demonstrating local module imports alongside the D3 API.

MMartin Masevski
81% match
Loading thumbnail…

Layout Test

This example demonstrates a hierarchical tree layout rendered as an SVG visualization, with data representing a page structure of components and partials. The tree uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal draws curved paths between parent and child nodes. The visualization supports pan and zoom through d3.zoom, with the zoom transform applied to a group element containing the rendered tree. A data store module supplies the hierarchical data, and the code includes a typo where circles are appended using the incorrect tag name instead of “circle.”

MMatt Morris
81% match
Loading thumbnail…

Hello VizHub

This example demonstrates interactive circles on an SVG canvas, where users can drag each circle to reposition it or click to trigger a temporary scale-and-color animation. The visualization highlights D3 v5’s drag behavior and transition system, using chained transitions to enlarge circles to black and then restore their original size and color. It generates 20 randomly positioned circles with a fixed radius, colored via the `d3.schemeCategory10` palette. The code relies on `d3.create`, `d3.range`, `d3.drag`, and `selectAll().join()` to manage dynamic elements and event handling.

Hhvindshoej
80% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
80% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
80% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
80% match
Loading thumbnail…

Hello VizHub

An interactive 3D scatter plot and grid is rendered with D3.js, using randomly generated data points and a coordinate grid. The visualization displays a 3D space where points are colored using `d3.scaleOrdinal` and the `d3.schemeCategory20`, with a y-axis scale and labels. Users can click and drag to rotate the 3D scene, with the rotation logic driven by `d3.drag()` events and `_3d()` API calls for grid, point, and line strip shapes. This example demonstrates the use of D3’s 3D extension and custom event handling for dynamic, animated rendering.

FFlorro
80% match