Stylized Bar Chart II

100%

Stylized Bar Chart II

✓ Published1🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

This example displays population estimates for the world’s twelve most populous countries, with horizontal bars labeled by country name. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering bars as SVG rectangles via a custom `Marks` component. The data is loaded as CSV from a GitHub gist using `d3.csv`, with axis formatting via `d3.format`.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized bar chart with React & D3

This stylized bar chart displays the population of 15 countries, with horizontal bars scaled proportionally to their 2020 population estimates and a custom tooltip showing the formatted value on hover. Built with React and D3 v7, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG elements via React components for axes and marks. The styling employs a light gray grid and dodgerblue bars, with the data loaded from a remote CSV using D3's `csv` parser and formatted with the `format` function.

Rrvdv

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

89% match

Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left and population values formatted in billions along the bottom axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `<rect>` elements for the bars. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sorted to the ten largest populations. Native SVG `<title>` elements provide hover tooltips with formatted population values.

RRussell Watson

89% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values shown on the x-axis and country names on the y-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via a `Marks` component. Data comes from a CSV file loaded with `d3.csv`, and the chart includes custom axes, tick formatting with `format('.2s')`, and tooltips using SVG `<title>` elements.

Qqhfzwyx

89% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries using horizontal bars, with the x-axis formatted in billions and the y-axis listing country names. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, while custom axis components generate tick marks and labels. The bars are simple rectangles with tooltips showing the population value, and the layout is styled with a custom Poppins font and muted color palette.

Ttharuta

89% match

Loading thumbnail…

Stylized Bar Chart

A stylized horizontal bar chart displays the ten most populous countries in 2020, using CSS named colors and React to render an SVG visualization. The chart loads population data from a CSV source via D3’s `csv` utility and scales it with `scaleBand` and `scaleLinear`. Axes are drawn from custom React components, with formatted tick labels using `format`. Each bar is a simple rectangle with a tooltip, rendered declaratively through React components like `AxisBottom`, `AxisLeft`, and `Marks`.

Wwindwaver

89% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the 2020 populations of ten countries using horizontal bars styled with a teal fill and subtle gridlines. Built with React and D3 v7, it employs `scaleBand` for the categorical country axis, `scaleLinear` for population, and custom React components for axes and marks. Population values are loaded from a CSV using `d3.csv`, formatted with `d3.format`, and rendered as SVG rectangles with native tooltips. The chart includes labeled axes and a clean, modern aesthetic.

BBen Brophy

89% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population in billions on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning and `format('.2s')` to abbreviate tick labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Rects render as SVG marks, with axis components drawing tick lines and labels, and a tooltip showing the formatted population value on hover.

TTrashBoatDora

89% match