Skip to main content
SimilarExport ZIP
100%

test

✓ Published0🌍 Public
CChenLeah
Last edited Nov 25, 2020
Created on Nov 23, 2020
Forked from Iris Scatter Plot

This force-directed graph shows the connections between 410 automobile records from the UCI Auto MPG dataset, with nodes colored by their group assignment. The visualization combines a reorderable adjacency matrix with a draggable network view, allowing users to sort nodes by name, group, or computed leaf order. The matrix uses `d3.scaleBand` and `opacityScale`, while the interactive network relies on `d3.forceSimulation` with link and charge forces. Node grouping is derived from link counts, and the leaf-order calculation uses the reorder.js library with Manhattan distance.

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…

test

Interactive force-directed network visualizes 410 nodes connected by 189 links derived from a TSV dataset, with node groups assigned by link-count thresholds. Users can drag nodes and reorder the adjacency matrix by name, group, or leaf-order optimization using the `reorder` library. The SVG rendering combines `d3.forceSimulation` for layout with color-coded nodes from `d3.schemeCategory10`, while the adjustable ordering reveals clustering patterns through matrix reconfiguration.

CChenLeah
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
81% 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
79% match
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
77% match
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
77% match
Loading thumbnail…

Untitled

This visualization combines a force-directed network graph with a collapsible adjacency matrix. The SVG renders 410 nodes and their connections from a TSV file, with nodes colored by group and links shown as lines. Users can drag nodes via d3.drag to rearrange the simulation, which uses d3.forceSimulation with link and charge forces. The matrix view, built with d3.scaleBand and scaleLinear, displays node co-occurrences, and a dropdown allows switching between name- and group-based ordering.

WWei-Che Chang
76% match
Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang
76% match
Loading thumbnail…

test

This example shows an adjacency matrix of 410 nodes, with cells colored by group and sized by link frequency. A dropdown menu reorders the matrix by name, group, or optimal leaf order, with animated transitions. The visualization uses d3.scaleBand, d3.scaleOrdinal, and reorder.optimal_leaf_order with Manhattan distance. Cells are rendered as SVG rects with hover tooltips, and the data comes from a TSV file loaded via d3.tsv.

Iimsohandsome123
75% match