Scatter Plot with Import Maps

100%

Scatter Plot with Import Maps

✓ Published1🌍 Public

Last edited Oct 31, 2021

Created on Oct 26, 2021

This scatter plot visualizes the relationship between horsepower and weight for automobiles, with each circle representing a vehicle from the auto-mpg dataset. The code uses D3 modules loaded via import maps, including d3-selection, d3-fetch, d3-scale, d3-array, and d3-axis, to fetch CSV data, create linear scales, and render SVG circles and axes. The visualization fills the browser window, with axes labeled through d3-axis and data mapped from the CSV file fetched from a remote URL.

AI-generated description

Scatter plot with D3.

Makes use of import maps

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

90% 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

89% 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

89% 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

89% 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

89% match

Loading thumbnail…

Scatter Plot static

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red, semi-transparent circle representing a vehicle. The code uses D3 v6 to load CSV data, apply linear scales with nice-ticked extents, and render SVG axes with gridlines. Axis labels and a title are added using D3 selection methods, while styling is handled through CSS classes for ticks, labels, and circle opacity.

Aarra131

89% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle from the auto-mpg dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, while `csv` loads the data from a remote URL. Each data point is appended as an SVG circle, with styling applied via CSS for fill color and opacity. The visualization includes labeled axes and a title, demonstrating how D3 handles margin-based layouts and custom tick formatting in an SVG rendering.

Sssingh175

89% match

Loading thumbnail…

Scatter Plot for D3

This scatter plot visualizes the relationship between horsepower and weight for cars in the auto-mpg dataset. Each red semi-transparent circle represents a car, with its position determined by the `scaleLinear` mappings for the x and y axes. The visualization is rendered as an SVG using D3 version 7.2.1, employing `axisBottom` and `axisLeft` for the labeled axes and data loaded via the `csv` function.

Aavirathtib

88% match