Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of bar_char 5 styles

✓ Published1🌍 Public
TTanupat B.
Last edited Mar 19, 2022
Created on Mar 19, 2022

This example renders a horizontal bar chart of UN population data for 10 countries in 2020, colored teal with labeled axes. Built with React components and D3 v5 scales, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, drawing SVG rectangles per country. The code formats tick labels using D3’s `format` function, abbreviates values (e.g., “1.2B”), and supports tooltips via SVG `<title>` elements. Data is loaded asynchronously with D3’s `csv` utility.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of bar_char 2

This example visualizes the population of ten countries in 2020 using horizontal bars in an SVG rendered by React. It loads data from a CSV file via D3’s `csv` utility, parses the population column, and stores it in React state. A D3 `scaleBand` positions each country along the y-axis, while a `scaleLinear` maps population values to bar widths, with margins applied to the chart layout.

TTanupat B.
90% match
Loading thumbnail…

Fork of Fork of bar_char 3 axis

This horizontal bar chart displays the top 10 most populous countries in 2020, using data loaded from a CSV via D3’s `csv` utility. Bars are drawn as SVG rectangles, with a band scale for country names on the y-axis and a linear scale for population on the x-axis, including gridlines and tick labels generated from `xScale.ticks()`. React’s `useState` and `useEffect` manage the asynchronous data loading and rendering state.

TTanupat B.
89% match
Loading thumbnail…

Fork of Fork of Fork of bar_char 4 refactoring

This bar chart displays the top 10 countries by population from UN Population 2019 data, loaded via D3’s `csv` utility. The visualization maps countries to the vertical band scale and population values to the horizontal linear scale, rendering SVG rectangles for each row. React manages the asynchronous data loading through a custom `useData` hook, while D3’s `scaleBand` and `scaleLinear` handle the coordinate mappings. The chart includes axis components built with D3 ticks, showing the underlying refactoring of reusable chart parts across multiple forks.

TTanupat B.
89% 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
89% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter 2

This example displays a horizontal bar chart of population by country for the top 10 countries, using data from the UN Population 2019 CSV. Built with React and D3 v7, it renders SVG elements including rectangles for bars, with axes created using `scaleBand` and `scaleLinear`. The chart includes a custom `AxisTop` with `d3.format` for tick labels and an `AxisLeft` for country names. Data is loaded via `d3.csv` and parsed in a `useData` hook.

LLeonardo Baron
89% 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
88% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example displays the ten most populous countries as horizontal bars, with country names on the y-axis and population totals on the x-axis, formatted in billions. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendered as SVG rectangles with native tooltips. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via `d3.csv` and sliced to the top ten entries.

Ssudeepmathew
88% match
Loading thumbnail…

Fork of making a bar chart with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using United Nations population data loaded via `d3.csv`. React renders SVG bars, axes, and labels, while D3 scales (`scaleBand`, `scaleLinear`) compute positions and the `format` API converts tick values to abbreviated strings like "1.4B". The code separates concerns into reusable components for axes and marks, with a custom `useData` hook managing asynchronous data fetching.

Jjaowei
88% match