Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published2🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot

This scatter plot visualizes the relationship between BMW sales and price, with each point representing a model. The code loads data from a CSV file and maps sales to the x-axis and price to the y-axis using d3.scaleLinear. Rendered as SVG circles with hover effects, the chart displays axes via d3.axisBottom and d3.axisLeft, and includes text labels for both dimensions. The visualization uses D3 v7 and applies CSS styling for dot appearance.

GGorantla Vishnusai

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

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

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

81% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the correlation between horsepower and torque for BMW models from 2009 to 2012, using data loaded from an external CSV file. The visualization includes labeled axes, a chart title, and interactive tooltips that reveal each point's horsepower value on hover. Built with D3.js v4, the example uses `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles with mouse event handlers for the interactive data points.

Ddriftcafe

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

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

81% match

Loading thumbnail…

Scatter Plot with D3 BMW

This interactive scatter plot visualizes BMW car models by regional sales volume and average price. It uses D3.js v7 vith the d3-rosetta utility library for unidirectional data flow, rendering circles whose colors encode car models. Hovering over a data point or a legend item highlights all points for that model with a black stroke. The visualization displays a categorical color legend and loads synthetic static data from a local module after a simulated delay.

BBismark Kofi Owusu Sarfo

81% match