Skip to main content
SimilarExport ZIP
100%

Fork of ScatterPlot-Spotify

✓ Published0🌍 Public
Cchandanamahesh0215@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025

This scatter plot shows the relationship between engine horsepower and fuel efficiency (miles per gallon) for a subset of 1970s cars, with each point representing a car model. The horizontal axis displays horsepower, the vertical axis displays MPG, and the points are colored on a blue sequential scale based on horsepower. Built with a reusable `scatterPlot` module, the chart uses D3 v7 APIs such as `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft`. Hovering over a point triggers a tooltip showing the car’s name, horsepower, and MPG, implemented via mouse event listeners.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot-Spotify

This reusable D3 scatter plot displays the relationship between horsepower and miles per gallon for cars from the Vega datasets CSV file. Each circle represents a vehicle, with hover tooltips revealing the car name and exact values. The visualization uses `d3.csv` for data parsing, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes, and a slider control that dynamically updates the circle radius via the chart factory's getter/setter methods.

Cchandanamahesh0215@gmail.com
86% match
Loading thumbnail…

scatter plot 7

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for a small sample of cars, with each point representing a vehicle and a tooltip revealing its name. Built with D3.v7, the reusable `scatterPlot` function from `scatterPlot.js` uses `scaleLinear` and `axisBottom`/`axisLeft` to map the data to SVG coordinates. The `index.html` file demonstrates the chart with a static dataset, rendering circles via a D3 selection join, though the primary focus is on the configurable chart generator.

Aadithiarikatla@gmail.com
85% match
Loading thumbnail…

scatter plot 7

This scatter plot displays the relationship between horsepower and fuel efficiency (MPG) for ten car models, with each point labeled with the car’s name. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.symbol` with a circle shape to render the points. The SVG output includes axis labels and hover tooltips showing car details, all within a reusable `scatterPlot()` function. The dataset is hardcoded in the script.

Aadithiarikatla@gmail.com
83% 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
83% match
Loading thumbnail…

Cars Scatter Plot!

This scatter plot visualizes the relationship between MPG and horsepower for a dataset of cars. Each pink circle represents a car, positioned according to its fuel efficiency and engine power, with axes labeled accordingly. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and loading data from a CSV file via `csv()`. The SVG rendering includes grid lines and a title, with circles styled through CSS.

Hhimanshigoyal23
83% match
Loading thumbnail…

Fork of Scatter plot

This scatter plot visualizes the relationship between car horsepower and fuel efficiency (MPG) using the Auto MPG dataset. The visualization renders circles as SVG elements, with axes labeled and styled using custom CSS. The implementation leverages d3's `scaleLinear` for coordinate mapping, `axisLeft` and `axisBottom` for axis generation, and `csv` to load the data from a remote source, with parsed numeric fields.

MMuiruriscode
82% 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
82% 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
82% match