Skip to main content
SimilarExport ZIP
100%

Cars scatter

✓ Published0🌍 Public
MMarrnj2
Last edited May 19, 2020
Created on May 18, 2020
Forked from Customizing Axes

This scatterplot visualizes the relationship between vehicle weight and acceleration for a dataset of cars, rendering each car as a semi-transparent circle using SVG. The x-axis maps weight, the y-axis maps acceleration, with both axes scaled linearly and “niced” via D3’s `scaleLinear` and `extent`. The code uses D3 v5’s `csv`, `select`, `axisBottom`, and `axisLeft` to load data, append circles, and draw labeled ticks. Data comes from the auto-mpg CSV dataset, with axes customized for readability.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and acceleration for a dataset of cars, with each point representing an individual car. The visualization uses D3 v5 to load CSV data from GitHub, scales the x and y axes with `scaleLinear`, and renders circles as SVG elements. Axis labels and a title are added via SVG text elements, while `axisBottom` and `axisLeft` create the tick marks and grid lines. The chart highlights the inverse correlation between these two variables across the sample.

WWiebsonice
95% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between weight and acceleration for cars from the Auto MPG Data Set, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data to SVG circles, with gridlines and labeled axes. The code loads CSV data via `d3.csv`, converts numeric fields, and renders the plot through an SVG container. Axis labels and a title use D3’s text append method, while styling is handled through CSS.

MMaciek Sitkowski
95% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between weight and acceleration for cars from the Auto MPG Data Set, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data to SVG circles, with gridlines and labeled axes. The code loads CSV data via `d3.csv`, converts numeric fields, and renders the plot through an SVG container. Axis labels and a title use D3’s text append method, while styling is handled through CSS.

MMaciek Sitkowski
95% match
Loading thumbnail…

Cars

This scatterplot displays the relationship between vehicle weight and acceleration for a dataset of cars, with each circle representing an individual model. The visualization uses D3 v5 to load CSV data, scale linear axes with formatted tick labels, and render SVG circles with custom styling. Axis labels and a title are positioned within SVG groups, while grid lines are created through tick size adjustments. The chart emphasizes data distribution through minimal circle styling and a clean, muted color palette.

AAveryBurke
94% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and acceleration using the auto-mpg dataset, with each car represented as a red, semi-transparent circle. The chart uses a linear scale for both axes and includes labeled axes with formatted tick marks. Built with D3 v5, the code applies scaleLinear, axisBottom, and axisLeft functions within an SVG canvas, and loads data from a CSV file hosted on vizhub.com.

Zzakaria badri
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between car acceleration and weight using the UCI Auto MPG dataset, with each red semi-transparent circle representing an individual car model. The visualization employs D3 v5’s scaleLinear, axisBottom, and axisLeft functions to map data values to SVG coordinates, rendering axes with tick marks and custom labels. The code fetches the CSV data via d3.csv, converts numeric fields, and draws circles with a fixed radius, while styles.css controls circle opacity and typography. The margin-based layout and appended axis labels, such as "Weight" and "acceleration," clarify the plotted dimensions.

MMartin Lauf
92% match
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle's radius encoding acceleration. Based on the auto-mpg dataset, the plot uses D3 v5's `scaleLinear` for position and size scaling, along with `axisBottom` and `axisLeft` to render grid lines and tick marks. Circles are appended as SVG elements with opacity and hover effects. A custom tooltip displays acceleration values on mouseover, while axis labels and a title clarify the chart’s meaning, all styled through external CSS.

Vvladvaculin
92% match
Loading thumbnail…

Car Acceleration versus Weight Scatter Plot.

This scatter plot visualizes the relationship between car weight and acceleration, with each circle representing a vehicle from the auto-mpg dataset. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to map the data points onto an SVG canvas. The plot includes labeled axes and a title, with circles rendered at a fixed radius using the `selectAll` and `enter` pattern. The data is loaded asynchronously via the `csv` function and parsed into numeric values for weight and acceleration.

XX. N. Chu
92% match