Scatter Plot

100%

✓ Published1🌍 Public

Last edited Jul 20, 2020

Created on Jul 20, 2020

This scatter plot displays the populations of prefectures in eastern Japan, with each circle positioned along a linear x-axis for population values and a point-based y-axis for prefecture names. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data from the CSV file, which lists prefecture names and raw population figures multiplied by 1,000. Axes are rendered with `axisLeft` and `axisBottom`, including tick lines and formatted labels via `format('.2s')`. The chart includes a title and an axis label, with circles styled in steelblue.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the population of Japanese prefectures as a scatter plot, with each circle representing a prefecture positioned by population size on the x-axis and prefecture name on the y-axis. The chart uses React components to render SVG elements, with d3.scaleLinear for both axes and d3.csv for loading data from a GitHub-hosted dataset derived from United Nations World Population Prospects 2019. Circle marks include native SVG title tooltips showing formatted population values, and the styling uses custom CSS with the Poppins font.

Vvanquisher2000

83% match

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the populations of 19 eastern Japanese prefectures, using data from the United Nations World Population Prospects 2020 estimates, converted to absolute values (multiplied by 1,000). Built with D3 v5, the visualization maps population to a linear scale (`scaleLinear`) for the x-axis and prefecture names to a band scale (`scaleBand`) for the y-axis, rendering bars as SVG `rect` elements. Axes are added via `axisLeft` and `axisBottom`, with all marks styled in steel blue using a global CSS rule.

Ddaigokawabe

80% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population counts for East Japan’s most populous prefectures, with custom-styled axes for readability. It loads CSV data using `d3.csv`, scales populations with `d3.scaleLinear` and prefectures with `d3.scaleBand`, and renders bars as SVG `rect` elements. The axes are built with `d3.axisLeft` and `d3.axisBottom`, using `d3.format` for compact number labels and custom tick sizes and gridlines. Axis labels and titles are added manually, with the default domain lines removed for a cleaner design.

Ddaigokawabe

77% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of population figures for prefectures in East Japan, with each bar’s length proportional to the population value. It customizes both axes: the y-axis removes its line and tick marks for a cleaner look, while the x-axis uses `d3.axisBottom` with a `.2s` tick formatter (e.g., “13.7M”) and spans the full chart height via negative tick sizes. The chart is rendered with D3 v5, loading data from a CSV, and uses `scaleLinear` and `scaleBand` for positioning.

VVikil Lakkavatri

76% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the populations of the ten most populous countries, with circles 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`, reading data from a CSV file. Population values are multiplied by 1000, formatted with ticks using `format('.3s')`, and rendered as steelblue circles in an SVG. Grid lines extend across the plot, with axes labels and a title.

SSamuel Elbaz

75% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the ten most populous countries, with each country positioned along the y-axis and its population on the x-axis. The visualization uses d3.csv to load the data, then applies d3.scaleLinear for the population axis and d3.scalePoint for the categorical country axis. D3’s axisBottom and axisLeft generate the gridlines and tick labels, with custom tick formatting converting values to abbreviated units. The chart renders as SVG circles styled with steelblue fill, and includes a title and axis label.

KKazushige Okuma

75% match

Loading thumbnail…

散点图

This scatter plot displays the population of six global regions in 2019, using circles positioned along a point scale for regions and a linear scale for population values. The chart includes labeled axes, gridlines, and a title, with data loaded from a CSV file using d3.csv. The code employs d3.scalePoint, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.format to render the visualization as SVG, applying a nice() function to the population scale for cleaner tick values.

Lluojiandan

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

74% match