Skip to main content
SimilarExport ZIP
100%

ICE6 Scatter Plot Car Efficiency

✓ Published0🌍 Public
AAddiga Himesh Chander
Last edited Mar 9, 2026
Created on Mar 9, 2026

This scatter plot shows the relationship between car horsepower and fuel efficiency (MPG) across 112 vehicles. The visualization uses a blue circle for each car, with the x-axis representing horsepower and the y-axis showing miles per gallon, revealing a clear negative correlation between the two variables. Built with React and D3 v7, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear`, and renders circles into an SVG using the `join` pattern. Axis and text labels are added through `d3.axisBottom` and `d3.axisLeft`, with margins defining the plotting area.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Scatter Plot

This D3.js scatter plot shows the relationship between car engine size and fuel efficiency, with each circle representing a car model and positioned by engine displacement (liters) and miles per gallon. A categorical color scale maps each car model to a unique vivid color, and the visualization includes hover tooltips for detailed values. The code uses d3.csv to load data, d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and D3 selections with enter/append for creating SVG circles, set against a gradient background within a styled card layout.

Ssaisathwikaguntupalli@gmail.com
86% match
Loading thumbnail…

ICE-7 Harshith Mullapudi

This scatter plot shows the relationship between horsepower and miles per gallon for a small set of six cars, using a reusable chart function built with D3.js v7. The SVG rendering includes linear scales for both axes, axis labels, and semi-transparent steelblue circles. The code demonstrates a custom `scatterPlot()` function that returns a chart closure, handling margins, scales, and axes internally, then applies it via `selection.datum()` and direct function invocation. The dataset is embedded in the script, and the visualization explicitly labels its axes with “Horsepower” and “Miles per Gallon.”

HHarshithmullapudi@my.unt.edu
86% match
Loading thumbnail…

ICE7-3

This area chart visualizes the relationship between horsepower and fuel efficiency (MPG) for a sample of 50 cars from a CSV dataset. It uses D3.js v7 to render an SVG graphic, with a monotone cubic curve (`d3.curveMonotoneX`) forming the filled area and overlaid blue circles for individual data points. Tooltips on hover display the car name, horsepower, and MPG. Axes are labeled for 'Horsepower' and 'Miles per Gallon (MPG)', with the chart title indicating the dataset's scope.

SSainathreddypotu@gmail.com
84% match
Loading thumbnail…

scattercar

This scatterplot visualizes the relationship between car horsepower and fuel efficiency (MPG) using the auto-mpg dataset. Each semi-transparent blue circle represents a car model, positioned by its horsepower (x-axis) and MPG (y-axis) values, with axes labeled "HP" and "weight." The visualization is built with D3 v7 and React, using `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the scales and axes. The SVG rendering includes gridlines, tick labels, and a title, with data loaded via the `csv` function.

CCalvin.
84% match
Loading thumbnail…

ICE 7 Resuable scatter plot Ar

A scatter plot visualizes the relationship between engine size and fuel efficiency for 15 car models, revealing a general trend toward lower MPG as engine displacement increases. Each model is represented by a colored circle with a distinct categorical color, and interactive tooltips display details on hover. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from an inline CSV file.

Ccharchana0527@gmail.com
84% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between miles per gallon and horsepower for various car models, with each point representing a vehicle. The visualization uses D3.js v6 within a React framework to scale and position circles on an SVG canvas. The code employs `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes and plot the data, which is loaded from a CSV file. The visualization also includes axis labels, a title, and a semi-transparent steelblue fill for the circles.

Nnsadath
84% match
Loading thumbnail…

ICE 7 Scatter Plot

This scatter plot visualizes the relationship between car engine size and fuel efficiency for 15 car models, using a color-coded circle for each model. D3.v7 loads and parses the CSV, then uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` to assign vivid colors per car model. The SVG rendering includes labeled axes, axis labels generated via `d3.axisBottom` and `d3.axisLeft`, and hover tooltips that display model details.

Ssaisathwikaguntupalli@gmail.com
84% match
Loading thumbnail…

ICE7-1-VarshaG

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color mapped to origin and point size to weight. It renders the 398 cars from the UCI Auto MPG dataset using the vega-lite-api library, building a single circle mark with tooltips for names. The visualization adapts to the full viewport, and the accompanying vega-tooltip handler displays each vehicle's details on hover.

VVReddy913
84% match