Scatter Plot

100%

✓ Published0🌍 Public

Last edited Jun 20, 2021

Created on Jun 20, 2021

This example displays a horizontal bar chart of population figures for ten countries from the 2019 UN Population dataset, loaded as CSV via D3’s `csv` utility. The visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, rendering SVG bars through React components. A native SVG `<title>` tooltip shows formatted population values upon hover, while the axis labels and ticks are styled with D3 `format` to abbreviate large numbers.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatterplot

This scatterplot displays the population of various countries using a horizontal bar chart layout, with each bar’s length proportional to the population value from the UN Population 2019 CSV dataset. The visualization is built with React and D3 v6, using `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis. SVG shapes are rendered through React components, with axes and marks created using `AxisBottom`, `AxisLeft`, and `Marks` components. Tooltips are implemented via native SVG `<title>` elements, and tick formatting uses D3’s `format` function to convert values to billions.

BBurak Senel

93% match

Loading thumbnail…

scatter plot

This scatter plot visualizes the top 10 most populous countries in 2020, using horizontal bars to represent population sizes. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rendering for the marks and axes. Data comes from the UN World Population Prospects 2019, loaded via D3’s `csv` function and formatted with `format('.2s')` to display population in billions. Hovering over a bar reveals a tooltip with the precise value.

AAndrew Babilonia

90% match

Loading thumbnail…

Scatter plot

This example shows the top 10 most populous countries as a horizontal bar chart, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Axis ticks and labels are generated with custom React components, and population values are formatted using D3’s `format` with SI prefixes.

PPatric Tysk

90% match

Loading thumbnail…

scatter plot

This scatter plot displays the top 10 most populous countries using a horizontal bar chart, with each bar’s length representing population size. The visualization is built with React and rendered as SVG, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The bars include tooltips showing formatted population values, and axes are styled with light gray ticks and labels.

HHsu0208

89% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes population data for ten countries, using horizontal bars whose lengths correspond to each nation's population count. The chart reads population values from a CSV file and scales them by a factor of one thousand. Built with D3.js v5, the visualization employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, appending SVG rectangles to represent the data points. The example demonstrates fundamental SVG rendering and data-binding techniques within the D3 framework, with styling controlled by an external CSS file.

LLonwabo11

88% match

Loading thumbnail…

Scatter Plot with D3.js!

This scatter plot displays the population of the top ten most populous countries in 2018, with each circle positioned along a point scale for country names and a linear scale for population values. The visualization uses D3.js v5 within a React framework, rendering SVG elements via `select`, `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to create labeled axes with custom tick formatting (converting billions to B). Data comes from the United Nations World Population Prospects 2017, loaded from a CSV with `d3.csv`, and the chart includes gridlines and axis titles styled through CSS.

Fforcox43

88% match

Loading thumbnail…

Scatterplot

This scatterplot displays the top 10 most populous countries using a bar chart, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v5, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. The chart includes styled axes with formatted tick labels that convert values to billions, and hover tooltips via SVG <title> elements.

CCAROL(XINYI) ZHENG

88% match

Loading thumbnail…

ScatterPlot

This scatter plot displays the populations of the top ten countries, using horizontal bars where each bar’s length corresponds to population size, with country names on the vertical axis. The visualization is rendered as an SVG using React and D3 v7, reading from a CSV file. The code applies a linear scale for population values, a band scale for countries, and custom axes with formatted tick labels that abbreviate large numbers.

CCalvin.

88% match