Skip to main content
SimilarExport ZIP
100%

Fork of Styled Bar Chart

✓ Published1🌍 Public
SSam Hege
Last edited Sep 20, 2022
Created on Sep 15, 2022

This fork of a styled bar chart visualizes the top 10 countries by 2020 population using a horizontal bar layout, with country names on the y-axis and population on the x-axis. It loads UN population data from a CSV file via `d3.csv` and renders SVG rectangles as marks, while `d3.scaleBand` and `d3.scaleLinear` handle the axes. The chart includes formatted tick labels using `d3.format` (converting gigabytes to billions), a "Population" axis label, and tooltips showing exact values. Styling uses the Poppins font with teal marks and gray axes.

AI-generated description

A program that loads and visualizes some data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Styled Bar Chart

This fork of a styled bar chart visualizes the top 10 most populous countries in 2020, using data fetched from a GitHub-hosted UN Population CSV. The horizontal bars are rendered as SVG rectangles within a React component, with population values displayed on the x-axis using a custom tick formatter that converts units to billions. The chart leverages D3’s `scaleBand` and `scaleLinear` for layout, while tooltips show the exact population on hover. Styling is applied via CSS classes, including Inter font and distinct axis and mark colors.

MMark Lam
95% match
Loading thumbnail…

Fork of Stylized Bar Chart

This fork of the Stylized Bar Chart example visualizes the top 10 most populous countries for 2020 using horizontal bars. It renders a React SVG chart with D3 v5 scales (`scaleBand`, `scaleLinear`) to position bars and axes, and formats population values in billions via `d3.format`. The data comes from the United Nations World Population Prospects 2019 CSV. Each bar includes a native SVG `<title>` element as a hover tooltip, styled with the Poppins font.

NNicky@vin.com
94% match
Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart using React and D3 v5. It loads population data from the United Nations World Population Prospects 2019 via a CSV file, then renders SVG rectangles scaled with `scaleLinear` for population and `scaleBand` for country names. A title tooltip using the HTML `<title>` element displays formatted values. Styled with the Poppins font and teal-colored bars, the chart includes custom axes created with `AxisBottom` and `AxisLeft` components, and formats large numbers using D3’s `format` with SI prefixes.

KKRITIKA RAI DWIVEDI
94% match
Loading thumbnail…

Fork of Stylized bar chart

This fork of a stylized bar chart displays the top 10 countries by 2020 population using a horizontal bar layout. Population values are formatted with the `d3.format` function, abbreviating billions as “B,” and each bar includes a native SVG `<title>` tooltip showing the precise value. The chart is built with React and D3 v6, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data loads asynchronously from a CSV file via the `useData` hook, and the visualization renders entirely as SVG with custom axis components and Poppins typography.

Yyingzhe-z
94% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

A stylized horizontal bar chart displays the top 10 most populous countries, with bars representing population values. The visualization uses React with D3.js (v5) APIs such as `scaleBand`, `scaleLinear`, and `format` to compute scales and tick labels. SVGs are rendered through React components, with data loaded from the UN World Population Prospects 2019 CSV. The chart includes labeled axes, a Poppins font, and tooltips showing formatted population values.

Ssnehareddygurram
94% match
Loading thumbnail…

Fork 999 of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population values on the x-axis. The chart uses a teal color for the bars, gray for the axes and labels, and the Poppins font, with a hover tooltip showing the exact population format. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from the UN World Population Prospects 2019, loaded via `csv`. The SVG rendering separates axes and marks into modular components for clarity.

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

Fork of Stylized Bar Chart

This fork of the stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values formatted in billions. Built with React and D3 v5, it loads data from the United Nations World Population Prospects 2019 via a CSV file, then renders the visualization as SVG. The code uses `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and custom React components for the axes and marks, with formatted tick labels and hover tooltips.

Ssamithareddy9@gmail.com
93% match