Skip to main content
SimilarExport ZIP
100%

ScatterPlot-Spotify

✓ Published1🌍 Public
Cchandanamahesh0215@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays the relationship between horsepower and miles per gallon for a small car dataset, with each point representing a vehicle. The D3.js v6 code defines a configurable `scatterPlot()` function with getter-setters for dimensions and data mappings. It loads the comma-separated values file using `d3.csv()`, converts numeric fields, and renders an SVG chart with `d3.scaleLinear` extents, `d3.axisBottom`, `d3.axisLeft`, and labeled axes. Circle elements include interactive tooltips via SVG `title` elements, with styling for opacity and color.

119h61a05c9@cvsr.ac.in
86% match
Loading thumbnail…

Fork of ScatterPlot-Spotify

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.

Cchandanamahesh0215@gmail.com
86% match
Loading thumbnail…

Cars scatter plot

A scatter plot displays the relationship between horsepower and miles per gallon for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map values and render gridlines, while circles are appended to an SVG element. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into numeric fields before being plotted.

AAnthony-coding
85% match
Loading thumbnail…

Cars scatter plot

A scatter plot displays the relationship between horsepower and miles per gallon for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map values and render gridlines, while circles are appended to an SVG element. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into numeric fields before being plotted.

AAnthony-coding
85% 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
85% 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
85% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for a dataset of cars, with each red semi-transparent circle representing a single vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes with gridlines, while `csv` loads the auto-mpg data from a remote URL. The SVG rendering includes labeled axes and a title, with circle positions mapped via scaled x and y coordinates.

Aanastasiiaplatovskikh
85% match
Loading thumbnail…

Reusable Scatter Plot with d3.js

This example creates a reusable scatter plot of sample car data, showing each vehicle’s horsepower against its miles per gallon via colored SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to append circles. A color map assigns distinct hues per car make, and each circle includes a title element for hover tooltips. The chart is generated by a configurable createScatterPlot function that accepts container, dimensions, and data keys as options.

VVinay Vemuri
85% match