hw3

100%

✓ Published1🌍 Public

Last edited Nov 8, 2020

Created on Nov 8, 2020

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.

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

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

82% match

Loading thumbnail…

Untitled

This scatterplot uses the D3.js library to visualize the relationship between horsepower and weight for a collection of cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a single car model. The D3 code loads the CSV data, applies linear scales to both axes, and renders the points within an SVG, while also adding labeled axes and a title to the chart.

Jjhcliu19

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

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

81% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, displaying horsepower versus weight. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleTime` for axes, along with `axisLeft` and `axisBottom` to create labeled time and temperature scales. Data is loaded via D3’s `csv` method and mapped to circle elements with red fill and partial opacity. The chart includes a title, axis labels, and a grid generated through tick size settings.

Mmyskotima130

80% match

Loading thumbnail…

The d3 test

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses d3.v2 to render circles representing individual cars, with styling defined by CSS. The chart displays the relationship between variables through a simple scatter layout, using d3’s basic selection and data-binding methods. The axis labels and title are formatted with custom font sizes, and the SVG update pattern is handled within the d3 framework.

SSushanta77

80% match

Loading thumbnail…

Scatterplot D3

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The code uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for tick marks. Circles represent individual car models, with red semi-transparent fills. The visualization includes labeled axes and a title, generated through D3’s selection and data-join methods, with data parsed and converted to numeric values before rendering.

SSophia Cofone

80% match