Skip to main content
SimilarExport ZIP
100%

Network Graph

✓ Published1🌍 Public
Mmiloparra
Last edited Jun 16, 2022
Created on Jun 9, 2022
Forked from HTML Starter

Three square node types—amber sites, red subsystems, and blue network systems—form a force-directed graph. D3’s `forceSimulation` with `forceManyBody` and `forceLink` positions nodes, using custom distance values for main, child, and leaf connections. Each node renders as an SVG `rect` with rounded corners, labeled by text, and supports dragging via `d3.drag`. Links appear as `line` elements with source-based colors.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Network Graph

A social network graph visualizes friend connections between people, with each person as a circular node and their relationships as lines with arrow markers. The graph uses a force-directed layout via `d3.forceSimulation`, with `d3.forceLink` controlling link distances and `d3.forceManyBody` for repulsion between nodes. Node colors are uniform light green, and text labels display names. Users can drag nodes to reposition them, and hovering changes the node stroke. The data comes from a JSON file containing nodes and links, rendered as SVG elements.

Lleftymadi
85% match
Loading thumbnail…

Network Graph

This example shows a simple network graph with five labeled nodes (A–E) and four links connecting them. D3’s `forceSimulation` with `forceLink` and `forceManyBody` positions the nodes, while the tick event updates line and circle positions. The SVG rendering uses D3 selections with `join` to bind data to `<line>` and `<g>` elements, with node labels placed via appended `<text>`. The simulation runs continuously, repositioning nodes within a 200x200 center area.

KKhanin Sisaengsuwanchai
84% match
Loading thumbnail…

Untitled

A force-directed network diagram displays eight named nodes connected by five links, rendered as green circles with red outlines and red connecting lines. Built with D3 v4, the visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes, while an SVG container hosts the rendered elements. The code enables interactive dragging through D3's drag behavior, allowing users to move nodes and observe the simulation's tick updates as positions recalculate in real time.

Mmarxwood
84% match
Loading thumbnail…

Network Graph

A network graph displays seven named nodes connected by weighted links, with node sizes and link thickness reflecting connection strength. The data, loaded from a JSON file, is rendered as an SVG using D3.js v4's force layout, which applies gravity, charge, and distance parameters to position nodes dynamically. Users can click and drag nodes to rearrange the network, while node labels and red-bordered yellow circles remain visible. The visualization uses `d3.layout.force` for simulation and `force.drag` for interactivity, with tick events updating link coordinates and node transforms.

JJerlineJJ
84% match
Loading thumbnail…

Network Graph

A force-directed network graph displays seven named nodes connected by weighted links, with thicker strokes representing higher link weights. Nodes appear as red circles with blue outlines and black text labels, positioned through a simulated physical layout that responds to drag interactions. The visualization loads node and link data from a JSON file and uses the D3.js v4 library, specifically `d3.layout.force` for the simulation and SVG elements for rendering.

RRaja Srinivas Nelluri
84% match
Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater
84% match
Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Ttkcj0912
84% match