Fork of Stylized bar chart

100%

Fork of Stylized bar chart

✓ Published0🌍 Public

Last edited Mar 10, 2021

Created on Mar 10, 2021

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`.

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

94% match

Loading thumbnail…

Fork of Stylized bar chart

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.

RRonald Yagan

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…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries from a 2019 UN dataset, using horizontal bars sorted by country name. The visualization renders in SVG via React, with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis) and includes axis components and tooltips showing formatted population values. Data is loaded asynchronously with `d3.csv`, with population values computed from the dataset’s “2020” column. The chart’s styling uses Poppins font and teal bars against a minimal, clean background.

EEvan Misshula

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays a horizontal bar chart of United Nations population data for ten countries, ranking them by 2020 estimated population. The visualization uses React components to render SVG marks and axes, with D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` handling data loading and scaling. Population values are formatted using D3’s `format` function, and hover tooltips appear via SVG `<title>` elements. The chart features a clean design with styled tick lines, a Poppins font, and teal-colored bars.

TtrwMK

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example presents a horizontal bar chart of the ten most populous countries, using population data from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart maps country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis, with formatted tick labels like “1.3B” produced by `d3.format`. Rendered as SVG within a React component, the chart displays bars with hover tooltips and styled axes, demonstrating a modular approach to building interactive visualizations with D3 and React.

Hhenry c

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization presents the ten most populous countries as horizontal bars, with country names on the vertical axis and population counts on the horizontal axis, formatted in billions. It uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` to map data to coordinates, and `csv` to load the UN World Population Prospects 2019 dataset. The chart’s styling includes Poppins typography and a teal color scheme, with axis labels and a tooltip showing the population value via a `<title>` element.

Nnicholasgonzalez1

93% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This visualization displays the populations of ten countries as horizontal bars, rendered as SVG rectangles through React components. The chart loads UN population data for 2020 from a CSV file using D3’s `csv` parser, then maps it with `scaleBand` and `scaleLinear`. Axes are drawn by custom React components, with tick formatting via D3’s `format` to abbreviate values (e.g., “1.2B”). A `title` element in each rectangle provides a native tooltip, and the layout follows a clean, styled design using the Poppins font.

TtrwMK

93% match