Skip to main content
SimilarExport ZIP
100%

[A4] MPG vs. Horsepower (Scatter Plot)

✓ Published0🌍 Public
Cctan13@dons.usfca.edu
Last edited Feb 21, 2024
Created on Feb 20, 2024
Forked from HTML Starter

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of vehicles, with each gray circle representing a data point. Hovering over a point highlights it in orange and displays a tooltip showing its exact MPG and horsepower values. The visualization uses D3.js v7’s scaleLinear and axisBottom/axisLeft to map the data and render axes, while the SVG circles respond to mouseover and mouseout events. Data is loaded asynchronously via d3.csv from a remote GitHub gist.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between MPG and horsepower using the auto-mpg dataset. Each circle represents a vehicle, positioned by linear scales created with `d3.scaleLinear` and `d3.extent`, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG chart animates circle appearance using `d3.transition` with easeLinear. Data is loaded as CSV and parsed into numbers, with axis labels and gridlines styled through CSS classes.

CChris Mora
89% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between a car's fuel efficiency (mpg) and its horsepower using data from the auto-mpg.csv dataset. The plot uses circles to represent individual car models, with the x-axis showing mpg and the y-axis showing horsepower. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for the axes, and `select` to target the SVG element. The data is loaded via `csv` and processed before rendering.

PPioustu
88% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The chart uses d3.scaleLinear to map data values to pixel coordinates, d3.axisBottom and d3.axisLeft to render labeled axes with gridlines, and SVG circles for marks. Data is loaded via d3.csv, with circles and labels appended through D3 selections, while axis tick styling is handled in the linked stylesheet.

ZZY Huang
88% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Ssara17585
87% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Ssara17585
87% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and miles per gallon for various car models, sourced from the auto-mpg dataset. The D3 v6 code loads CSV data, maps horsepower to the x-axis and mpg to the y-axis using linear scales, and renders semi-transparent pink circles for each car. Axis tick marks extend across the plot, and both axes are labeled. The SVG output includes a title and uses Roboto Mono typography for all text elements.

RRodolfo Viana
87% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon (MPG) and horsepower for a dataset of cars, with each circle representing a vehicle. The chart uses color to differentiate individual data points, while axes are labeled and scaled using D3's `scaleLinear` and `scaleBand` functions. Built with D3 v5, the visualization renders as an SVG and reads its data from an external CSV file. The code employs D3's `axisLeft`, `axisBottom`, `extent`, and `format` APIs to construct the axes and tick marks.

EEdward-Elric233
87% match
Loading thumbnail…

Cars: scatter plot

This scatter plot displays the relationship between horsepower and MPG for a dataset of cars. Each circle represents a car, with its position determined by the car's MPG on the x-axis and horsepower on the y-axis. The visualization uses D3 version 5, specifically the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions, and renders as an SVG. Data is loaded from a CSV file using D3's `csv` method, and the plot includes labeled axes, a title, and grid lines.

DDavid Sjoberg
86% match