example of scatter plot

100%

example of scatter plot

✓ Published1🌍 Public

Last edited Apr 19, 2022

Created on Apr 19, 2022

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing an individual car. The plot uses D3’s `scaleLinear` for both axes and renders circles via SVG, with axes customized using `axisBottom` and `axisLeft`, including tick lines and labels. Data is loaded from a CSV file containing auto-mpg statistics, and the visualization distinguishes overlapping points through semi-transparent red circles. The chart title is displayed at the top, and all styling is handled through external CSS.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a data point. The plot uses D3.js v5, employing scaleLinear for axes, axisBottom and axisLeft for tick marks, and data from the auto-mpg.csv file. The SVG rendering displays circles positioned via xScale and yScale mappings, with a labeled x-axis denoting the title "Scatter Plot" and tick lines extending across the chart.

LLonwabo11

93% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, sourced from the auto-mpg dataset. Each red semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The D3 v5 code uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for labeled grid lines, and appends circles via `selectAll('circle').data().enter()`. The SVG output includes axis labels and a title, with styling controlled by external CSS.

LLonwabo11

93% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a vehicle. The data is loaded from a CSV file containing automotive specifications (auto-mpg dataset) and rendered as an SVG graphic using D3 v5. The code employs `d3.scaleLinear` for both axes, `d3.extent` to compute data domains, and `d3.axisBottom` and `d3.axisLeft` for axis generation with grid lines. Semi-transparent steel-blue circles highlight data density, while axis labels and a title provide context.

ZZ-Richard

93% 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 D3’s `scaleLinear` for both axes and renders the data as semi-transparent circles, with gridlines from `axisBottom` and `axisLeft`. The data is loaded from a CSV file via `csv()`, and numeric fields are parsed before plotting. Axes are customized with tick labels and rotated text, while the title “CARS yo” appears above the plot.

CCatriona

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

93% match

Loading thumbnail…

scatter plot

This scatter plot displays the relationship between horsepower and weight for cars, using red semi-transparent circles scaled along linear axes. The visualization loads data from a remote CSV file and renders it as an SVG, with D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs generating gridlines and tick marks. Axis labels and a title clarify the chart, while margins and redundant axis titles structure the layout. The code imports specific functions from D3 v5 and applies CSS styling for opacity and typography.

Zzhangfa

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

92% match