Skip to main content
SimilarExport ZIP
100%

Co-ocurrence matrix

✓ Published0🌍 Public
Iimsohandsome123
Last edited Nov 16, 2020
Created on Nov 16, 2020
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Co-ocurrence matrix

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`.

Hhenry1987
87% match
Loading thumbnail…

Co-ocurrence matrix

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`.

Hhenry1987
87% 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
77% match
Loading thumbnail…

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
76% match
Loading thumbnail…

heatmap

This heatmap visualizes a co-occurrence matrix of 50 row items by 5 column contrasts, with cell colors encoding log2 ratio values from -3 (blue) to +4 (red). Built with D3 v3 and rendered as SVG with animation, the heatmap supports reordering via hierarchical clustering, probe/contrast name sorting, and interactive row/column label clicks to re-sort cell values. Users can select cells with the mouse, and Alt-clicking enables multiple block selection, with corresponding row and column labels highlighted upon selection.

IIMYin
75% match
Loading thumbnail…

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.

Hhenry1987
75% 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…

A8 - Adjacency Matrix

This adjacency matrix visualizes directed relationships between 34 nodes, using D3.js to render SVG rectangles that represent connections from the dataset’s source-target pairs. Green cells mark edges, while black diagonal cells highlight symmetry, and a mouseover interaction highlights the corresponding row and column by thickening strokes and turning the hovered cell yellow. The code loads data from a CSV file, builds the matrix with fixed cell dimensions, and includes legend headers and labels for student IDs. The visualization effectively reveals network structure through a traditional matrix layout.

RRavneet Singh Bhatia
74% match