Skip to main content
SimilarExport ZIP
100%

Scatter plot

✓ Published1🌍 Public
Ccharchana0527@gmail.com
Last edited Oct 18, 2025
Created on Oct 17, 2025
Forked from bar chart

This interactive scatter plot displays the relationship between car mileage and price, with individual dots colored by fuel type. Built with D3.js (v7), it renders as an SVG chart with axes, labels, and a hover tooltip that reveals the car name, fuel, mileage, and price. The visualization loads a CSV dataset from a GitHub gist, uses `d3.scaleOrdinal` for color mapping, and applies CSS transitions to highlight dots on hover.

AI-generated description
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

sketch with D3

This scatter plot visualizes the relationship between car price and mileage, with each circle representing a vehicle and its color indicating fuel type (Petrol, Diesel, Hybrid, or Electric). Using D3 v7, the code loads data from an external CSV file, converts numeric fields, and renders an SVG with linear scales for both axes. The visualization includes labeled axes, a title, and a custom legend built from the distinct fuel types. d3.csv fetches the data, while d3.scaleLinear and d3.scaleOrdinal handle the positional encoding and categorical color mapping respectively, with d3.axisBottom and d3.axisLeft generating the tick marks.

BBismark Kofi Owusu Sarfo
90% match
Loading thumbnail…

Scatter Plot by Mohith

This scatter plot displays the relationship between a car's fuel efficiency (MPG) and its price, with each point colored by brand according to a Tableau10 ordinal scale. The visualization uses D3.js v7's `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while gridlines are generated via a custom `tickSize` call. Data from the CSV file is loaded using `d3.csv` with `d3.autoType`, and interactive tooltips are added through SVG `circle` elements with appended `title` text. A legend and title are drawn directly onto the SVG.

Kkmohithkumar7@gmail.com
87% match
Loading thumbnail…

Fork of sketch with D3

A scatter plot visualizes the relationship between car mileage and price, with points colored by fuel type (Petrol, Diesel, Hybrid, Electric). Using D3 v7, the code loads data from a CSV file via `d3.csv`, maps values to numeric types, and renders an SVG with `d3.scaleLinear` axes, `d3.axisBottom` and `d3.axisLeft` labels, and a legend built from unique fuel types. The x-axis begins at zero, while the y-axis domain is padded by 10% to improve point visibility.

BBismark Kofi Owusu Sarfo
86% match
Loading thumbnail…

scatterPlotD3

This scatter plot visualizes the relationship between car fuel economy (mpg) and weight, with each circle representing a vehicle. The chart uses D3 v7 to load CSV data from a GitHub gist, then maps the data points using d3.scaleLinear for both axes. SVG circles are positioned via the x and y scales, with axis labels and a title rendered through d3.axisBottom and d3.axisLeft. The visualization highlights how heavier cars tend to have lower mpg ratings, demonstrating a clear negative correlation.

Ccwb314159@gmail.com
86% 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
85% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between fuel efficiency and engine size for a dataset of cars, with each point’s radius representing horsepower and its opacity representing price. The chart uses D3 v6 to load CSV data from a GitHub gist, apply linear scales for the axes and point attributes, and render circles in an SVG. Color encodes car type (Sedan, Coupe, SUV, Truck) via `d3.scaleOrdinal`, with a legend included. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

GGorantla Vishnusai
84% 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
84% match