Skip to main content
SimilarExport ZIP
100%

Matrix

✓ Published1🌍 Public
CCola731
Last edited Nov 25, 2020
Created on Nov 25, 2020
Forked from Scatter plots

The matrix visualization combines a force-directed graph with an adjacency matrix to explore relationships in a car dataset. Users can click nodes in the force-directed layout or cells in the matrix to highlight corresponding rows and columns, revealing connections. Built with D3 v6, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.drag` for the interactive network, while the matrix uses `reorder.js` functions like `mat2graph` and `barycenter_order`. Data originates from the UCI Auto MPG dataset.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Matrix

This visualization combines a force-directed graph with an adjacency matrix to explore the Auto MPG dataset from the UCI Machine Learning Repository. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes representing cars, while the matrix displays pairwise connections with colored squares. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the connected nodes. The code uses `d3.drag` for interaction, `d3.zoom` for panning and scaling, and the `reorder.js` library for matrix layout, with SVG rendering.

Ppeter6179
90% 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
85% 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
84% match
Loading thumbnail…

Matrix

This example combines a force-directed node-link diagram with an adjacency matrix visualization of the same dataset. Clicking a node in the force diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell identifies a specific connection. The code uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` for the graph layout, and renders both views as SVG with `d3.drag` for interaction and `d3.zoom` for panning and scaling.

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

ADMatrix

This visualization combines a force-directed graph with a reorderable adjacency matrix, allowing users to explore network connectivity through two linked views. The graph uses d3.forceSimulation to position nodes, while the matrix encodes links as colored cells, with the optimal_leaf_order algorithm from reorder.js arranging the rows and columns. Clicking a node or matrix cell highlights the corresponding row and column in red, and the graph supports zoom and drag interactions. The data appears to be network links and nodes rendered as SVG elements.

Iimsohandsome123
81% match
Loading thumbnail…

hw3

This scatter plot visualizes a network of cars from the UCI Machine Learning Repository’s Auto MPG dataset, showing connections between 61 nodes across 10 groups. The visualization presents both a force-directed graph using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` with zoom functionality, and an adjacency matrix rendered as SVG rectangles. Clicking a matrix cell highlights the corresponding row and column. The code uses d3.csv to load data and d3.zoom for interactive resizing of the force layout.

Iimsohandsome123
79% match
Loading thumbnail…

Force Directed Graph

A force-directed graph and adjacency matrix display network data side-by-side. The graph shows nodes as colored circles connected by links, while the matrix uses cells with opacity representing edge weights. Clicking a node or matrix cell highlights the corresponding row and column in both views. The visualization uses d3.forceSimulation for layout, drag interactions, and zoom, with SVG rendering for all elements.

Wwinniepooh520
79% match