scatterplot

100%

✓ Published0🌍 Public

Last edited Mar 31, 2025

Created on Mar 25, 2025

This scatterplot visualizes the relationship between car mileage (in kmpl) and price (in USD) for eight car models across various manufacturers. Each orange circle represents a car, positioned by its mileage on the x-axis and price on the y-axis. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` to generate the tick marks. Axis labels are added as SVG text elements, with data embedded directly in the code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

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.

Ccharchana0527@gmail.com

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

80% 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

80% match

Loading thumbnail…

Activity6_task3

This example shows the relationship between car price and mileage with an interactive scatter plot. Each circle represents a vehicle, positioned by mileage on the x-axis and price on the y-axis, with color encoding price ranges via a `d3.scaleThreshold` (green, yellow, orange, red). Hovering over a point enlarges the circle and reveals the make, model, and price in a temporary text tooltip. The chart uses `d3.csv` to load external data and renders axes and circles as SVG, with a legend summarizing price bins.

Yyadlapallisaisathvik@gmail.com

80% match

Loading thumbnail…

Fork of Scatter plot

This scatter plot visualizes the relationship between car price and horsepower for 50 car models across 10 brands, using color-coded dots to distinguish brands. Built with D3 v7, the SVG chart plots each vehicle as a circle with hover tooltips showing model details like year and exact price. The visualization includes axes, labels, a title, and a color legend. Data comes from a CSV file loaded via d3.csv, with numeric fields parsed and scales applied using d3.scaleLinear and d3.scaleOrdinal with colors from d3.schemeCategory10.

Kkovuribalanagavinay@gmail.com

80% match

Loading thumbnail…

Car Sales Dateset

A D3.js scatter plot visualizes the relationship between mileage and selling price for used cars, with each circle representing a vehicle and its color indicating the number of previous owners. The plot maps kilometers driven on the x-axis and selling price in millions of Indian Rupees on the y-axis. The code uses d3.csv to load car details, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render tick marks. Circles are appended as SVG elements with fill-opacity to show overlapping points, and the chart fills the browser window.

RRyanYun0017

80% 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

80% match

Loading thumbnail…

Car Sales Dateset

This scatter plot displays the relationship between kilometers driven and selling price for used cars, with points colored by ownership status (first, second, third, or other owner). The visualization uses D3.js v6 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and `csv` to load the CarDetails dataset. Circle elements are appended with varying fill colors and opacity to distinguish ownership categories, while labeled axes indicate mileage in thousands of kilometers and selling price in millions of Indian rupees.

SShishiraRudrabhatla

79% match