Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published1🌍 Public
Aalisha-zemoso
Last edited Jul 18, 2022
Created on Jul 11, 2022
Forked from Formatting axis

This scatter plot visualizes the relationship between horsepower and weight for automobiles from the auto-mpg dataset, with each point representing a vehicle. The code uses d3.csv to load the data and d3.scaleLinear to map the values to SVG coordinates, while d3.axisBottom and d3.axisLeft generate the axes with formatted ticks. Circles are appended to the SVG container with a steelblue fill and 0.5 opacity. The chart includes a title and axis labels, with margins set around the plotting area to accommodate the axes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This example visualizes the relationship between horsepower and weight for cars, using a scatter plot where each circle represents a vehicle. The x-axis maps weight and the y-axis maps horsepower, with axis labels and a title displayed prominently. The code loads the auto-mpg dataset via `d3.csv`, parses numeric fields, and renders the plot using `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles. Axis ticks are styled with `d3.format` to abbreviate large numbers, and grid lines are generated via tick sizes.

AAndy Zhang
96% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The chart uses red, semi-transparent circles to show data density, and includes labeled axes and a title. Built with D3 v5, the code loads CSV data, applies linear scales via `scaleLinear`, and renders axes using `axisBottom` and `axisLeft`. The SVG output includes grid lines and custom styling from the accompanying stylesheet.

Kkshethia12
95% match
Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset loaded via d3.csv. The visualization employs d3.scaleLinear for both axes, with the x-axis representing weight and the y-axis horsepower. SVG circles with a fixed radius mark each data point, rendered in steelblue with 50% opacity. The chart includes labeled axes, grid lines created through axis tick sizing, and a title, all styled through the provided CSS.

VVPTomi
94% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes automotive data, showing the relationship between horsepower and weight for a dataset of cars. The visualization uses a D3.js v5 implementation with SVG rendering to plot red, semi-transparent circles on a Cartesian coordinate system. The code leverages d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to construct the scales and axes, with gridlines extending across the plot area. Data is loaded via d3.csv from an external auto-mpg dataset, and custom axis labels and a graph title are added as SVG text elements.

Llanzosuarez
94% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Red, semi-transparent circles represent each car, with positioning determined by the d3.scaleLinear scales for both axes, while axis labels and tick marks are generated using d3.axisBottom and d3.axisLeft. The SVG rendering approach is used, with margins and inner dimensions calculated from the viewport, and the chart includes a title and rotated y-axis label. Data is loaded via d3.csv and parsed into numeric values before rendering.

WWayne716
94% match
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a single vehicle. The visualization uses D3.js version 5 to load CSV data, create linear scales for both axes, and render circles as SVG elements. Axis labels and tick marks are generated using d3.axisLeft and d3.axisBottom, while the chart includes a title and uses red semi-transparent circles to show data density. The React framework structures the page, and the code applies d3.scaleLinear with nice domain padding for cleaner axis ranges.

VVishwa246
94% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower for cars in the auto-mpg dataset, with each point representing an individual car. The visualization uses d3.csv to load the data, d3.scaleLinear with .nice() to map the weight and horsepower values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. The chart is drawn as an SVG with semi-transparent steelblue circles, and the x-axis labels are formatted using d3.format to display numbers in abbreviated form.

Ttrungngonptit
94% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The code loads data via `d3.csv`, scales values with `scaleLinear`, and renders axes using `axisLeft` and `axisBottom`. An SVG canvas displays the points with red, semi-transparent circles, while axis labels and a title are added as text elements, all styled through the provided CSS.

SSuman Choudhary
94% match