matrix component

100%

matrix component

✓ Published0🌍 Public

Last edited Jul 27, 2018

Created on Jul 27, 2018

This example demonstrates an interactive 3x3 matrix component for exploring linear algebra concepts, where each cell displays a numeric value. Built with D3.js, it uses custom `d3.layout.matrix` and `d3.svg.matrix` components to render the grid. Users can scrub (drag) any number to adjust its value, and the colored background cells—mapped via a separate array—highlight corresponding entries across the matrix. The SVG rendering includes draggable text elements, with cell colors derived from a categorical scale and linked to shared mapping keys.

AI-generated description

Working towards a reusable matrix component to help illustrate linear algebra concepts.

try scrubbing the numbers on each matrix, notice that the colored cells correspond to each other in the 3x3.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/b41c59f0b6eaf54498c0'>matrix component</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Cell Matrix

A grid of purple and yellow rounded rectangles forms a randomly generated 16-by-8 cell matrix, with each cell’s color determined by a Math.random() call within the React component. The visualization is rendered as SVG rectangles using React and JSX, with cell dimensions computed from the container’s inner width and height divided by the grid counts. The layout is managed by a VizContainer component that applies margins and translates the SVG group, while the page loads React and D3 v6 from a CDN in the HTML entry point.

Ddartigues

73% match

Loading thumbnail…

Cell Matrix

A grid of 16 by 8 rounded rectangles displays a random pattern of purple and yellow cells, where each cell’s color is determined by a Boolean value from `Math.random()`. The React components `CellMatrix` and `Cell` position each rect using computed `x` and `y` offsets based on the inner dimensions, while the `VizContainer` renders the SVG output with configurable margins and a neutral gray background. This example uses plain React state-free rendering, with no D3 API calls beyond the library’s inclusion in the HTML page.

WWaseem Medhat

73% match

Loading thumbnail…

Matrix

This example combines a force-directed graph with an adjacency matrix to visualize network connections. Dragging nodes repositions the graph via `d3.forceSimulation`, while clicking either a node or a matrix cell highlights the corresponding row and column in red. The matrix uses SVG rectangles with opacity proportional to connection strength, and the view supports zooming through `d3.zoom`. The code loads data from TSV/CSV files and uses D3 v6 within a React starter, rendering both views synchronously.

Aannie520143

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

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

72% match

Loading thumbnail…

Adjacency matrix in D3

This example uses D3 v7 to render an adjacency matrix for the FIRM-HI-TECH dataset from networkrepository.com. It shows the relationships between firms as a grid of lightblue cells, where each row and column represents a node. The code loads CSV data with `d3.csv`, builds a matrix using a JavaScript `Map` and `Set`, and applies `d3.scaleBand` for the axes. Hovering highlights the row and column via stroke-width changes and displays a tooltip with the matrix cell’s link. The SVG is drawn with appended `rect` elements, and the interface includes numbered axis labels.

EEunice Tu

71% match

Loading thumbnail…

D3 - Adjacency Matrix

This example visualizes a dolphin social network as an interactive adjacency matrix. It displays a grid of colored squares where each row and column represents a dolphin, with filled cells indicating connections between individuals. The visualization uses two versions of D3 (v6 and v7) to parse CSV data, construct the matrix from edge lists, and render SVG rectangles with hover effects that highlight entire rows and columns. A tooltip appears on mouseover to show the specific link identifier, while the matrix labels each axis with node IDs.

CChandana Srinivas

71% match

Loading thumbnail…

Matrix

A force-directed node-link diagram and adjacency matrix display the same network data, linked by interactive selection. Clicking a node highlights its corresponding row and column in the matrix. The code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` from d3-force for the layout, and `d3.select`, `d3.zoom`, and `d3.drag` for interaction. Nodes are sized by group, and the matrix uses precomputed edge hashes to determine cell connections.

Aannie520143

71% match