Fork of Stylized bar chart

100%

Fork of Stylized bar chart

✓ Published0🌍 Public

Last edited Mar 17, 2021

Created on Mar 17, 2021

This fork of a stylized bar chart displays the populations of the top 10 countries from a UN dataset, using horizontal bars with a teal fill on a clean white background. The chart is built with React components that render SVG elements, with d3.scaleBand and d3.scaleLinear mapping the data to positions and sizes. Axis labels and tick formatting use d3.format with a custom SI suffix conversion, while interactive tooltips provide precise values on hover. The dataset is loaded via d3.csv from a GitHub-hosted CSV file.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized bar chart

This bar chart displays the populations of ten countries from the United Nations 2019 dataset, using a stylized horizontal layout with teal bars and a clean axis. The visualization is built with React and D3 v6, using `scaleBand` and `scaleLinear` to map data to SVG rectangles. Population values are formatted using D3’s `format` with a custom tick label that converts billions to millions. The chart includes interactive tooltips via SVG `<title>` elements, and the data is loaded asynchronously using `d3.csv`.

Ooreltop

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This stylized bar chart displays the population estimates for the top ten countries using horizontal bars. Built with React and D3 v5, the visualization employs `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `rect` elements. The data is loaded from a CSV file of UN Population 2019 estimates, formatted with D3’s `format` function to abbreviate large numbers (e.g., “1.4B”). Axis components are custom React components, and hover tooltips show formatted population values.

Rrstrauss127

93% match

Loading thumbnail…

Fork of Stylized bar chart

This bar chart displays the populations of ten countries from the UN Population 2019 dataset. Horizontal bars are rendered as SVG rectangles using React, with scales created via D3’s `scaleBand` and `scaleLinear`. Axis components are custom-built in JSX, and D3’s `format` function converts tick labels to abbreviated values like “1.2B.” A hover tooltip is provided through the SVG `<title>` element, and the layout uses a fixed 960x500 viewport with Poppins typography.

Ssophievanderhorst

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart displays the populations of the top 10 most populous countries as horizontal bars, using a Poppins font and a teal color scheme. Data comes from the UN World Population Prospects 2019, loaded via D3's `csv` function. Built with React and rendered as SVG, the chart uses D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with tooltips powered by SVG `<title>` elements.

Jjwadh

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. React components render SVG elements, using d3.scaleBand and d3.scaleLinear for positioning, while d3.csv loads United Nations data and d3.format abbreviates tick labels. Bars include hover tooltips via SVG `<title>` elements.

NNfuu

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

A stylized bar chart ranks the top 10 most populous countries according to the United Nations World Population Prospects 2019 dataset, loading data via d3.csv. It renders as an SVG using React, mapping country names to a d3.scaleBand y-axis and population values to a d3.scaleLinear x-axis. The marks are rectangular elements with a teal fill and hover tooltips, while axes display tick lines and labels formatted with d3.format. The layout includes margins, a bottom axis label, and a Poppins font.

SSuzie1022susu

93% match

Loading thumbnail…

Fork of Stylized bar chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with bars colored teal and labeled with population values in billions. The visualization is rendered as SVG using React components, with D3 v6 handling the data loading and scales. The `csv` function fetches UN population data, `scaleBand` and `scaleLinear` position the bars, and the `format` function converts tick labels to abbreviated notation.

MMarcelo

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This fork of the stylized bar chart displays the top 10 most populous countries, using horizontal bars to encode population values from the United Nations World Population Prospects 2019 dataset. The chart is rendered as an SVG within a React application, leveraging D3 v5's `scaleBand` and `scaleLinear` for axes and mark positions. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw the tick lines, labels, and rectangular bars, with a tooltip showing the formatted population value. The visualization uses a clean, minimal aesthetic with a Poppins font and a teal color scheme.

GGeorgeVard

93% match