Making a scatterplot

100%

Making a scatterplot

✓ Published0🌍 Public

Last edited May 6, 2020

Created on May 6, 2020

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.

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.

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

92% match

Loading thumbnail…

Cars Scatter Plot

This visualization uses D3 v5 to create a scatter plot of cars, showing the relationship between horsepower on the x-axis and weight on the y-axis. Each circle represents a car from the auto-mpg dataset, with semi-transparent pink markers revealing density. The chart includes labeled axes with custom tick formatting and a title. D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions handle scaling and axis generation, while data is loaded via `d3.csv` and rendered as SVG circles.

Iimmanentdomain

91% match

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The D3 v5 code uses `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with gridlines via `tickSize`. Circles are appended to an SVG group, and the title text is positioned manually. The visualization demonstrates custom axis formatting with `format('.3s')` and removes default domain lines for a cleaner appearance.

Ppei9223

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

91% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, while data is loaded via `csv` from an external auto-mpg dataset. Circles are rendered as SVG elements with a steelblue fill and partial opacity, and the chart includes labeled axes and a title, all drawn within an SVG canvas sized 960 by 500 pixels.

TTimmyLu

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

91% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing an individual car model. The visualization uses D3 v5’s `csv` loader to fetch data from an external URL, then applies `scaleLinear` and `extent` to map the variables to SVG coordinates. Axes are rendered using `axisBottom` and `axisLeft`, with tick marks extending across the plot area. The SVG circles are styled with red fill and opacity, and axis labels and a title are added via SVG text elements.

NNkwachi Abel

90% match

Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The plot uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines, while the data is loaded via `csv` from an external auto-mpg dataset. Circles are rendered as SVG elements, and axis labels and a title are added as text. The margins and `nice()` scaling ensure readable axis limits.

Uumihito

90% match