HW6 — Year Comparison

100%

HW6 — Year Comparison

✓ Published0🌍 Public

Last edited Oct 8, 2026

Created on Oct 8, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HW6 — Car Data Visualization

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.

Vvvit.21bq5a0514@gmail.com

87% match

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

82% match

Loading thumbnail…

Fuel Efficiency

This interactive visualization explores 2017 fuel efficiency data for major automobile brands, comparing average highway and city MPG through bar charts that animate when toggled. It demonstrates how engine cylinders and fuel type relate to mileage using scatterplots with hover tooltips. Built with D3 v5, the visualization uses SVG rendering and transitions to smoothly switch between highway and city mileage views, with data loaded from embedded arrays and external CSV sources.

Xxiaojingwu138

79% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between vehicle model year and fuel efficiency (MPG), with each circle representing a car. The visualization uses D3 v5 to load data from a CSV via `d3.csv`, then applies linear scales (`scaleLinear`) and axes (`axisBottom`, `axisLeft`) to map the values. Gridlines are rendered through tick sizing, and the SVG circles are positioned using the scaled coordinates. The chart includes labeled axes and a centered title, with styling applied via CSS.

Rreubengann

78% match

Loading thumbnail…

ry0214_question 2

This example visualizes the relationship between vehicle horsepower and highway fuel efficiency (MPG) across 31 car makes, from Scion to Maybach. An area chart displays the trend, with horsepower on the x-axis and highway MPG on the y-axis, using a semi-transparent steelblue fill to emphasize the decline in fuel economy as engine power increases. The visualization is built with D3 v7, employing `d3.scaleLinear` for axes, `d3.area` for the shaded region, and `d3.axisBottom`/`d3.axisLeft` for labeled ticks, alongside a simple legend. The SVG rendering uses data embedded directly in the script, with margins and dimensions set for a clean 800x500 layout.

Rreddyyeddula16@gmail.com

77% match

Loading thumbnail…

HW6 Fix

This scatterplot visualizes the relationship between engine Horsepower, Torque, and MPG, with vehicle Layout encoded by color. The code loads data from a CSV file using `d3.csv`, then renders an SVG with `d3.scaleLinear` for x and y positions and `d3.scaleOrdinal` for category colors. Summary statistics display mean and median horsepower, while axes are drawn with D3’s axis components. The visualization demonstrates basic marks and channels, using position, size, and color to encode quantitative and categorical attributes.

RReagan S

77% match

Loading thumbnail…

Fork of Hello VizHub

This scatter plot visualizes car performance by plotting speed (km/h) against fuel efficiency (mpg) for five car models over four years. Each point represents a single year’s data, with distinct colors (red, blue, green, orange, purple) assigned per car brand, sourced from an embedded CSV table. Built with D3 v6, the SVG chart uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while circles are appended via `.selectAll().data().enter()`. The code shows a static rendering with `svg` output, and no animation or interaction is implemented.

Ssaivaishnogaruda@gmail.com

77% match

Loading thumbnail…

heatmap with legend d3

This heatmap visualizes the average fuel economy (mpg) of cars across model years and engine displacement ranges, using color intensity to represent efficiency values. The chart is built with D3 v7, loading CSV data and using `d3.rollup` to aggregate means, `scaleBand` and `scaleTime` for axes, and a sequential color scale with `d3.interpolateBlues`. Interactive tooltips display details on hover, while the legend is generated using the d3-legend library.

Ccwb314159@gmail.com

77% match