HW6 — Car Data Visualization

100%

HW6 — Car Data Visualization

✓ Published1🌍 Public

Last edited Oct 8, 2026

Created on Oct 8, 2026

This scatter plot shows simulated car data from 2019–2024, mapping engine size on the x-axis against combined fuel efficiency on the y-axis. Each circle represents a model-year combination, with circle area encoding horsepower and color distinguishing vehicle type. The visualization uses D3 v7 with SVG rendering, employing d3.scaleLinear for axes and d3.scaleOrdinal for categorical coloring. Interactive features include hover tooltips and click-to-select highlighting, implemented through d3.select and event listeners. Data comes from a CSV file loaded via d3.csv.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HW6 — 3D Car Chart

This 3D scatter plot visualizes relationships between engine size, fuel efficiency, and horsepower across simulated car models from 2019–2024, with color encoding vehicle type. Users can drag to rotate the Plotly chart, which is built with the `scatter3d` trace type, and button presets switch between two camera perspectives. Data loads from a CSV using D3's `d3.csv` method, and preprocessing validates required columns and numeric fields before rendering.

Vvvit.21bq5a0514@gmail.com

90% match

Loading thumbnail…

HW6 — Year Comparison

This interactive D3.js visualization compares simulated car fuel efficiency (MPG) across years 2019–2024, using engine size and vehicle type as axes and color categories. It offers two views: an animated year-by-year transition and a side-by-side small multiples comparison, synchronized with a timed trial feature. The chart uses `d3.csv` to load data, `d3.scaleOrdinal` for color mapping, and SVG rendering with buttons for animation playback and timing. Both views share identical axis ranges and vehicle-type colors, helping users identify upward shifts in MPG for vehicle categories.

Vvvit.21bq5a0514@gmail.com

87% match

Loading thumbnail…

Car Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each vehicle represented as a semi-transparent blue circle. The visualization uses D3.js (v5) with SVG rendering, employing `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes, while `d3.csv` loads the auto-mpg dataset. Hovering over a circle changes its color and opacity, and the chart includes labeled axes and a title.

SSam Lite

83% match

Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing one vehicle. The SVG rendering uses D3 v5 scales, axes, and selections to map data values to screen positions. Axes are customized with tick lines and labels using `axisBottom`, `axisLeft`, and `scaleLinear`, while styling via CSS sets circle opacity and typography. The data originates from an external CSV file, processed by coercing numeric fields before rendering.

Nnoelmiranda

83% match

Loading thumbnail…

Cars Scatter

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of cars, with each car represented as a semi-transparent circle. The chart uses D3 v5’s scaleLinear, extent, axisLeft, and axisBottom APIs to map data values to SVG coordinates, with gridlines and axis labels. The data is loaded asynchronously from an external CSV file via d3.csv, and numeric fields are parsed before rendering. Styling is applied through CSS classes for circles and text elements.

TTrey Billing

83% match

Loading thumbnail…

Car's Scatter Plot

This scatter plot shows the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars, with each red circle representing an individual car model. The visualization uses D3.js v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG coordinates and render labeled axes with gridlines. Data is loaded asynchronously via `csv` from a remote file, then parsed into numeric values before being drawn to the SVG canvas. The chart includes a title and axis labels, with circles having partial opacity to reveal overlapping points.

MModalMBS

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

83% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a car model. Built with D3.js v5, it renders as an SVG using the `select` and `csv` helpers to load data from the UCI Auto MPG dataset. The visualization employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles are positioned using the scaled x and y values. The chart includes axis labels and a title, with styling applied via the included CSS.

Jjsong

83% match