VI 7 Node Link

100%

VI 7 Node Link

✓ Published0🌍 Public

Last edited Mar 16, 2016

Created on Mar 16, 2016

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.

AI-generated description

Rajyalakshmi Mukkamala

Node Link

Insight

1.Color reprentation is with respect to regions, states colored with same color to belong to same region. For example,Oregon,Washington and California belong to pacific region and nodes are colored red.

2.South Atlantic region has highest number of states i.e. 9 states.

Mouse hover on the node gives state name.

Similar vizzes

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…

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

79% match

Loading thumbnail…

Untitled

This example presents two linked views of the same network of U.S. states: a node-link force-directed diagram and an adjacency matrix. The matrix cells are colored by the states’ regional group, and the visualization animates reordering between sorted and categorical arrangements. Built with D3 v3, it uses `d3.layout.force` for the node layout, while the matrix uses `d3.scale.ordinal` for axes and `transition.attr` for smooth reordering.

Pprateekvasi

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

76% match

Loading thumbnail…

Force-Directed States of America

This interactive visualization displays the lower 48 U.S. states as a force-directed graph. Each state is a filled polygon node, and the links connecting them are derived from the Delaunay triangulation of state centroids. Users can click and drag states to rearrange the map, with the layout physics responding in real time. The code uses D3 v3 with the `d3.layout.force` API for simulation, `d3.geo.path` for rendering state shapes, and `d3.geom.voronoi` to compute the links. The map data comes from a JSON file of U.S. states, with Alaska, Hawaii, and Puerto Rico excluded.

Mmbostock

76% match

Loading thumbnail…

Contigious States of US

This visualization uses an adjacency matrix to display the contiguity of the 48 contiguous US states (plus Washington, D.C.). Each cell in the matrix is colored to indicate whether two states share a border (dark) or are connected via a path of length two (lighter), with state ordering toggleable alphabetically or by neighbor count using D3's ordinal scale. Built with D3 v3, it renders as an SVG with mouseover highlighting of rows and columns, and includes interactive controls to reorder rows and columns and to toggle display of two-hop connections.

CChristosT

75% match

Loading thumbnail…

Document

A network graph and a choropleth map display U.S. state names and connections. The network uses a force-directed layout with D3’s `d3.forceSimulation` to position linked nodes, while the map renders geographic boundaries via `d3.geoPath`. The visualization loads state data from a JSON file and draws SVG elements, with styling applied through Montserrat font and custom classes.

SSaurabh Gupta

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

74% match