Skip to main content
SimilarExport ZIP
100%

Lesson 3

✓ Published1🌍 Public
0007ebey
Last edited Nov 17, 2020
Created on Feb 22, 2020
Forked from Lesson 3

This visualization displays a scatter plot of automobile data, plotting acceleration against weight for individual car models. The chart features labeled axes, gridlines, and a title, with data points rendered as semi-transparent steel-blue circles. Built with React and D3 v5, the code uses `scaleLinear`, `axisLeft`, and `axisBottom` from the D3 API to construct the plot, while data is loaded asynchronously from a CSV file hosted on VizHub. The visualization also demonstrates declarative SVG rendering and custom styling for a polished, client-ready appearance.

AI-generated description

A bare minimum HTML page.

See also React Starter.

This data was taken from The world bank data website

MIT Licensed

Similar vizzes

Loading thumbnail…

Automobile data summary

This scatterplot visualizes the relationship between automobile weight and acceleration, with each car represented as a semi-transparent blue circle. The data is loaded from a remote CSV file and rendered as an SVG using D3 v5. The chart employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for grid lines and tick labels, and includes a rotated y-axis label. The code uses `csv` to parse the dataset and `extent` to determine the scale domains.

BB Sundaresan
85% match
Loading thumbnail…

Cars Scatterplot

A scatterplot of 1970s cars, plotting acceleration against weight, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data from the auto-mpg dataset, rendering as SVG within a React framework. Axes include tick marks and labels, with a title and axis titles added via SVG text elements.

JJordy Fronik
84% 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
83% match
Loading thumbnail…

cars scatter plot

This visualization shows the relationship between horsepower and weight for a collection of cars, with each car represented as a semi-transparent steel-blue circle. The scatter plot includes labeled axes, a title, and gridlines to aid readability. Built with React and D3 v5, the code uses `d3.csv` to load the auto-mpg dataset, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisBottom` and `d3.axisLeft` for the axes. All elements are rendered as SVG, leveraging the margin convention to position the plot within the fixed 960x500 canvas.

Ssingularity6033
83% match
Loading thumbnail…

Cars Scatter Plot with D3.js

This example visualizes the relationship between horsepower and weight for a dataset of cars, with each vehicle represented by a semi-transparent red circle. The code uses D3.js v5's `csv` method to load data from a remote file, `scaleLinear` to map data values to pixel coordinates, and `axisBottom` and `axisLeft` to render axes with grid lines. The scatter plot is drawn as an SVG, and the chart includes labeled axes and a title, with margins and padding handled manually.

HHwl98
83% match
Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for over 100 car models, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data from a CSV file onto an SVG canvas. Semi-transparent steelblue circles reveal density patterns, while labeled axes and a title clarify the comparison. The code parses numeric fields and renders the chart within a React starter template.

AAmr Eldemerdash
82% match
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
82% match
Loading thumbnail…

Cars scatter

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.

MMarrnj2
82% match