Skip to main content
SimilarExport ZIP
100%

Responsive Bar Chart

✓ Published27🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Feb 12, 2024
Forked from Simple Bar Chart

This responsive bar chart displays the top 10 countries by population using data from the UN Population Estimates 2024. It adapts its width and height to the container size via the `observeResize` and `axes` APIs from `@curran/responsive-axes`. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for positioning bars, with `d3.axisLeft` for the y-axis and dynamic SVG resizing in `d3.select().attr()`. Gray rectangles mark the inner plotting area, while bar heights encode population values in thousands.

AI-generated description

A responsive bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Responsive Bar Chart

This example shows the top 10 most populous countries as horizontal bars, with each bar’s length proportional to population in thousands. The chart automatically resizes to fit its container using the `observeResize` API, while the `viz` function builds scales with `d3.scaleBand` and `d3.scaleLinear`, draws axes via `@curran/responsive-axes`, and renders bars as SVG rectangles. Data comes from the `@curran/un-population-estimates-2024` dataset, sorted using `d3.descending`. An inner gray rectangle frames the plot area.

Hhermelami@gmail.com
90% match
Loading thumbnail…

Fork of Responsive Bar Chart

This example shows the top 10 most populous countries as horizontal bars, with each bar’s length proportional to population in thousands. The chart automatically resizes to fit its container using the `observeResize` API, while the `viz` function builds scales with `d3.scaleBand` and `d3.scaleLinear`, draws axes via `@curran/responsive-axes`, and renders bars as SVG rectangles. Data comes from the `@curran/un-population-estimates-2024` dataset, sorted using `d3.descending`. An inner gray rectangle frames the plot area.

Hhermelami@gmail.com
90% match
Loading thumbnail…

Fork of Responsive Bar Chart

This bar chart visualizes the top 10 most populous countries, with each bar representing a country's total population in thousands. The data comes from the UN population estimates for 2024, filtered to include only countries and sorted in descending order. The visualization uses D3’s `scaleBand` for the categorical x-axis and `scaleLinear` for the population y-axis, with `max` computing the domain. The `@curran/responsive-axes` library handles the axes, while `observeResize` ensures the chart adapts to container dimensions. An inner rectangle highlights the plot area, and bars are drawn via `rect` elements.

Ttejasviteegala@my.unt.edu
90% match
Loading thumbnail…

Fork of Responsive Bar Chart

This bar chart visualizes the top 10 most populous countries, with each bar representing a country's total population in thousands. The data comes from the UN population estimates for 2024, filtered to include only countries and sorted in descending order. The visualization uses D3’s `scaleBand` for the categorical x-axis and `scaleLinear` for the population y-axis, with `max` computing the domain. The `@curran/responsive-axes` library handles the axes, while `observeResize` ensures the chart adapts to container dimensions. An inner rectangle highlights the plot area, and bars are drawn via `rect` elements.

Ttejasviteegala@my.unt.edu
90% match
Loading thumbnail…

Fork of Responsive Bar Chart

This fork of a responsive bar chart displays the top ten most populous countries using data from the UN population estimates for 2024. It shows the total population in thousands for each country, with a light gray inner rectangle framing the plot area. The visualization uses D3's `scaleBand` and `scaleLinear` to position bars, and the `@curran/responsive-axes` library to handle axis rendering and resizing. It also employs the `select` and `join` APIs for declarative SVG updates, with bars drawn as `rect` elements with a `mark` class.

RRustamova Malakkhanim
89% match
Loading thumbnail…

Fork of Responsive Bar Chart

This example shows the ten most populous countries in the world using a responsive horizontal bar chart, displaying each country’s total population in thousands. The visualization pulls data from the `@curran/un-population-estimates-2024` library, filters for country-level records, and sorts them in descending order. Using D3’s `scaleBand` and `scaleLinear`, the chart maps country names to categorical positions and population values to a linear scale. It relies on the `@curran/responsive-axes` library’s `observeResize` and `axes` functions to handle dynamic resizing, rendering bars as `rect` elements with a gray inner rectangle for a clean presentation.

Cchilukuritagore1427@gmail.com
86% match
Loading thumbnail…

Simple Bar Chart

This example displays a bar chart of the top 10 most populous countries as of January 1, 2024, using data from a United Nations population estimates dataset. It shows each country’s total population in thousands. The visualization is built with D3.js, using `scaleBand` and `scaleLinear` to position bars, with axes and labels generated via the `@curran/axis-labels` library. The code filters the dataset for countries, sorts by population in descending order, and slices the top 10.

CCurran Kelleher
85% match
Loading thumbnail…

axes Bar Chart

This bar chart displays the top 10 countries by population in 2020, using data from a UN Population CSV file. It renders with React and SVG, where D3’s `scaleBand` positions the country labels on the y-axis and `scaleLinear` maps population values to bar widths on the x-axis. The code manually generates gridlines and tick labels using `xScale.ticks()` and maps over `yScale.domain()` for text elements, rather than using D3’s axis components. Each rectangle’s width is set with `xScale(d.Population)`, and its height uses `yScale.bandwidth()`.

MMATTE-blz
85% match