VI7 Node- link diagram

100%

VI7 Node- link diagram

✓ Published0🌍 Public

Last edited Mar 16, 2016

Created on Mar 15, 2016

This example visualizes U.S. state connectivity through a force-directed node-link diagram. Each circle represents a state, colored by its Census region (e.g., New England, South Atlantic, Mountain) using a categorical color scale, with 9 distinct groups. The graph uses D3's force layout with charge (-120) and link distance (30), causing states with fewer connections to drift more freely while highly connected states cluster together. Links show connections between states, with stroke width proportional to link value. Hovering over a node reveals its name via a tooltip. The dataset groups states into nine regions, with a notably higher number of states (DC, DE, FL, GA, MD, NC, SC, VA, WV) belonging to the South Atlantic region. The visualization is based on Mike Bostock's force-directed graph implementation, rendered as SVG, and uses D3 v3 with a categorical color scale to distinguish regional groups.

AI-generated description

The states are divided into various groups and each group is assigned with a particular color. The nodes which has less number of connections are moving more freely when compared which has links. There are more number of states that belong to south atlantic region.

My implementation is more similar to the Mike bostocks and I took the json dataset from Mr.Hung Do

Similar vizzes

Loading thumbnail…

VI 7 Node Link

A force-directed node-link diagram displays the 48 contiguous U.S. states and the District of Columbia, with nodes colored by census region and links connecting states within the same region. Hovering over a node reveals its full name, while highlight interactions emphasize regional groupings. The visualization uses d3.layout.force, d3.scale.category10 for color encoding, and SVG rendering, with node and link elements positioned via tick event updates.

MMrajyalakshmi

91% match

Loading thumbnail…

State-Adjacency

This force-directed graph maps the adjacency relationships between U.S. states and the District of Columbia, using a node-link layout to reveal geographic connectivity as a graph structure. Each state is represented by a node, and links indicate shared borders. The visualization makes it easy to spot Maine (ME) as the only state with a single connection, while Florida, South Carolina, DC, and Washington each connect to just two others. New York emerges as the critical hub, linking Vermont, Massachusetts, Connecticut, and other New England states, and the layout’s physical simulation pushes boundary states to the edges.

CChristosT

83% match

Loading thumbnail…

James Eanes - VI 7 - Node-Link

This example visualizes the adjacencies of 49 U.S. states and the District of Columbia as a node-link diagram, with each state represented as a circle and each shared border as a connecting line. The visualization uses D3’s force layout to position the nodes, applying charge and link distance parameters to simulate a physical network. Rendered as an SVG, the code loads data from a JSON file containing node names and edge indices, then draws circles and lines whose positions update on each tick of the force simulation.

JJamestiberiuseanes

83% match

Loading thumbnail…

Network

This network visualization displays the adjacency relationships among contiguous US states, with each state represented as a colored node and borders as links. The layout is computed using d3.forceSimulation with forceLink and forceManyBody, while state geometries come from TopoJSON data loaded via d3.json. Node colors are assigned by approximate longitude-based regions, and state names are drawn as SVG text labels. The code uses d3.geoPath to calculate centroids for region classification, and the final SVG rendering updates positions on each simulation tick.

Sson.sultan@yahoo.com

80% match

Loading thumbnail…

Rohith Annadurai ICE-8 Network graph

This network graph visualizes the hierarchical relationships between US states, regions, and counties using a force-directed layout. The D3.js v7 code builds nodes and links from a nested data structure, employing `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements. Nodes are rendered as SVG circles with drag functionality, while links appear as black lines. The visualization distinguishes entity types through CSS classes, with a light yellow background and clear text labels.

Rrohithannadurai@my.unt.edu

78% match

Loading thumbnail…

ice 8 Rohith Annadurai NETWORK GRAPH

This network graph visualizes the hierarchical relationships between U.S. states, regions, cities, and counties, with nodes color-coded by geographic type and connected by links. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while SVG circles and lines render the network. The graph dynamically sizes itself to the viewport, and the data is hardcoded in the script, showing the geographic structure from the national level down to individual counties.

Rrohithannadurai@my.unt.edu

78% match

Loading thumbnail…

Assignment 7 -- Adjacency Matrix

This example pairs a force-directed node-link diagram with an adjacency matrix to explore connections between U.S. states. The matrix encodes link strength with color opacity and groups states by region, with cells colored by group membership. Users can reorder matrix rows and columns by link count or name via a dropdown, triggering animated transitions. The visualization uses d3.v3 with `d3.layout.force` for the node-link view and ordinal/linear scales for the matrix, rendering in SVG. Data comes from a custom `miserables.json` file.

Vvishusikka

77% match

Loading thumbnail…

Rohith Annadurai ICE-8 Network graph

This network graph maps the hierarchical relationship between US states and their counties, visualizing an Eastern and Western regional structure. The visualization uses D3.js force-directed algorithms, specifically `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, to position nodes based on link and charge forces. Each node is rendered as a colored circle (white-filled with dark strokes) and links are black lines, with all elements drawn onto an SVG canvas. The data is hand-coded hierarchical JSON, with callback functions processing parent-child dependencies to generate the network’s node and link arrays.

Rrohithannadurai@my.unt.edu

77% match