Fork of Network Graph

100%

Fork of Network Graph

✓ Published0🌍 Public

Last edited Sep 2, 2024

Created on Sep 2, 2024

This example visualizes a network graph of 49 nodes with a star-like topology, where a central "Geoff" node connects to four main clusters (School, Company, Family, Network) and each cluster branches to individual nodes. The graph is rendered on a Canvas element using D3 v5's force simulation (`d3.forceSimulation`) with charge, link, center, and collision forces. Nodes are colored and sized based on their cluster membership, and dragging is enabled via `d3.drag`. The data originates from a local CSV file.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Network Graph

A network graph displays 49 nodes organized around five central hubs, with connecting links forming a clustered hierarchy. The visualization uses D3 v5’s `d3.forceSimulation` with charge, link, and collision forces to position nodes, which are rendered dynamically on a Canvas via `getContext('2d')`. Node colors and radii are assigned programmatically, and drag interaction is enabled through D3’s drag behavior. Data comes from a local CSV file, and the underlying simulation and rendering are orchestrated by a custom `relation` class.

PPulkit Rohilla

83% match

Loading thumbnail…

Fork of Network Graph

A fork of the D3 network graph example visualizes a social network of ten people, with circular nodes representing individuals and directed links showing friendship relationships. The graph uses a force-directed layout via `d3.forceSimulation` with forces for link distance, charge repulsion, collision detection, and centering. Nodes are draggable, and hovering highlights them. Data is loaded from a JSON file containing nodes and links with relationship metadata. The visualization is rendered as an SVG with green circles, red labels, and blue arrows, using D3 v6.

BBhavanaGIrni

82% match

Loading thumbnail…

Fork of Network Graph

This fork of a network graph visualizes a hierarchical node-link structure on a dark canvas. It uses the `d3` library's deterministic simulation toolkit, specifically `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide`, to position nodes. The example reads node data from a CSV file and employs Canvas rendering for the visualization. Nodes are color-coded and sized according to their position in the hierarchy, with the root and key nodes highlighted in distinct colors.

EELBOUNIAmine

82% match

Loading thumbnail…

Fork of Network Graph

This example shows a small network of six named nodes connected by weighted links, displayed as an SVG force-directed graph. The visualization uses D3 v4 with the legacy `d3.layout.force` API to simulate physical forces that position nodes and draw straight lines between them. Node labels and circles are rendered via SVG groups, with link stroke widths scaled by the square root of the link weight, and the data is loaded from a local `data.json` file.

Bbhargavarathod

82% match

Loading thumbnail…

Fork of Fork of Network Graph

This visualization shows a network graph of employee relationships, with circles representing individuals and lines connecting each person to their parent node. The graph uses a force-directed layout driven by `d3.forceSimulation`, applying link distance, charge, and centering forces to position nodes. Data loads from a CSV file hosted on a Gist, and the code builds nodes and links from the Name and Parent columns. Rendered as SVG, the graph updates node positions and link coordinates on each simulation tick, with styling applied to links, circles, and text labels.

Ssdarsi2404@gmail.com

81% match

Loading thumbnail…

Fork of Network graph of Social Connections

This example visualizes a small social network as an interactive force-directed graph, displaying seven named individuals and the connections between them. Nodes are rendered as cyan circles with maroon outlines, while green links represent relationships, with thicker lines indicating stronger ties based on a weight value from the JSON data. The graph uses the older `d3.layout.force` API from d3.v2, loading data from `graphFile.json` via `d3.json`. Users can click and drag nodes to reposition them, with the simulation updating positions on each tick. The visualization is built with SVG within a React framework.

MManideepChakilam

80% match

Loading thumbnail…

Fork of Network Graph

Four labeled nodes form a small network of three connected links, rendered in SVG and fully interactive through mouse dragging. The graph uses `d3.forceSimulation` with link, charge, and center forces to position nodes, while a `d3.drag` handler lets users move nodes and update their fixed positions. Elements are drawn with D3 selections, appending `line` and `g` elements whose coordinates are updated on each simulation tick. The code relies on D3 v7's `forceLink` and `forceManyBody` APIs, with text labels placed relative to each node.

KKhanin Sisaengsuwanchai

80% match

Loading thumbnail…

Fork of Network Graph

This fork of the original network graph visualizes a university hierarchy, showing colleges, departments, and sub-disciplines as a tree-like structure. Nodes are circles labeled with entity names, and directed yellow links with arrowheads connect parent to child. The layout is determined by the D3 force simulation (`d3.forceSimulation`) with link, many-body, collision, and centering forces, rendered as an SVG. Users can drag nodes to reposition them, and the graph dynamically updates positions on each simulation tick.

TTarun Kumar Bosupally

80% match