Skip to main content
SimilarExport ZIP
100%

EP04 | 學會 D3.js 製作圖表 - 製作散佈圖(Scatter Plot)

✓ Published1🌍 Public
CCeleste6666
Last edited Nov 9, 2021
Created on Nov 5, 2021

This scatter plot displays the populations of the top 12 countries in 2020, with each circle representing a country positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG axes and circles. Data is loaded from a CSV file via `d3.csv`, with population values converted from strings to numbers and multiplied by 1000. Custom styling through CSS classes formats tick labels, axis lines, and the title.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

EP03 | 學會 D3.js 製作圖表 - 製作長條圖(Bar)

This bar chart visualizes the populations of the top twelve countries in 2020, using horizontal bars sorted by population size. Built with D3.js v7 and rendered as an SVG, the chart applies `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It uses `axisLeft` and `axisBottom` to generate axes, with custom tick formatting to display billions. The data is loaded from a CSV file, and CSS classes style the title and axis labels.

CCeleste6666
90% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 countries, with each circle’s horizontal position representing population size and vertical position mapping to the country name. The visualization uses d3.csv to load the data and d3.scaleLinear and d3.scalePoint to construct the axes, while d3.axisLeft and d3.axisBottom render the grid and ticks. Circles are appended to an SVG, with a formatted tick label replacing “G” with “B” for billions. The chart includes a title and axis label, styled via external CSS.

Ddacoylo
83% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries, with countries on the y-axis and population on the x-axis. The code uses D3 v5 within a React framework, loading data from a CSV file and rendering SVG circles. It employs `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisBottom` and `d3.axisLeft` to generate axes, and formats tick labels using `d3.format`.

Jjiayuansun
83% match
Loading thumbnail…

Just Another Scatter Plot (he jianfeng)

This scatter plot visualizes population data for the top 10 most populous countries, showing each country's population on the x-axis using a linear scale with tick formatting that abbreviates large numbers. The y-axis uses a point scale to position each country as a separate categorical label. Built with React and D3 v6, the visualization loads CSV data from a remote URL, maps it to circle positions, and renders axes with custom grid lines and tick styling. Titles and axis labels are added using SVG text elements. While the code references a different dataset and column names, the displayed data uses the provided `data.csv` file.

Ccimadomo
82% match
Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady
82% match
Loading thumbnail…

Scatter Plot with D3.js

This scatter plot displays the population of the top 10 most populous countries, with countries arranged on the y-axis and population values on the x-axis. Built with D3.js v7, it uses `scaleLinear` and `scalePoint` to map data from a CSV file to SVG coordinates, with circles rendered for each country. The chart includes grid lines via `axisBottom` and `axisLeft`, and formats population numbers using `format('.3s')` to display values in billions.

CCarloWK1202
82% match
Loading thumbnail…

Making a Scatter Plot with D3.js

This example shows a scatter plot of the top 10 most populous countries, using population data from a CSV file and rendering circles for each country. It uses D3.js v6 with SVG, employing `scaleLinear` for the population axis, `scalePoint` for country placement, and `axisLeft`/`axisBottom` with custom tick formatting. Grid lines are drawn via negative tick sizes, and the chart includes a title and axis label.

XXin Li
82% match
Loading thumbnail…

Scatter Plot with D3.js

This scatter plot uses a categorical vertical axis and a linear horizontal axis to display the population of the top 10 most populous countries in 2018. Built with D3.js v5 and React, it renders as an SVG, reading data from a local CSV file. The code uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart, with circles sized at a fixed radius of 18 pixels.

DDaniel Rivera
82% match