Hello VizHub

100%

✓ Published0🌍 Public

Last edited Jun 24, 2019

Created on Jun 24, 2019

This visualization parses an XML mind map and displays its nodes as an interactive, force-directed graph. Purple circles represent unique nodes, while red-orange circles indicate cloned or shared references, with arrows illustrating parent-child relationships. The layout emerges from a physics simulation combining charge, link, and collision forces, all computed with `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and related force APIs. Users can click and drag nodes to explore the structure, and the scene supports zooming via a nested SVG group. The underlying data comes from `data.xml`, rendered as an SVG canvas.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

MMatt Morris

79% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a force-directed network graph of a university and its academic departments, visualized as a star topology with a central node connected to five satellite nodes. Built with D3 version 7, it uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate node movement. The SVG rendering shows nodes as red and blue circles, with labels and links updated on each simulation tick. Node and link positions are computed dynamically, producing an interactive and animated layout.

Hhelen azad

76% match

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

75% match

Loading thumbnail…

Vizz

This force-directed network diagram visualizes hierarchical relationships between demographic, academic, and enrollment data categories, with linked nodes representing attributes such as degree type, academic unit, and academic year. The D3 v6 simulation uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, forceCenter, and forceRadial to position nodes and links. SVG circles are color-coded by group and rendered as labels within the 960×500 container. Users can drag nodes to reposition them, which triggers hover effects that highlight nodes with a thicker stroke. Data is loaded from a JSON file containing nodes and links.

RRahel Gunaratne

75% match

Loading thumbnail…

VizHub Force Directed Forks Tree

This example shows the fork hierarchy of VizHub projects as an interactive force-directed tree, with nodes representing individual visualizations and links tracing their forking relationships. The visualization uses a d3.forceSimulation with a custom leftRight force to organize child forks horizontally, alongside link and charge forces. It renders to a Canvas 2D context, drawing nodes as small circles and links as lines. The code builds the hierarchy with d3.stratify from JSON metadata fetched from the VizHub API, and supports dragging nodes to adjust the simulation.

CCurran Kelleher

75% match

Loading thumbnail…

Force-Directed Layout from XML

This example visualizes a hierarchical XML document as a force-directed network, where each XML element becomes a draggable circle and parent-child relationships appear as links. The circle size reflects the numeric text content of each element, scaled using `d3.scaleSqrt`. The code uses `d3.forceSimulation` with link, charge, and centering forces, and loads the XML via `d3.xml`. It parses the document with native DOM queries, then renders the network as SVG with interactive dragging enabled through `d3.drag`.

Mmbostock

75% match

Loading thumbnail…

Fork of Fork of Hello VizHub

This example visualizes a simple network of nodes and links using a force-directed graph layout. The code creates a simulation with `d3.forceSimulation` and `d3.forceLink` to position the elements, rendering them as SVG circles and lines. It also includes a text message displayed in a `div` element, updated via D3’s data join. The visualization is built with D3 v5, pulling the library from a CDN, and uses local CSS for styling. The data is hardcoded in the script, showing a basic interactive force layout.

Vvaishnavi6gan@gmail.com

74% match

Loading thumbnail…

Untitled

This interactive network diagram uses a force-directed layout to show relationships between six nodes, with link thickness encoding connection strength. The visualization reads data from a JSON file containing nodes and links, then renders circles and lines as SVG elements. Built with React and D3 v4, it uses `d3.forceSimulation` for physics-based layout, `d3.forceLink` for link constraints, `d3.forceManyBody` for node repulsion, and `d3.forceCenter` for centering. Nodes are draggable via `d3.drag`, allowing users to manually reposition elements while the simulation continues.

HHeide

74% match