D3 in Action Adjacency Matrix

100%

D3 in Action Adjacency Matrix

✓ Published0🌍 Public

Last edited Dec 2, 2017

Created on Dec 2, 2017

This example visualizes asylum-seeker flows between countries as a directed adjacency matrix, with source countries on the y-axis and destinations on the x-axis. The grid encodes the weight of each flow through the opacity of red squares, and hovering over a cell highlights the corresponding row and column. It loads node and edge data from CSV files using the queue library, then builds the matrix with d3.csv and renders it as SVG rectangles. Axis labels are added with d3.svg.axis, while d3.scale.ordinal positions the country names along both dimensions.

AI-generated description

An adjacency matrix is a useful way of visualizing networks using an n-by-n grid that shows connection between nodes as a filled grid square. This adjacency matrix is directed, with the source on the y-axis and target on the x-axis. It loads the data from a node list and edge list and represents edge weight using opacity. It also highlights rows and columns on mouseover.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/9441864'>Adjacency Matrix from Node/Edge List</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 in Action Adjacency Matrix

This example displays a directed adjacency matrix, where rows represent source nodes and columns represent target nodes. It loads node and edge data from arrays and renders an SVG grid of red squares, with edge weight encoded through fill opacity. The D3 v3 code uses `d3.scale.ordinal` for axis positioning and `d3.svg.axis` for labels, while mouseover highlights rows and columns by increasing the stroke width of matching cells.

Aalex-rind

82% match

Loading thumbnail…

D3 in Action Adjacency Matrix

This directed adjacency matrix visualizes a small network of five nodes, using a 5-by-5 grid where rows represent sources and columns represent targets. Cell fill opacity encodes edge weight, with darker red squares indicating stronger connections. On mouseover, the corresponding row and column are highlighted by thickening their borders. The visualization is built with D3 v3, using `d3.svg.axis()` for the ordinal name scales on both axes and a `queue()` pattern to load the CSV data, though the current code falls back to hardcoded arrays for nodes and edges.

Aalex-rind

80% match

Loading thumbnail…

Force-Directed Graph from Flow CSV

This force-directed graph visualizes asylum flows between countries in 2016, based on a CSV dataset from UNHCR. Nodes represent countries of origin and asylum, while links show migration flows between them, with line width scaled to the flow volume using a square-root scale. The layout is computed by a physical simulation in D3 v4, where charged particles repel and springs attract connected nodes, causing related countries to cluster together. The network uses SVG circles and lines, with drag interaction to explore the graph. This example is a variant of Mike Bostock’s classic Les Misérables character co-occurrence visualization, adapted to read edge data from a CSV file and visualize asylum-seeker flows.

Aalex-rind

80% match

Loading thumbnail…

Force Layout from CSV

A force-directed graph visualizing asylum-seeker flows in 2016, with nodes representing countries and links representing asylum applications between them. The visualization uses D3's force layout to position nodes and draw edges, with data loaded from a CSV file containing origin and destination countries. The graph is rendered as an SVG with lines for links and circles for nodes, and the force-directed layout distributes the nodes based on the connections between countries. Data is sourced from UNHCR population statistics, showing asylum-seeker movements between countries of origin and countries of asylum/residence.

Aalex-rind

79% match

Loading thumbnail…

D3 in Action Adjacency Matrix

This example shows an adjacency matrix visualizing co-occurrence weights between 43 topics, with each cell’s opacity encoding the edge weight from a CSV edge list. The code builds a square matrix of all possible source–target pairs, fills in weights from the edge hash, and renders them as SVG rectangles using D3 v3’s `d3.scale.linear` for opacity scaling. It adds row and column axes with `d3.svg.axis`, and a mouseover handler highlights entire rows and columns. The data comes from `edgelist.csv` and `nodelist.csv`, loaded via `queue().defer(d3.csv)`.

TThanaporn-sk

77% match

Loading thumbnail…

Arc Generator

This visualization displays asylum-seeking flows between countries on a world map using curved arcs that connect country centroids. When hovering over a country, arcs appear linking it to several pre-selected destinations, though the data shown represents a small sample rather than the full asylum.json dataset. The visualization uses an SVG rendering approach with D3 v5's geoNaturalEarth1 projection and geoPath to draw country boundaries, while custom arc-generating logic creates the connecting paths. The style.css file defines the map aesthetics, including light green country fills and red arcs.

Aankita1mit

76% match

Loading thumbnail…

adjacency matrix

This adjacency matrix visualization uses a grid of colored cells to show connections between individuals in a social network, with darker orange cells indicating stronger relationships. The code loads node and edge data from CSV files, then constructs a matrix where each row and column represents a person, and cell opacity reflects edge weights. Built with D3.js v4, it renders SVG rectangles for the matrix cells, labels axes with node names, and highlights rows and columns on mouseover. The example uses D3’s selection, data binding, and event handling APIs to create an interactive overview of pairwise relationships.

663anp3ca

75% match

Loading thumbnail…

Adjacency Matrix

This example visualizes the adjacency relationships in a network as a matrix, where rows and columns correspond to nodes and colored cells indicate the presence of a link. The code uses D3.js v6 to load CSV data from a GitHub gist, constructs a square grid of rectangles sized 17x17 pixels, and encodes edge weights via fill opacity. Interactive mouseover events highlight the entire row and column of a hovered cell and display a tooltip with the link ID. Node labels are rendered as text along both axes.

PPranay Matalia

74% match