Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published1🌍 Public
Llanzosuarez
Last edited Jul 3, 2020
Created on Jul 2, 2020
Forked from Customizing Axes

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.

AI-generated description

Scatter Plot

MIT Licensed

Similar vizzes

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 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
95% match
Loading thumbnail…

Scatter Plot 101

This scatter plot shows the relationship between horsepower and weight for cars from the auto-mpg dataset, with red semi-transparent circles marking each vehicle. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate gridlines. Axis labels and a title are added as text elements, while margins and padding position the chart within the 960×500 SVG canvas.

Ddata-inside
95% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between car horsepower and weight using data from the auto-mpg dataset. Red semi-transparent circles are plotted on an SVG canvas, with axes labeled and styled via D3 v5's scaleLinear, axisBottom, and axisLeft APIs. The visualization includes a title and axis labels, with gridlines generated through tickSize settings. Data is loaded as CSV and parsed into numeric values before rendering.

Pprincit
94% 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
94% match
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
94% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a collection of cars, with each car represented as a red, semi-transparent circle. The visualization uses D3.js (v6) to load the auto-mpg dataset via `d3.csv`, parse numerical values, and render the chart as an SVG. Linear scales from `d3.scaleLinear` map weight and horsepower to x and y coordinates, while `d3.axisBottom` and `d3.axisLeft` generate the axes with gridlines. Axis labels and a title are added as text elements, and CSS styles the circles, ticks, and labels for visual clarity.

MMajaha21
94% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg CSV file. Each red, semi-transparent circle represents a car, with its position determined by the d3.scaleLinear scales mapping weight to the x-axis and horsepower to the y-axis. The code uses d3.csv to load data, d3.axisBottom and d3.axisLeft to render gridlines and tick labels, and SVG circles within a margin-based layout. Axis labels and a title are appended as text elements, with styling defined in CSS.

Aanuj1450
94% match