Skip to main content
SimilarExport ZIP
100%

Scatter Plot ++

✓ Published1🌍 Public
CChocoOrange
Last edited Jul 12, 2020
Created on Jul 12, 2020
Forked from Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. The D3.js (v5) code uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with gridlines drawn via negative tick sizes. It renders semi-transparent steel-blue circles via SVG, with categorical labels for the axes and title. The visualization applies the `extent` function for domain scaling and parses the CSV data to numeric values before rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, with each circle representing a data point from the auto-mpg dataset. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` APIs to map the data to SVG coordinates within a 960×500 canvas. Data is loaded asynchronously via `csv()` from a remote source, with numeric fields parsed before rendering. The plot includes labeled axes with tick marks spanning the full plot height and width, though the axis labels and titles are incomplete in the code.

LLonwabo11
94% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Circles are plotted on a linear scale for both axes, with semi-transparent steelblue fill to reveal overlapping points. The visualization includes labeled axes, tick marks that extend across the plot, and a title, all rendered as SVG. The code uses D3 v5 methods including `csv` for data loading, `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `selectAll` with data joins to create the circles.

MMartin Christensen
93% 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
93% 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
92% match
Loading thumbnail…

Fork of Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset. The visualization employs d3.scaleLinear for both axes, with axisBottom and axisLeft generating tick marks and grid lines. Data points are rendered as semi-transparent steelblue circles via SVG circle elements, sized at a constant radius of 18 pixels. The chart includes axis labels and a title, with all styling handled through external CSS.

Ttheaddies
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset loaded via `d3.csv`. The visualization employs `d3.scaleLinear` with `d3.extent` and `.nice()` to map weight on the x-axis and horsepower on the y-axis, with blue semi-transparent circles rendered as SVG elements. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, complete with rotated labels, tick marks, and a title. The chart uses margins to position a grouped `<g>` element, demonstrating fundamental D3 data binding and scales.

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

Scatter Plot

This scatter plot uses D3 v5 to visualize the relationship between horsepower and weight in the auto-mpg dataset. The SVG rendering displays each vehicle as a circle, with its position determined by the d3.scaleLinear scales for the x- and y-axes after parsing the CSV data. The d3.axisBottom and d3.axisLeft functions generate the axes, while the margin and inner dimensions shape the plot area.

LLonwabo11
92% match