Try-out scatterplot (v2?)

100%

Try-out scatterplot (v2?)

✓ Published0🌍 Public

Last edited Aug 17, 2026

Created on Aug 17, 2026

This scatter plot shows the relationship between horsepower and weight for a collection of cars, using red semi-transparent circles on a light gray grid. It is built with D3 v5, using an SVG canvas and the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load and scale the data from an auto-mpg CSV file. The chart includes labeled axes, tick marks, and a title, with the visual encoding relying on circle position to convey the correlation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a vehicle. Built with D3 v5, the visualization uses `scaleLinear` to map data values to SVG coordinates, `axisBottom` and `axisLeft` for the axes, and `extent` to compute domains. Data is loaded from a CSV via `csv`, and the SVG output renders circles with fixed radius, axis labels, and a title.

Ccornshoots

91% match

Loading thumbnail…

Car Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars, with each vehicle represented by a semi-transparent red circle. The visualization uses a D3.js v5 SVG rendering pipeline, employing `scaleLinear` for coordinate mapping, `axisLeft` and `axisBottom` for the chart axes, and `extent` to determine the data domains. The underlying dataset is loaded via the `csv` function from auto-mpg data, and axis labels and a title are annotated using D3’s text elements.

PPabloReyesBetanzo

91% match

Loading thumbnail…

scatter plot

This scatter plot displays the relationship between horsepower and weight for cars, using red semi-transparent circles scaled along linear axes. The visualization loads data from a remote CSV file and renders it as an SVG, with D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs generating gridlines and tick marks. Axis labels and a title clarify the chart, while margins and redundant axis titles structure the layout. The code imports specific functions from D3 v5 and applies CSS styling for opacity and typography.

Zzhangfa

91% match

Loading thumbnail…

Scatter Plot 2

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg CSV file. Each car is represented as a semi-transparent red circle, with axes labeled "Horsepower" and "Weight" and a title "Cars Report." The visualization uses D3 v7 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to coordinates and draw the chart. Grid lines and custom tick styling enhance readability.

陳陳泰元

90% match

Loading thumbnail…

Cars Scatter plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each red circle representing a vehicle. The visualization uses D3 v5 to load CSV data and construct an SVG-based chart with linear scales, axes, and gridlines. It employs `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to map data values to screen coordinates. The chart includes axis labels, a title, and formatted tick marks, with circles rendered semi-transparent to reveal overlapping points.

SShane Carey

90% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a set of cars, with each circle representing a vehicle. The visualization uses D3.js v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render SVG axes with gridlines. Data is loaded from a CSV file via the `csv` function, parsed into numeric fields, and drawn as semi-transparent purple circles. The chart includes axis labels and a title, with margins calculated from the SVG’s dimensions.

WWhitney Hung

90% match

Loading thumbnail…

Cars Scatter Plot

This example visualizes the relationship between horsepower and weight for a dataset of cars, with each car represented as a semi-transparent red circle. The scatter plot uses D3.js version 5, leveraging scales such as `scaleLinear`, axes generated with `axisBottom` and `axisLeft`, and data loaded via `csv` from a remote dataset. The SVG rendering includes styled axis ticks, grid lines, and labeled axes, with circle positions mapped through `xScale` and `yScale` based on the data’s extent.

JJasonXQH

90% match

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a vehicle. The y-axis is reversed so that lighter cars appear higher on the chart, and both axes include labeled gridlines. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG circles and a titled chart with margin-based layout. The data is loaded from a remote CSV file and parsed into numeric values before plotting.

RRiccardo Pressiani

90% match