Skip to main content
SimilarExport ZIP
100%

Stylized bar chart

✓ Published1🌍 Public
Eekorre1001
Last edited Mar 29, 2021
Created on Mar 29, 2021

This stylized bar chart compares the population of ten countries using horizontal bars with a teal fill and a clean Poppins font. It displays population values on the x-axis with formatted tick labels (e.g., “1.23B”) and country names on the y-axis. Built with React and D3 v6, the visualization uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for positioning, and SVG `rect` elements for rendering bars. Hovering over a bar shows its exact population via the native SVG `<title>` tooltip.

AI-generated description

Uses react and D3 to render the data as a Bar chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays population estimates for ten countries using a horizontal layout with a teal color scheme and clean typography. Built with React and D3 v7, the visualization loads data from a CSV file via D3’s `csv` utility, scales with `scaleBand` and `scaleLinear`, and renders SVG elements through reusable React components. The x-axis employs D3’s `format` with `.2s` notation to abbreviate values (e.g., “1.4B”), while hovering over each bar reveals a native tooltip using an SVG `<title>` element.

OOleg Zhernovoy
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the population of ten countries using horizontal bars, with a clean, modern aesthetic set against a Poppins font and teal color palette. The chart leverages React for state management and rendering, D3 utilities such as `scaleBand` and `scaleLinear` for axes, and SVG for output. Data is loaded via D3’s `csv` function from a UN population dataset, and the x-axis formats large numbers with a custom `format` function that abbreviates values as billions.

AAnthonyAl-Rifai
94% 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
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization uses React state via hooks to load and manage CSV data from a GitHub gist, while D3 v7 utilities like `scaleBand` and `scaleLinear` handle the scaling. The SVG rendering includes custom axis components and tooltips that format values using D3's `format` function. The chart features a clean, modern aesthetic with Poppins typography and muted teal and gray colors.

Sstephanie0215
94% 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
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries, with horizontal bars extending from a common baseline. The visualization is built with React, rendering SVG elements directly, and uses D3 v5 utilities like `scaleBand` and `scaleLinear` to map the population data to pixel coordinates. The data is loaded asynchronously from a CSV file hosted on GitHub using `d3.csv`, with the chart applying a custom formatting function to abbreviate large population values. Axis ticks and labels are styled with Poppins font and muted colors.

Vvmonney
94% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays population data for ten countries, with country names on the y-axis and population values on the x-axis, formatted in billions. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for the axes and SVG `<rect>` elements for the bars, each with a native tooltip. The data is loaded from a Google Sheet via `d3.csv`. The chart features a clean, minimal design using the Poppins font and a teal color scheme.

Ttharanitaran
93% match
Loading thumbnail…

Stylized bar chart

A stylized horizontal bar chart displays the ten most populous countries by estimated 2020 population, using a teal fill and the Poppins font. Population values are formatted in billions with a custom tick formatter, and each bar includes a native SVG tooltip. The chart is built with React and D3 v6, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements generated by the `Marks` component. Data originates from a UN population CSV loaded via D3’s `csv` method.

Ssurikmeetr
93% match