Skip to main content
100%

13.6 Network data

✓ Published0🌍 Public
Aandyreagan
Last edited Apr 30, 2020
Created on Apr 30, 2020

This network visualization shows the structure of a small graph with 25 nodes, using a force-directed layout to reveal the connections between them. The nodes are arranged spatially based on their relationships, with edges drawn as straight lines between connected vertices. The visualization is built from data stored in multiple formats: a GraphML file containing Zachary’s classic karate club network (with nodes labeled as "Mr. Hi" or "Officer" to represent two factions), plus adjacency and edge-list files describing a smaller network. The layout algorithm places highly connected nodes near each other, making clusters and hub nodes visually apparent. Node positions suggest communities, while edge density and path lengths communicate the structure of the social relationships encoded in the data.

AI-generated description

Similar vizzes

Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Iindushashi.g@gmail.com
79% match
Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Ddivyagunuguntla
79% match
Loading thumbnail…

Network Graph

A network graph shows social connections among ten individuals, with nodes representing people and lines indicating friend relationships. The graph uses a force-directed layout powered by d3.forceSimulation, with collision detection and charge forces to position the nodes. Nodes are rendered as circles with labels, and links include arrow markers. The visualization is built with D3 v6 and renders to SVG, reading data from a JSON file. Users can drag nodes to reposition them, and hovering over a node triggers a CSS class change for visual feedback.

MManideeprenikindi
78% match
Loading thumbnail…

Network_graph

This example visualizes a small social network as a force-directed graph, showing nine named individuals and their weighted connections. Nodes render as violet circles with red outlines and black name labels, while links appear as pink lines whose thickness reflects the connection weight. The graph uses the older `d3.layout.force` API with `gravity`, `distance`, and `charge` parameters, reading node and link data from a local `graph.json` file. Users can drag nodes interactively, and the layout updates continuously via the force tick event, with SVG elements styled directly in the page’s CSS.

Cchandanagandla
78% match
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
77% match
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
77% match
Loading thumbnail…

Gist 496aa2e3537e41062537

This visualization displays a force-directed network graph of 200 nodes and their weighted connections, rendered as an SVG. Node positions are computed using d3.layout.force with a short link distance of 10 and a link strength of 2, creating a tightly clustered layout. Each node is represented by a circle colored with the d3 category20 palette, and links are drawn as thin gray lines. The dataset contains numeric node identifiers and weighted edges, suggesting a relationship or similarity graph, with data loaded from JSON and rendered using D3 v3.

Aaht
77% match
Loading thumbnail…

Network graph

A network graph visualizes connections between named entities, such as "Oathkeeper," "Herokiller," and "johnnyDeep," with nodes colored by group and links weighted by line thickness. The graph uses D3.js v4 with a force-directed layout, implemented via the `d3.layout.force` API, which applies gravity, charge, and distance parameters to position nodes. Data is loaded from a local JSON file, and the SVG rendering updates node coordinates and link endpoints on each simulation tick. The interface includes a pink background and drag interaction for repositioning nodes.

SSNarasimhar
77% match