Nodes Proove

100%

✓ Published0🌍 Public

Last edited Jul 6, 2020

Created on Jul 6, 2020

This example uses a force-directed graph to visualize a hierarchical JSON dataset of software tool categories, such as Monitoring, APM, and Cloud services, as nodes connected by parent-child links. The visualization builds a node-link diagram with circles and lines in an SVG container, applying `d3.forceSimulation` with link, charge, and position forces to arrange the nodes dynamically. The code loads the data from `allTools.json` using D3’s `json` method and renders the result with `d3.hierarchy` and `d3.forceLink`.

AI-generated description

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Force-Directed Tree

The visualization shows a small, hierarchical set of d3 software components arranged as a force-directed tree. Nodes and links are rendered as SVG circles and lines using D3’s force layout, with a weak vertical push that separates parent nodes from their children to suggest a tree structure. The example uses `d3.layout.force` with charge and link distance parameters, and updates node positions on each tick with `force.on("tick", tick)`. Node colors come from a categorical scale, and the data is loaded from an external JSON file containing nodes and links.

Mmbostock

79% match

Loading thumbnail…

Network Graph

This network graph visualizes hierarchical relationships between main nodes, child nodes, and leaf nodes using a force-directed layout. The d3.forceSimulation API with forceManyBody, forceLink, and forceCenter forces positions nodes and links, while SVG circles and lines render the graph. Node size encodes hierarchy level, and colors distinguish four main site clusters. Users can drag circles to reposition nodes, with drag interaction restarting the simulation. The data.js file programmatically defines nodes and links, including parent-child connections and inter-site links.

Mmiloparra

78% match

Loading thumbnail…

Untitled

A force-directed graph displays a small hierarchy of D3 module names, with nodes connected by links to show parent-child relationships. The visualization uses d3.layout.force to simulate physical forces, while a custom tick function pushes source nodes upward and target nodes downward, creating a weak tree structure. Nodes are rendered as colored circles using d3.scale.category20, and the data comes from a local graph.json file containing seven nodes and six links.

JJacob Pingel Lauridsen

77% match

Loading thumbnail…

Organisation Network Graph

This example displays an organization network graph, visualizing the relationships between teams and tools. Larger hub nodes represent main departments, while smaller connected nodes show their related sub-teams or platforms, with colors grouping different functional areas. The graph uses D3’s force simulation (`d3.forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`) to position nodes and links dynamically. Nodes are rendered as SVG circles with labels, and links as lines, with drag interaction applied via `d3.drag` on the simulation.

FFrederick O'Brien

77% match

Loading thumbnail…

Force-Directed Graph: Collapsible, Hierarchical

This example displays a hierarchical dataset (flare.json) as a collapsible, force-directed graph. Nodes are rendered as SVG circles, and links as lines, with a color scheme distinguishing leaf nodes, parent packages, and clusters. Clicking a node toggles the visibility of its children, causing the layout to recompute. The visualization uses the `d3.layout.force` API, manually applying constraints in the force `on("tick")` handler to enforce vertical hierarchy and keep nodes within the visible area, while also supporting node dragging.

GGerHobbelt

77% match

Loading thumbnail…

D3 Force Directed Graph

This force-directed network visualization uses D3’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes in an SVG canvas. It displays a hierarchical dataset from `data.js`, where main nodes (e.g., Gemini, Leo) link to colored child and leaf nodes, with link distances defined per relationship (e.g., `MAIN_NODE_DISTANCE`). Nodes are draggable via D3’s `drag` interaction, and the simulation updates circle, text, and line positions on each tick. Colors come from a Paletton-generated palette in `colors.js`.

AAlbert

77% match

Loading thumbnail…

Fork of Organization Graph Diagram22

This example shows an organization graph as a force-directed network of nodes and links, with main nodes connected by thick links and child nodes surrounded by leaf nodes. The data is generated programmatically in `data.js` with hierarchical structures like `APP-021` and `Community Arts Stabilization Trust`. It uses `d3.forceSimulation` with `forceManyBody` and `forceLink` to compute layout, and renders SVG circles, lines, and text. Node colors come from a predefined palette in `colors.js`, and drag interaction is enabled via `d3.drag`.

JJacob Pingel Lauridsen

76% match