Styled Bar chart with Axes

100%

Styled Bar chart with Axes

✓ Published1🌍 Public

Last edited Feb 15, 2021

Created on Feb 15, 2021

Forked from Bar chart - world population data

This example displays a horizontal bar chart of the top 10 most populous countries using 2020 UN population data, loaded via `d3.csv`. The chart renders custom axes with `scaleBand` for countries and `scaleLinear` for population values, drawing tick marks and labels directly. Built with React and D3 v6, it uses SVG elements like `rect` and `text` inside a transformed group to position bars and labels, with margins applied for layout.

AI-generated description

Bar chart using world population data - D3 & React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Styled Bar Chart

This example displays a horizontal bar chart ranking the populations of the ten most populous countries, with formatted tick labels and axis styling. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG rectangles for the bars. Data is loaded from a CSV file of UN population estimates for 2020, and the chart includes custom tick formatting that converts values to billions with the ‘B’ suffix.

MMark Lam

93% match

Loading thumbnail…

Styled BarChart

This styled bar chart visualizes the top 10 countries by population in 2020, using horizontal bars to represent each country's population. The chart, built with React and D3 v5, loads data from a CSV file containing UN population estimates. It uses D3's `scaleBand` and `scaleLinear` for axes and scaling, with `Marks` rendering SVG rectangles. The styling includes a Poppins font, custom tick colors, and a tooltip that formats population values using `format(".2s")` to display values in billions with a 'B' suffix.

CChris Knight

92% match

Loading thumbnail…

Styled Bar Chart

This styled bar chart displays the population of the top ten countries from a United Nations 2019 dataset, loaded via the `csv` function in D3. The horizontal bars are positioned and scaled using D3's `scaleBand` and `scaleLinear`. Orange rectangles represent population values, with axis labels and tick marks generated from the scales. The React application, using `useState` and `useEffect`, manages the asynchronous data fetching and renders the SVG chart, with custom components for axes and marks.

Nnkarinti

91% match

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with a fixed-width SVG layout and a loading state. It uses React with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, while d3.format abbreviates population values (e.g., “1.4B”). The data is loaded via d3.csv from the UN World Population Prospects 2019 dataset, sorted and sliced to the top 10. Axes are custom SVG components, and each bar has a native <title> tooltip.

Iip01

91% match

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population on the x-axis. It is built using React and D3 v5, relying on `scaleBand` and `scaleLinear` for positioning, and SVG for rendering. The data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. Axis components (`AxisBottom`, `AxisLeft`) and bar marks (`Marks`) are custom React components, with tooltips provided by SVG `<title>` elements and population labels formatted using `d3.format`.

CCurran Kelleher

91% match

Loading thumbnail…

Stylized Bar Chart

This chart displays the top 10 most populous countries using horizontal bars, 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` and `scaleLinear` for positioning, while SVG `rect` elements render the bars with native `<title>` tooltips. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The chart includes styled axes and a teal color scheme, with population tick labels formatted in billions.

227-12-95

91% match

Loading thumbnail…

Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, with population values formatted in billions and countries labeled on the vertical axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The SVG rendering includes styled axes, tick marks, and hover tooltips generated using SVG `<title>` elements.

Ttmrb

91% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the top ten most populous countries in 2020, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v6, it uses `d3.csv` to load UN population data, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the quantitative axis. The chart renders as SVG, with gridlines and tick labels generated via `xScale.ticks()`.

Ssophievanderhorst

91% match