Untitled

100%

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 12, 2021

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

83% match

Loading thumbnail…

Matrix View

This matrix view shows the adjacency relationships among U.S. states, with rows and columns representing individual states and colored cells indicating shared borders. The visualization supports reordering the matrix by state name, by connection count, or by geographic region, with animated transitions between these orderings. Hovering over a cell highlights the corresponding row and column labels. The code uses D3.js v2 with an ordinal scale for positioning, a linear scale for opacity, and SVG transitions to animate the reordering.

MMrajyalakshmi

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

80% match

Loading thumbnail…

James Eanes - VI7 - Matrix View

This interactive adjacency matrix visualizes network connections between U.S. states, with each cell colored by the connected state's degree count. The SVG rendering uses D3 scales and ordinal bands to position rows and columns, while an animation transitions between sort orders (name, count, group) over 2.5 seconds. Hovering highlights the corresponding row and column labels. The data comes from the contiguous-usa.json file, containing 49 nodes and links defining state boundaries.

JJamestiberiuseanes

79% match

Loading thumbnail…

Untitled

This example presents a choropleth map of U.S. states, with each state filled using a color scale from light yellow to dark red based on randomly generated low, average, and high values. Hovering over a state triggers a tooltip that displays these three metrics in a table. The visualization uses D3 v3 and SVG, with the `uStates` library providing the map outlines and `d3.interpolate` for color encoding. State boundaries are drawn as paths, and the tooltip appears dynamically near the cursor.

Tthanhtrant219

77% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays the distribution of three categories across U.S. states for a selected year, with a dropdown menu to switch between years. The visualization uses D3.js v5’s `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.stack()` to compute stacked segments. Animated transitions (via `transition().duration()`) smoothly update bar heights and axis labels. Total values for each state are shown above the bars. The SVG rendering includes axis groups and colored layers, with the year selector populated from the dataset.

Pp189

77% match

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

77% match