Fork of Stylised Bar chart

Last edited Oct 20, 2025

Created on Oct 16, 2025

This horizontal bar chart displays populations for US cities, sorted in descending order with bars extending along a linear population scale. Built with React and D3 v7, it uses `d3.csv` to load data from a Gist-hosted CSV file and `d3.axisBottom` and `d3.axisLeft` for axes. The chart applies `scaleBand` for city categories and `scaleLinear` for population values, rendering bars as SVG `rect` elements with optional value labels via `d3.format`. A custom axis component adds faint vertical gridlines.

AI-generated description

MIT Licensed

Similar vizzes

Fork of Stylised Bar chart

This horizontal bar chart displays the populations of major US cities in millions, using rectangles whose length encodes value and whose vertical position encodes city. Built with React and D3 v7, the visualization loads data from a remote CSV, applies a linear scale for the population axis and a band scale for the categorical city axis, and includes gridlines, axis labels, and hover opacity effects for readability.

95% match

Fork of Stylized Bar Chart

This bar chart displays population values for various countries using a horizontal layout with colored bars. It loads CSV data from an external gist URL using D3’s `csv` utility, then applies `scaleLinear` and `scaleBand` to position bars and axes. React components render the SVG elements, including custom axes and marks, with D3’s `max` and `format` functions handling data scaling and tick label formatting. The chart includes a loading state and applies a Poppins font from Google Fonts.

TTousifAhamed

88% match

Fork of Refactored Bar chart with React & D3

This fork of the refactored bar chart example uses React with D3 v7 to render a horizontal bar chart of US city populations. The code defines reusable components for axes and marks, using `d3.scaleLinear` and `d3.scaleBand` to map population values and city names, while data is embedded and parsed via `d3.csvParse` from a local CSV string. Bars are drawn as SVG `rect` elements with hover opacity changes, and gridlines are created through a D3 axis call.

88% match

Stylised bar chart

A stylised bar chart displays population data for various countries, with horizontal bars ranked by value. The visualization uses React state management via a `useData` hook to load CSV data from a gist, while D3 v6 functions `scaleBand`, `scaleLinear`, and `max` handle scaling and layout. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tick labels use D3’s `format` with SI prefixes, and a Poppins font styles the chart.

MmohitPassan

Fork of Stylized Bar Chart

This bar chart displays the top three most populous countries—China, USA, and India—using horizontal bars scaled by population (in millions). Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles via the `Marks` component. Population values are formatted with D3’s `format` function to abbreviate large numbers (e.g., “12.06B”), and styled with red fills and Poppins font. Data comes from a local CSV file, with axes drawn through custom `AxisBottom` and `AxisLeft` components.

DDeepikaGoud08

Fork of Stylized bar chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars with a stylized, minimalist aesthetic. Built with React and D3 v6, it loads data from a CSV via `d3.csv` and renders SVG elements. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and a `format` function to abbreviate population values in billions. Hovering over a bar reveals a tooltip with the full population figure.

Kkatebacon32

Fork of Fork of Refactored Bar chart with React & D3 -Rajan

The visualization displays US city population trends through two paired charts: a multi-series line chart comparing simulated population values for 2020, 2022, and 2024, and a combined bar-and-line chart showing 2020 bars with an overlaid growth-rate line. Built with React and D3 v7, it renders to a single responsive SVG using a viewBox. Data comes from a CSV file via `d3.csv`, with additional quantitative series generated through a seeded `mulberry32` random number generator. The implementation uses `d3.axisLeft` for grids, `d3.scaleLinear` for scaling, and a linear index-based x-axis.