CSCE 5320 HW5 - Cars - Mounika Narra

100%

CSCE 5320 HW5 - Cars - Mounika Narra

✓ Published0🌍 Public

Last edited Sep 30, 2026

Created on Sep 30, 2026

This scatterplot displays 2025 vehicle models by engine size and combined fuel economy, with point size encoding annual fuel cost. A single Kia Niro (ID 34779) appears highlighted in purple. The visualization uses D3 v7 with SVG rendering, loading CSV data from a GitHub gist and parsing numeric columns via `d3.csv`. Linear scales (`d3.scaleLinear`) map the axes, while a summary panel reports dataset statistics, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

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

80% match

Loading thumbnail…

CSCE 5320 HW5 - Cars Visualization

This interactive scatterplot explores the relationship between new-car price and fuel efficiency, with horsepower mapped to circle size and segment assigned to color. Users can switch between three visual encodings via control buttons: position-only, color-coded by segment, and a version that adds labels. Built with D3.js v7, the SVG chart fetches data from a CSV file, renders axes and legends dynamically, and includes a hover tooltip. A summary panel highlights the position of a specific vehicle, the Porsche 718 Cayman.

RRakesh vilasagaram

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…

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

RRamdas Dheeraj

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

78% match

Loading thumbnail…

Cars Plot

This scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) using data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses D3.js with an SVG rendering, where each circle represents a car, with position determined by linear scales for both axes. The code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes, while `csv()` loads the external dataset. Axis labels and a title are added via SVG text elements, with circles styled in translucent red.

CCaleb

77% match

Loading thumbnail…

Cars Scatter Plot

This D3.js v5 scatter plot visualizes fuel efficiency data from the cars2017_new.csv dataset, plotting each car model's average city MPG as a horizontal bar. The y-axis displays car makes using a band scale, while the x-axis represents city MPG values with a linear scale. Built with SVG rendering, the visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `scale.category20` APIs. The code reads the CSV file, converts numeric fields, and appends styled rectangles to the SVG canvas to represent each data point.

SSushanta77

77% match

Loading thumbnail…

Cars Scatter Plot with D3.js

This scatter plot visualizes the relationship between miles per gallon and model year for a dataset of cars. The visualization uses red, semi-transparent circles to represent individual vehicles, with axes labeled for MPG and Year. The code leverages D3.js v7 functions including `csv` for data loading, `scaleLinear` for scaling, and `axisBottom`/`axisLeft` for axis generation. The SVG rendering includes grid lines, axis labels, and a title, with data parsed from an external CSV file.

CCarloWK1202

77% match