d3 node-link diagram (stanford dataset)

100%

d3 node-link diagram (stanford dataset)

✓ Published1🌍 Public

Last edited Mar 26, 2024

Created on Mar 26, 2024

Forked from d3 edge bundling (soc dataset)

This interactive node-link diagram visualizes the Twitter interaction network of the 117th United States Congress, using data from the Stanford SNAP repository that records retweets, replies, and mentions among members. The visualization displays nodes as circles representing congress members and edges as cyan lines representing interactions. Built with D3 v7, the layout uses physics-based simulation via `d3.forceSimulation`, including `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Hovering over a node triggers a tooltip showing the node ID and its neighbors, while `d3.drag()` allows users to reposition nodes interactively with SVG rendering and CSS transitions.

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://snap.stanford.edu/data/

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 adjacency matrix (stanford dataset)

This adjacency matrix visualizes a filtered Twitter interaction network among members of the 117th US Congress, using data from the Stanford SNAP dataset. Cells show whether pairs of nodes (IDs under 50) are linked, with teal indicating connections and black for non-links. Built with D3 v7, the SVG rendering uses `d3.scaleBand` for axes and `d3.csv` for data loading. Hover interactions trigger tooltips and highlight the corresponding row and column via stroke styling changes.

AAndrew

85% 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

79% match

Loading thumbnail…

d3 node-link diagram (soc dataset)

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.

AAndrew

78% 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

78% 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

77% 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

77% match

Loading thumbnail…

D3 Node-link Diagram With Force-directed Layout

This interactive D3 node-link diagram visualizes a force-directed network layout using data from the SOC-FIRM-HI-TECH repository. It shows the connections between nodes, with link thickness proportional to edge weight and node color assigned by ID via `d3.scaleOrdinal` and `d3.schemeCategory10`. The graph is rendered as an animated SVG using `d3.forceSimulation` with link, many-body charge, and center forces, allowing drag interactions. Hovering over a circle reveals a tooltip with the node ID, powered by D3 transitions and mouse events.

Ddarrenisdunn

75% match

Loading thumbnail…

Forces network

This example demonstrates a force-directed network visualization of Twitter connections among Welsh Assembly Members, rendered with D3 v4. Each node represents a politician, colored by political party, while curved, weighted links show the strength of connections between them. The force simulation uses a linear scale to map link weights to link strength, alongside collision, centering, and charge forces to position the nodes. The data is loaded from an external JSON file, and the visualization is drawn using SVG elements, with node labels and styles defined in the HTML.

663anp3ca

75% match