d3 Starter cars scatter plot

100%

d3 Starter cars scatter plot

✓ Published3🌍 Public

Last edited Apr 21, 2020

Created on Apr 21, 2020

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.

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

96% match

Loading thumbnail…

d3 Starter cars scatter plot

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.

NNandeep

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

94% 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 positions scaled by d3.scaleLinear and axes rendered using d3.axisBottom and d3.axisLeft. The code loads data via d3.csv, converts numeric fields, and draws the SVG chart with margins, axis labels, and a title. The visualization uses d3 v5 and renders entirely as SVG.

YYouhana Mikhaiel

94% 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, semi-transparent circle represents a car, with axes labeled accordingly. The visualization uses d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.csv to load data. SVG circles are appended via d3’s data join, with gridlines drawn by tick lines.

NNicholas Stebbings

94% 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. Each red semi-transparent circle represents a car, with positions determined by d3.scaleLinear for both axes. The chart includes labeled axes, grid lines, and a title, all rendered as SVG elements. The code uses d3.csv to load the data, d3.axisLeft and d3.axisBottom for the axes, and d3.extent to set the scales’ domains.

Mmcorace

94% 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. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft with grid lines, and circles are appended to an SVG with a red, semi-transparent fill and a fixed radius of 10 pixels. Data is loaded from a CSV file using d3.csv, then parsed and rendered.

Ddpratavieira

94% match

Loading thumbnail…

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 positions scaled by d3.scaleLinear and axes generated using d3.axisLeft and d3.axisBottom. The SVG rendering includes tick marks and labeled axes, with the chart built using D3 v5’s selection and scale APIs after parsing the CSV data with d3.csv.

Yyoghurtx

94% match