fresh block

100%

✓ Published0🌍 Public

Last edited Mar 11, 2016

Created on Mar 11, 2016

This example demonstrates an interactive force-directed graph of a hierarchical dataset, where nodes represent data points and links show parent-child relationships. The visualization uses D3.js version 3.5.5 with a force layout to position nodes, while a semantic zoom behavior (via `d3.behavior.zoom`) allows panning and scaling the entire graph. Nodes are colored by group or hierarchy level, with the root node highlighted in white, and can be dragged individually using `d3.behavior.drag`. The code applies linear scales for coordinate transformation during zoom and dynamically updates node positions and link lines on each tick event, with the data sourced from a Gist and rendered as an SVG.

AI-generated description

semantic zoom taken from http://jsfiddle.net/cSn6w/10/

Similar vizzes

Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto

83% match

Loading thumbnail…

fresh block

A tree diagram displays hierarchical data with rounded rectangular nodes and connecting curved links, all rendered in a clean white-and-steelblue palette. The visualization uses D3 v4 to generate the layout, with each node labeled by text and positioned via an external vertical_tree.js script. The code loads D3 from a CDN and applies CSS styling to define node fills, strokes, and link thickness. The example demonstrates a static, non-interactive tree structure, relying on D3's core selection and data-join methods rather than force simulation or animation.

JJoseEduinCulmaCaviedes

81% match

Loading thumbnail…

fresh block

This example shows a small node-link network diagram rendered as SVG. A force-directed layout positions the nodes, while linked lines use a stroke width proportional to link weight. Node labels appear as text, and dragging is enabled through the force drag interaction. The code uses the d3.layout.force API, loads graph structure from a local graphFile.json, and updates node and link positions on each physics tick.

CChaf1A

79% match

Loading thumbnail…

fresh block

This example uses D3.js (v5) to visualize a network of chemical compounds, targets, and annotations as linked circles. It shows how nodes are arranged in three concentric rings based on their group—compounds on the outer ring, targets on the middle, and annotations at the center—using `d3.forceSimulation` with a custom `forceRadial` constraint. Links between nodes are rendered as black lines, with stroke width and class names indicating link type. The code loads `nodes.csv` and `links.csv`, then applies forces for collision, link distance, and radial positioning. The resulting static SVG chart is built entirely through D3’s data-join and tick event updates.

GGerardoFurtado

79% match

Loading thumbnail…

fresh block

This interactive circle-packing visualization displays a hierarchical dataset from flare.json, using nested bubbles to represent categories and their relative sizes. The view begins with a zoomed-out root node and supports click-to-zoom transitions between hierarchy levels, with labels fading in for parent nodes. Built with D3 v4, it uses the `d3.pack` layout, `d3.hierarchy` for tree traversal, and `d3.interpolateZoom` for smooth zoom animations. Circle fills follow a linear color scale applied by depth, while SVG rendering and CSS hover effects highlight nodes. The root background shifts to a warm hue, and clicking anywhere resets the view.

AAkriti97

78% match

Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics

78% match

Loading thumbnail…

fresh block

An interactive red-on-white dendrogram visualizes a hierarchical JSON dataset from `turbo.json`. Clicking a node collapses or expands its children. The tree uses `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Animated transitions via `d3.select(...).transition()` reposition nodes and links when branches open or close. Leaf nodes with URLs render as clickable text anchors.

HHamishWoodrow

78% match

Loading thumbnail…

Untitled

This example shows an interactive force-directed graph of hierarchical data from a JSON file, where nodes represent categories and files, and links show parent-child relationships. Users can collapse or expand nodes by clicking, which restarts the layout simulation. The visualization uses the `d3.layout.force` API to compute node positions and link distances, with node size mapped from the data’s `size` attribute. Rendering is done via SVG, with circle styling and text labels per node, and the color function distinguishes collapsed, expanded, and leaf nodes.

Ssgzzhinde

77% match