Co-ocurrence matrix

Last edited Aug 7, 2019

Created on Aug 6, 2019

This visualization displays a co-occurrence matrix of academic disciplines, where each cell represents the strength of association between two fields, with color indicating group membership and opacity reflecting link value. Users can reorder the matrix by name, count, or group using a dropdown, triggering animated transitions via `d3.transition()`. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.scaleSqrt` for layout and styling, while hover interactions highlight corresponding row and column labels using `d3.selectAll`. Data is loaded from a JSON file with `d3.json`.

AI-generated description

MIT Licensed

Similar vizzes

Co-ocurrence matrix

100% match

Co-ocurrence matrix

This co-occurrence matrix visualizes the relationships between academic programs, with cells colored by category and sized by link weight. The visualization uses an interactive SVG heatmap where users can reorder rows and columns by name, count, or group via a dropdown menu. Built with D3 v5, the code employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data, while transitions animate the reordering over 2 seconds. A tooltip provides details on hover, and the matrix reads from a JSON file containing nodes and links.

Iimsohandsome123

87% match

Matrix Diagram

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

72% match

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

71% match

D3 Adjacency Matrix

An adjacency matrix displays 16 nodes from the soc-tribes dataset as a symmetric grid, where hot pink cells indicate connections and white cells represent absent links. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleBand` for axis positioning and `d3.csv` for data loading. Interactive tooltips highlight rows and columns on mouseover, while the matrix symmetrizes directed links by mapping both directions into a shared `Map` structure.

Mmariahdiaz

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

Dishes Map

This interactive matrix diagram visualizes relationships between dishes, with colored cells indicating connection strength and hue representing dish group. Users can reorder the matrix by name, count, or group using dropdown controls, triggering animated transitions via `d3.transition()` and `matrixScale.domain()`. The visualization uses D3 v5 with `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for rendering SVG rectangles with opacity mapping link values. Hover interactions highlight row and column labels, while a tooltip displays details.

heatmap

This interactive heatmap visualizes a 50×5 co-occurrence matrix, where each cell’s color encodes a log2 ratio value from the accompanying TSV dataset. Built with D3 v3 using SVG, the chart supports reordering via hierarchical clustering or by row/column labels, and clicking a row or column label sorts the corresponding cells. Users can click individual cells to highlight their row and column labels, or select multiple cell blocks while holding the Alt key. Hovering or selecting cells highlights the associated row and column labels, and the interface includes animated transitions for reordering. The example is adapted from GerardoFurtado’s block and is distributed under the MIT license.

GGerardoFurtado