Making a Scatterplot with D3

100%

Making a Scatterplot with D3

✓ Published0🌍 Public

Last edited Feb 27, 2020

Created on Feb 27, 2020

This example visualizes the relationship between acceleration and horsepower for cars using a scatterplot rendered as SVG. The code loads an auto-mpg CSV dataset via d3.csv, converts numeric fields, and scales the data with d3.scaleLinear. Axes are generated using d3.axisLeft and d3.axisBottom, with grid lines created by setting tickSize. The plot includes labeled axes, a title, and orange semi-transparent circles positioned using xScale and yScale based on each car’s acceleration and horsepower values.

AI-generated description

This scatterplot how Acceleration is in relation to Horsepower, based on a cars dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between acceleration and horsepower for cars from the auto-mpg dataset. D3’s scaleLinear, axisBottom, and axisLeft functions map the quantitative values, while circles are appended to an SVG container. The code loads CSV data via d3.csv, converts numeric fields, and uses margin-based layout with tick marks and axis labels. Red translucent circles reveal density, with axes formatted using d3.format and a title added manually.

Ccledevoute

91% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars, with each circle representing a vehicle from the auto-mpg dataset. It demonstrates axis customization using d3.axisLeft and d3.axisBottom, including tick sizing, padding, and label styling. The code uses d3.scaleLinear with extent-based domains and nice() to set scales, while d3.csv loads data from a remote URL. SVG rendering shows semi-transparent steelblue circles, and the plot includes a title and axis labels with custom fonts and colors.

Sshanmango

90% match

Loading thumbnail…

Making a scatterplot

This example shows a scatterplot of cars with weight on the x-axis and horsepower on the y-axis, with each point representing a vehicle and a title reading “Cars.” The visualization uses D3 v5’s `csv` to load auto-mpg data, `scaleLinear` and `extent` to map values, and `axisBottom` and `axisLeft` to draw custom axes with removed domain lines. Circles are appended to an SVG container, with axis labels and a title added as text elements, styled using CSS classes for ticks, labels, and overall layout.

VVinh H. Le

87% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for a dataset of cars. Each circle represents a car, with its x-position mapped to horsepower and y-position to acceleration using linear scales. The visualization is built with D3 v5, using SVG rendering and scaleLinear, axisBottom, and axisLeft components. The data is loaded from a CSV file on VizHub, and the code applies .nice() to smooth axis domains and includes formatted axis labels and a title.

Vvic126

87% match

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars from the UCI Auto MPG dataset, with each circle representing an individual car. Built using D3 v6, the visualization employs scaleLinear for axes, axisBottom and axisLeft for ticks, and SVG circles with a green, semi-transparent fill. The code loads CSV data from a remote URL, parses numeric fields, and renders the chart with labeled axes and a title using D3’s selection and CSV modules.

Nnexus1058

87% match

Loading thumbnail…

Scatter Plot

This example visualizes the relationship between horsepower and weight for cars, using a scatter plot where each circle represents a vehicle. The x-axis maps weight and the y-axis maps horsepower, with axis labels and a title displayed prominently. The code loads the auto-mpg dataset via `d3.csv`, parses numeric fields, and renders the plot using `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles. Axis ticks are styled with `d3.format` to abbreviate large numbers, and grid lines are generated via tick sizes.

AAndy Zhang

86% match

Loading thumbnail…

Scatter Plot

This example shows a scatter plot of car horsepower versus weight, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs within an SVG container, loading data from a CSV via `d3.csv`. Circles are rendered with purple fill and opacity, while grid lines from tick marks and styled axis labels enhance readability. The code dynamically maps data domains to pixel ranges and applies margins for layout.

Eexchoco

86% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. The D3.js code uses `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for tick marks and gridlines. Data is loaded via `csv()` from a remote URL, and each vehicle is rendered as a circle with a fixed radius. Axis labels and a title are added as SVG text elements, with styling defined in CSS for the tick marks and label fonts.

CChip

86% match