Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
AAndy Zhang
Last edited Oct 12, 2020
Created on Oct 12, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

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.

Aalisha-zemoso
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…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3's `scaleLinear` for axis scaling and `extent` to compute data domains, rendered as SVG circles with semi-transparent steelblue fill. Axes are generated using `axisLeft` and `axisBottom` with tick lines and labels, and the plot includes labeled axis titles and a main title. The data is loaded from a CSV file and parsed into numeric values before rendering.

Bbrett@cloudaccelerator.co
95% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. The D3.js code uses `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for tick marks and gridlines. Data is loaded via `csv()` from a remote URL, and each vehicle is rendered as a circle with a fixed radius. Axis labels and a title are added as SVG text elements, with styling defined in CSS for the tick marks and label fonts.

CChip
95% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The code loads CSV data via d3.csv, parses numeric fields, and renders circles using D3 v5's scaleLinear, axisBottom, and axisLeft within an SVG. Grid lines are generated through tickSize, while axis labels and a title are appended as SVG text elements.

BbeauMarko
95% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point representing a vehicle. The chart uses a red, semi-transparent circle for each data point, and includes labeled axes for horsepower and weight. Built with D3 v5, the code loads the auto-mpg dataset from a CSV file, scales the data using `scaleLinear`, and renders the visualization as an SVG. The axes are configured with `axisBottom` and `axisLeft`, and the plot is styled with custom CSS for tick marks, labels, and the title.

LLonwabo11
95% 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…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for cars, with each red circle representing a vehicle. The code loads the auto-mpg dataset via `d3.csv` and uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.select` from D3 v5 to render an SVG chart. Axis labels and a title are added as text elements, while circles are drawn with an opacity of 0.3. Data values are parsed to numbers before rendering.

Hhamza.miftah@gmail.com
94% match