Skip to main content
SimilarExport ZIP
100%

Fork of Stylised Bar chart

✓ Published0🌍 Public
Kkhushburajan2015@gmail.com
Last edited Oct 16, 2025
Created on Oct 16, 2025
Forked from 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.

AI-generated description

ICE-6 — US Cities Population (Bar Chart)

What this shows

  • Marks: rectangles (bars)
  • Channels: x position / length (population), y position (city), color
  • Gridlines + axis labels for readability

How to run

  1. Upload your CSV to a public URL (GitHub Gist → copy the Raw link).
  2. Open useData.js and set:
    • CSV_URL to your Raw CSV link
    • CATEGORY_COL = "city"
    • VALUE_COL = "population_millions"
  3. Save → the chart renders.

CSV schema

city,population_millions
New York,8.5
Los Angeles,3.9
...
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylised Bar chart

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.

Kkhushburajan2015@gmail.com
95% match
Loading thumbnail…

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.

Kkhushburajan2015@gmail.com
87% match
Loading thumbnail…

Fork of Scatter Plot with Color

This horizontal bar chart visualizes the population of US cities in millions, with bars sorted in descending order. The chart uses rectangular marks to encode population values through both position along the x-axis and bar length, while color provides a uniform visual style. The visualization is built using React with D3.js v7, specifically leveraging `d3.scaleLinear` for the continuous value axis and `d3.scaleBand` for the categorical city names. Interactive hover effects adjust bar opacity, and data is loaded from an embedded CSV string containing city-population pairs.

Kkhushburajan2015@gmail.com
86% match
Loading thumbnail…

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

Fork of Fork of Stylized bar chart

A stylized bar chart displays the 2020 populations of the ten most populous countries, using a green fill for each bar. The visualization, built with React and D3 v6, renders bars as SVG rectangles, with horizontal grid lines and rotated country labels along the x-axis. Data is loaded from a CSV file, and population values are formatted using a D3 format function that abbreviates large numbers (e.g., "1.38B"). Population data serves as the y-axis, while country names are on the x-axis.

Ssophievanderhorst
85% match
Loading thumbnail…

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

Fork of CV: Bar Chart

This example shows a bar chart of the 30 most populous cities worldwide using React and D3 v7, with population values displayed in millions on the y-axis and city names on the rotated x-axis. The chart renders as SVG and supports interactive selection—clicking a bar highlights it in red. Data loads from a raw GitHub Gist URL and is parsed manually into an array of city-population objects. The visualization builds scales with `d3.scaleBand` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and uses React hooks for container dimensions and state management.

445.saiful@gmail.com
84% match
Loading thumbnail…

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.

Kkhushburajan2015@gmail.com
84% match