Skip to main content
SimilarExport ZIP
100%

Making a Scatter plot

✓ Published0🌍 Public
MMahaveer Jain
Last edited Aug 23, 2021
Created on Aug 23, 2021
Forked from Making a Bar Chart

This example displays a scatter plot of vehicle weight versus horsepower, with a point radius of 25 and semi-transparent teal circles. The visualization uses D3.js v7 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom` and `axisLeft` for ticks. A heading appears at the top, with axis labels styled via CSS. The data comes from an external CSV file loaded using `csv`, parsed for numeric values, and rendered within margins specifying inner dimensions.

AI-generated description

A demonstration of basic HTML and CSS.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

This example shows a scatter plot of car weight against horsepower, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to map data values to SVG coordinates, while `csv` loads the auto-mpg dataset from a remote URL. Gridlines are drawn via tick sizes, and axes labels and a title are appended as SVG text elements.

Ggmille22
90% match
Loading thumbnail…

Scatter Plot

This example shows a scatter plot of car horsepower versus weight, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs within an SVG container, loading data from a CSV via `d3.csv`. Circles are rendered with purple fill and opacity, while grid lines from tick marks and styled axis labels enhance readability. The code dynamically maps data domains to pixel ranges and applies margins for layout.

Eexchoco
90% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, using a red, semi-transparent circle for each car. The data comes from a CSV file about vehicle specifications. The visualization is built with D3 version 5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. Axis labels and a title are added as text elements, with grid lines drawn via tick sizing, all rendered in an SVG canvas with custom CSS styling.

AAli Ahmed
89% match
Loading thumbnail…

Making a scatterplot

This example shows a scatterplot of cars with weight on the x-axis and horsepower on the y-axis, with each point representing a vehicle and a title reading “Cars.” The visualization uses D3 v5’s `csv` to load auto-mpg data, `scaleLinear` and `extent` to map values, and `axisBottom` and `axisLeft` to draw custom axes with removed domain lines. Circles are appended to an SVG container, with axis labels and a title added as text elements, styled using CSS classes for ticks, labels, and overall layout.

VVinh H. Le
88% match
Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between horsepower and weight for individual vehicles, with each red circle marking one data point. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the CSV data loaded via `csv` from a GitHub gist, rendering SVG circles with `selectAll` and `append`. Axis ticks extend across the plot via `tickSize`, and labels and a title are added as SVG text elements, with styling from CSS.

AAli Ahmed
88% match
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between vehicle horsepower and weight, with each circle representing a car from the provided dataset. The D3 v5 code uses `scaleLinear` to map the data to SVG coordinates, and `axisBottom` and `axisLeft` to generate the axes with gridlines. Data is loaded via `csv` from a remote URL, and the circles are rendered with a red fill and opacity. The chart includes axis labels and a title, styled through CSS.

Zzren2
88% match
Loading thumbnail…

Cars Scatter Plot with d3

This example visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. The scatter plot displays individual cars as semi-transparent red circles, with weight on the x-axis and horsepower on the y-axis. The visualization is built using D3 v6, employing `scaleLinear` for both axes, `extent` to set domains, and `axisLeft` and `axisBottom` with gridlines. It loads CSV data via `csv()` and renders to SVG, including custom axis labels and a chart title.

MMuhammad Jarir Kanji
88% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with tick marks. Data comes from a CSV file loaded via `csv`, and the SVG rendering applies a steelblue fill with opacity to the circles. The visualization includes a title, axis labels, and a margin-based layout to position the plot area.

Cceresfin
87% match