Skip to main content
SimilarExport ZIP
100%

d3 Starter cars scatter plot

✓ Published0🌍 Public
NNandeep
Last edited Apr 23, 2020
Created on Apr 23, 2020

This scatter plot visualizes cars from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower on the x-axis against weight on the y-axis. Each red, semi-transparent circle represents a vehicle, with axes labeled explicitly and a title noting “Cars : Horsepower vs. Weight.” The code uses d3.csv to load data, d3.scaleLinear with .nice() for scaling, and d3.axisLeft and d3.axisBottom for tick marks, with custom tick sizing and padding. Axis labels and title are appended as SVG text elements, while circles are added via data joins.

AI-generated description

data visualisation with D3.js : stopped at 04:34:37

From freeCodeCamp tutorial, on youtube FCC channel, by Curran Kelleher.

This scatter plot shows data about cars, from UCI Machine Learning Repository : Data MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Starter cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The visualization uses d3.scaleLinear with explicit margins and axes, rendered as SVG. Axis labels and a title are added using d3.axisBottom and d3.axisLeft. Data is loaded as CSV and parsed with D3’s csv method.

GgitSushi
96% match
Loading thumbnail…

d3 Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, positioned along linear scales for both variables. The visualization is rendered as an SVG using d3’s selection, scaleLinear, axisBottom, axisLeft, extent, and csv methods. Axis labels and a title annotate the plot, with tick lines and circles styled via the accompanying CSS file.

JJohnPaulPagelerJr
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Using d3.scaleLinear for both axes and d3.axisBottom/axisLeft for tick marks, it renders red, semi-transparent circles with a fixed radius in an SVG. The code loads data asynchronously via d3.csv, coerces numeric fields, and includes custom axis labels and a title styled with CSS.

Vveagy
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Red semi-transparent circles encode each car’s values, with axes labeled “Horsepower” and “Weight.” Built with D3 v5, the code uses `d3.csv` for loading, `d3.scaleLinear` with `d3.extent` for scales, and `d3.axisBottom` and `d3.axisLeft` to render gridlines and tick labels. The SVG output includes a title and styled axis text via CSS.

Nnkohdatavis
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. It uses D3 v5’s `scaleLinear` and `axisLeft`/`axisBottom` to map the quantitative variables and render axes with gridlines. The code loads data via `csv`, applies numeric parsing, and draws semi-transparent red circles as SVG elements. Axis labels and a title are added using D3 selections, with styling defined in an external stylesheet.

Ssailaja savanam
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle represents a car, with its position determined by d3.scaleLinear scales and its size fixed. The code uses d3.csv to load the data, d3.axisBottom and d3.axisLeft to render axes with grid lines, and appends SVG circles with a red, semi-transparent fill. Axis labels, a title, and tick styling are added via D3 selections and CSS classes.

Ffurkaanutkuu99
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red circle represents a car, with its position determined by the d3.scaleLinear scales mapping horsepower to the x-axis and weight to the y-axis. The code uses d3.csv to load the data, d3.axisBottom and d3.axisLeft for the labeled axes, and d3.extent to compute the domain. The SVG rendering includes custom axis labels and a title, with circle opacity set via CSS.

JJared Tanner
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, with position determined by d3.scaleLinear mappings for both axes, along with axis labels and a title. The code uses d3.csv to load the data, d3.axisLeft and d3.axisBottom for tick marks, and d3.extent to set scale domains. The SVG rendering approach includes gridlines via tickSize and a rotated axis label.

Ttoeric
92% match