Untitled

100%

✓ Published2🌍 Public

Last edited Apr 13, 2022

Created on Mar 28, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows an interactive adjacency matrix of U.S. state connections, where cell opacity encodes link strength and color indicates whether states share a region. Users can reorder the matrix by name, link count, or region using a dropdown, with smooth animated transitions via `d3.transition`. The visualization uses `d3.scale.ordinal` and `d3.scale.linear`, and renders SVG rectangles. A custom legend built with `d3.svg.legend` maps regional colors. The data comes from a local `miserables.json` file containing states and their links.

TTimStapert

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

84% match

Loading thumbnail…

Untitled

This example uses D3.js v3 and TopoJSON to render a force-directed layout of U.S. state centroids, with Voronoi links connecting neighboring states. The code loads a U.S. map from a JSON file, filters out non-continental states, and computes centroids via `d3.geo.path().centroid()`. A `d3.layout.force()` simulation positions the nodes while maintaining link distances derived from the Voronoi cells. SVG paths draw each state’s shape, and lines represent the Voronoi links, updating on each tick. The visualization highlights geographic adjacency through network topology rather than choropleth coloring.

Tthanhtrant219

80% match

Loading thumbnail…

Untitled

This visualization combines a force-directed network graph with a collapsible adjacency matrix. The SVG renders 410 nodes and their connections from a TSV file, with nodes colored by group and links shown as lines. Users can drag nodes via d3.drag to rearrange the simulation, which uses d3.forceSimulation with link and charge forces. The matrix view, built with d3.scaleBand and scaleLinear, displays node co-occurrences, and a dropdown allows switching between name- and group-based ordering.

WWei-Che Chang

79% match

Loading thumbnail…

Matrix

This example presents two coordinated views of the same graph data: a force-directed node-link diagram rendered with d3.forceSimulation, and an adjacency matrix using reorder.js for layout. Clicking a node in the network highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights its associated link. The matrix uses SVG rectangles with fill-opacity representing connection strength, and both views support zooming and dragging. The code imports d3 v6, d3-force, and reorder.js libraries.

Aannie520143

78% match

Loading thumbnail…

Untitled

This visualization displays a network of interconnected nodes using a force-directed layout, with each node’s size and color encoding categorical and quantitative attributes. The graph is rendered on an HTML canvas, with node positions updated via `d3.forceSimulation` and drawn using the Canvas API. The background and node styling are set through custom CSS, while the data is loaded from an external source (the `v3` dataset). The example demonstrates how to combine D3’s simulation with direct canvas drawing for smooth, animated interactions.

VVarun Khanna

78% match

Loading thumbnail…

Untitled

This example visualizes a force-directed network graph, showing how nodes with varying sizes and link connections settle into a stable layout. The graph uses `d3.forceSimulation` and `d3.forceLink` to compute the node positions and link distances, while `d3.select` and `d3.zoom` handle the interactive panning and zooming. The visualization is rendered with SVG elements using the `d3.drag` behavior for node repositioning. The data is loaded from a CSV file containing node and link information, and the color of each node is assigned based on a categorical scale.

Hhassanraza1552

77% match

Loading thumbnail…

Untitled

This example presents a force-directed graph layout of a synthetic network dataset, rendered as an interactive SVG. It uses the D3.js library’s `forceSimulation` API to compute node positions and `forceLink` for edge constraints, with nodes colored by a categorical attribute. The visualization includes draggable nodes and a simple tooltip on hover, while the underlying data is generated programmatically in the JavaScript file.

Aadbbdd

77% match