Skip to main content
SimilarExport ZIP
100%

Fork of sketch with D3

✓ Published1🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Sep 24, 2025
Created on Sep 24, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% match
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
86% match
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
85% match
Loading thumbnail…

Fork of Fork of Fork of Fork of reusable scatter plot

This example shows a reusable D3.js scatter plot of a small car dataset, comparing horsepower and miles per gallon. A controller module updates the chart every two seconds, automatically swapping which attribute appears on the x- and y-axes. The visualization uses a modular `scatterPlot()` component with getter-setters, building an SVG with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data loads from a local CSV via `d3.csv`, and each point is rendered as a circle with an opacity of 0.8.

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

Fork of D3 Scatter Plot

This scatter plot visualizes BMW engine size versus price for model years 2010–2024, with each point colored by fuel type. The D3.js v7 code loads data from a CSV file and uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `schemeTableau10` for fuel type colors, and `d3.axisBottom` and `d3.axisLeft` for chart axes. The SVG rendering includes axis labels, a title, and a legend generated from the color domain.

Ssaiabhishekmunnangi@gmail.com
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

SSainathreddypotu@gmail.com
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between horsepower and fuel efficiency for ten car models, with points colored by cylinder count (4, 6, or 8) and a legend indicating the mapping. It uses D3 v7’s `scaleLinear` for axes, `scaleOrdinal` for color, and `axisBottom`/`axisLeft` for tick marks. The SVG circles are positioned via the `cx` and `cy` attributes. Data is loaded from a local `cars.csv` file.

Eeeshani.boyapati@gmail.com
84% 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
83% match