hw3

100%

✓ Published0🌍 Public

AAnuragSingh2096

Last edited Nov 8, 2020

Created on Nov 8, 2020

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

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…

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

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

81% match

Loading thumbnail…

test

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.

CChenLeah

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

78% match

Loading thumbnail…

HW3

This example presents a force-directed network visualization of a dataset loaded from a TSV file, where nodes represent numeric IDs and edges represent connections between them. The visualization shows both a node-link diagram and an adjacency matrix, with node groups determined by link counts. The D3.js code uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` forces to position nodes, while an SVG rendering displays the results and supports dragging and zooming through D3’s interaction utilities. Animated transitions occur when reordering nodes by name or group via the dropdown control.

Cchungmin-yu

78% match

Loading thumbnail…

Vizhub3

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository as an interactive scatter plot, mapping miles per gallon against horsepower. Each circle represents a car model, with color encoding the country of origin, size encoding weight, and tooltips revealing the model name. The code uses the Vega-Lite API (via the `vega-lite-api` wrapper) to define the chart declaratively, with D3.js handling CSV data loading. Custom configurations adjust axis styling and typography for readability, and the visualization auto-fits to the browser window dimensions.

AAbhinay-Mannepalli

78% match

Loading thumbnail…

HW1

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon on the x-axis and horsepower on the y-axis. Each circle represents a vehicle, with color indicating the country of origin and size encoding vehicle weight. The plot uses the vega-lite-api to construct the chart and d3.csv to load the data. Custom axis and label styling are applied through the vega-lite configuration object, with a tooltip showing vehicle names on hover.

Ping-Yu Yang

77% match

Loading thumbnail…

Cars Report

This visualization, titled “Cars Report,” displays a dataset of cars using a force-directed network layout. It renders nodes representing cars, with connections between them arranged through a physical simulation. The implementation uses D3 v5’s `d3.forceSimulation` to position elements and manage collision and link forces, while the node and edge visuals are drawn as SVG elements. The code loads data dynamically and updates the simulation as the graph evolves, providing an interactive overview of relationships within the car dataset.

Mmartiguesc

77% match