Fork of Matrix

100%

Fork of Matrix

✓ Published0🌍 Public

Last edited Jan 28, 2021

Created on Jan 28, 2021

Forked from 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.

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…

Matrix

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.

CCola731

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

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

82% match

Loading thumbnail…

hw3

This visualization presents the Auto MPG data set as an interactive network graph and adjacency matrix. A force-directed layout, built with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, positions nodes by connection strength, with color mapping to node degree. Users can drag the graph and zoom via mouse scroll. The matrix view highlights rows and columns on hover, showing connections between all 62 cars. Data is loaded from a CSV file, and both views are rendered as SVG with animations.

AAnuragSingh2096

81% match

Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an interactive adjacency matrix. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to layout nodes, and supports dragging. Clicking a matrix cell highlights the corresponding graph link, while the matrix also shows the dataset’s structure from the infect-dublin.edges file. The code uses d3.csv, d3.select, and reorder.js utilities for matrix permutation.

JJasonYeong0821

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

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

79% match

Loading thumbnail…

Fork of Force Directed Graph

The visualization pairs a node-link force-directed graph with an adjacency matrix view of the same network. The graph is computed using `d3.forceSimulation` with link, many-body, and center forces, while the matrix uses `rect` elements to encode edge weight via fill opacity. Clicking a node highlights its corresponding matrix row and column, and vice versa, with the selected cell emphasized in red. The implementation relies on the D3.js v6 API, including `d3.forceLink`, `d3.forceManyBody`, and custom drag and zoom interactions.

EELBOUNIAmine

79% match