Skip to main content
SimilarExport ZIP
100%

style barchart

✓ Published1🌍 Public
BBlake McCarty
Last edited May 11, 2022
Created on May 11, 2022
Forked from refactor

This horizontal bar chart displays population figures for ten countries using the UN Population 2019 dataset. The visualization employs React with D3 v7, using `scaleBand` and `scaleLinear` to position bars and axes. Styled with the Prompt font and light blue semi-transparent bars, the chart includes red axis ticks and hover tooltips via SVG `<title>` elements. The bottom axis formats tick values with `d3.format` to display billions.

AI-generated description

Half of the smiley HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from the UN Population 2019 dataset. Using React with D3 v7, the visualization employs `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles, with axes generated from `xScale.ticks()` and formatted using the SI format `.2s`. The chart features custom tick styling, axis labels, and tooltips via SVG `<title>` elements.

JJakub
91% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from the 2019 UN Population dataset. The horizontal bars use a teal color scheme with a clean grid and axis labels. Built with React and D3 v6, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, with SVG rendering. Axis components are modularized, and each bar includes a tooltip showing the population value using D3's `format` function.

HHeidi Stockton
91% match
Loading thumbnail…

Stylized bar chart

This stylized bar chart displays the populations of the top 10 countries from the UN Population 2019 dataset. It uses React with D3 v6’s `scaleBand` and `scaleLinear` to map countries and population values, rendering bars as SVG rectangles with tooltips via the `<title>` element. The chart includes formatted axis ticks using `d3.format` and a Poppins font, with axes built from custom React components.

BBurak Senel
90% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays population data for ten countries from the UN’s 2019 World Population dataset. Using React with D3 v7, it builds a horizontal bar chart with a band scale for countries and a linear scale for population, rendering axes and marks as SVG elements. The chart applies a custom Poppins font, colored tick marks, and teal bars with hover tooltips via SVG `<title>` elements. The `csv` loader fetches the data, while `format` and `scaleBand` handle labeling and spacing.

GGabriel Dias Menezes
90% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from a UN 2019 dataset, rendered as horizontal bars with a custom Poppins font and teal color scheme. The visualization uses React to manage component state and D3 v5 utilities including `scaleBand`, `scaleLinear`, and `csv` for data loading. SVG elements are generated via React components for axes and marks, while the bottom axis formats population values in billions using D3's `format` function.

TtrwMK
90% match
Loading thumbnail…

Barchart v3 w/ React & D3

This bar chart displays the populations of ten countries from the 2019 UN Population dataset, using horizontal bars on a linear scale. The visualization is built with React components for rendering SVG elements and D3 v5 for data loading and scales. D3’s `scaleBand` positions the categorical country labels, `scaleLinear` maps population values to bar widths, and `format` converts tick labels into abbreviated units like “B” for billions. Axes are rendered as separate React components, with styling handled through CSS classes.

SSophia Cofone
90% match
Loading thumbnail…

Stylized bar chart

A stylized bar chart displays the populations of ten countries from 2019 UN Population data, with horizontal bars ranked by country name. The visualization uses React to render SVG elements, including custom axis components and rectangular marks for each bar. D3 utilities like scaleBand, scaleLinear, and csv loading handle data processing and scales. The chart features a teal color scheme, Poppins font, and tooltips showing population values with abbreviated formatting, such as "1.23B".

Nnncis
90% match
Loading thumbnail…

Styled BarChart

A styled horizontal bar chart displays population figures for ten countries from a UN population prospects dataset. Rendered as an SVG in React, the chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Headers, tick marks, and hover tooltips are drawn with React components. The title and axis labels use the Poppins font, while CSS styles define the chart's color scheme.

Jjackcaldwellnichols
90% match