d3 node-link diagram (soc dataset)

100%

d3 node-link diagram (soc dataset)

✓ Published1🌍 Public

Last edited Mar 26, 2024

Created on Mar 25, 2024

This example visualizes the Zachary Karate Club network, a social graph of 34 members, using a force-directed node-link diagram. Nodes represent individuals and links represent friendships, with interactive features allowing users to hover over nodes to view IDs and neighbors, or drag nodes to reposition them. The visualization is built with D3 v7, using `d3.forceSimulation` for physics-based layout, `d3.forceLink` and `d3.forceManyBody` for forces, and `d3.drag` for node interaction. Data comes from a CSV file loaded via `d3.csv`, with edges and nodes rendered as SVG lines and circles.

AI-generated description

A node link diagram with force directed layout in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://networkrepository.com/soc.php

MIT Licensed

Similar vizzes

Loading thumbnail…

CS 360 Assignment 7 - Force Directed Graph in d3

This visualization shows a node-link diagram of the Zachary Karate Club social network, with nodes representing members and edges representing their interactions. A force-directed layout positions the nodes as the simulation runs, with each node colored via a categorical scale and displaying its ID on mouseover. The code uses d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to drive the layout, rendering SVG circles and lines that update on every tick. Data comes from the SOC-KARATE dataset loaded as CSV, with interaction handling and color assignment based on node IDs.

SSean Sanchez

88% match

Loading thumbnail…

d3 adjacency matrix (soc dataset)

This adjacency matrix visualization displays the Zachary Karate Club network, showing friendships among 34 club members. Each cell indicates whether a connection exists between a pair of nodes, with turquoise representing linked pairs and black representing unlinked ones. Built with d3.v7, the code loads CSV data and uses `d3.scaleBand` to map nodes to both axes, rendering labeled rectangles as SVG elements. Interactive hovering reveals source-target details and link status, while highlighting the corresponding row and column with animated stroke changes. The tooltip appears on mouseover with a transition effect.

AAndrew

87% match

Loading thumbnail…

D3 Node-Link Diagram

This example shows a node-link diagram of social network data, using a force-directed layout to position 16 nodes and their connecting links. The visualization uses D3 v7's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to calculate the layout, while rendering nodes as SVG circles and edges as lines with animated tick updates. Node colors come from `d3.scaleOrdinal` with the `schemeSet1` palette, and hovering a node triggers a tooltip via mouseover events. Data is loaded from a CSV file containing source, target, and link values.

Mmariahdiaz

84% match

Loading thumbnail…

Node-Link Diagram

This node-link diagram visualizes a network of social firm connections using a force-directed layout. The code loads CSV data and creates circles for nodes and lines for links, with hover effects turning nodes red and displaying a tooltip label. It uses d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to position elements, rendering the graph as an SVG with D3 v6.

AAllen Ho

82% match

Loading thumbnail…

D3 Node-Link Diagram

A D3 node-link diagram visualizes social connections from a CSV file. Nodes represent individuals in tribes, colored by aggregated edge values, while links show positive and negative relationships. The layout uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position nodes, updating SVG circles and lines each tick. Hovering triggers a tooltip displaying node ID and value.

Pplai1

81% match

Loading thumbnail…

A8 Force Directed Node-Link Diagram in D3

This visualization displays the soc-hitech network as an undirected force-directed node-link diagram, with 36 numbered nodes connected by grey edges. It uses D3.js v7 and the d3.forceSimulation API to compute node positions through 500 simulation ticks, then renders the result as static SVG circles and lines. Node data and edge pairs are loaded from the soc-hitech.csv file, and hovering reveals a tooltip with the node ID.

EEric Yao

81% match

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

81% match

Loading thumbnail…

D3 Node-Link Diagram

This example demonstrates a node-link diagram representing social connections among 16 tribal groups, with 58 edges showing positive or negative relationships. A D3 force-directed layout positions the nodes using `d3.forceSimulation` with link, charge, and centering forces. Circles are rendered as SVG elements with dark blue fill and partial opacity, while lines represent connections. The data is loaded from a CSV file, and hover interactions trigger tooltip visibility. The code uses D3 v7 and includes the d3-legend and d3-scale-chromatic libraries, with the simulation updating node and link positions on each tick.

Pplai1

81% match