Skip to main content
SimilarExport ZIP
100%

Fork of Styled Bar Chart

✓ Published0🌍 Public
MMark Lam
Last edited Mar 30, 2022
Created on Mar 30, 2022
Forked from 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.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

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

Fork of Styled Bar Chart

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.

SSam Hege
95% 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
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 chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population with a labeled x-axis and country names on the y-axis. It uses React with D3’s `scaleBand`, `scaleLinear`, `max`, and `format` to position and style SVG rectangles, with hover tooltips via SVG `<title>`. Data comes from the United Nations World Population Prospects 2019 CSV, loaded using `d3.csv`. The design features a teal color scheme and Poppins font, with axis ticks and labels styled through CSS.

JJONATHAN SIMON
94% match
Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with population values formatted in billions. The chart uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names and population counts to screen coordinates. Axes and marks are generated through custom React components, and the data comes from the United Nations World Population Prospects 2019, loaded via D3’s `csv` function. Styling applies the Poppins font with teal bars and gray tick lines.

Llingfa
94% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars using React and D3 v5’s `scaleBand` and `scaleLinear`. It renders SVG rectangles for each country, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data comes from the UN World Population Prospects 2019 CSV, loaded via D3’s `csv` function. Styling includes Poppins font and teal marks, with tooltips showing formatted population values.

Aarjun-lab663
94% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It uses React with D3 v5 to construct the SVG, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. The chart renders horizontal bars with a teal fill, Poppins font, and custom axes from `AxisBottom` and `AxisLeft`, with CSV data fetched via D3's `csv` helper. A tooltip displays the formatted population value using D3's `format` function.

CClara Hu
93% match