Skip to main content
Log in
J

josiahlikita96@gmail.com

@beldo55·4 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Responsive Bar Chart

This example displays a responsive bar chart of the top 10 countries by total population, using data from the UN Population Estimates 2024 dataset. It renders horizontal bars with D3 scales and axes, adapting to its container’s size via `observeResize`. The chart uses `scaleBand` and `scaleLinear` from D3, and the `axes` utility from `@curran/responsive-axes` to generate labeled axes. A light gray inner rectangle fills the plotting area behind the bars.

Jul 14, 2024
Loading thumbnail…

Fork of Fork of Fork of Responsive Bar Chart

This example displays a responsive bar chart of the top 10 countries by total population, using data from the UN Population Estimates 2024 dataset. It renders horizontal bars with D3 scales and axes, adapting to its container’s size via `observeResize`. The chart uses `scaleBand` and `scaleLinear` from D3, and the `axes` utility from `@curran/responsive-axes` to generate labeled axes. A light gray inner rectangle fills the plotting area behind the bars.

Jul 14, 2024
Loading thumbnail…

Fork of Fork of Responsive Bar Chart

This responsive bar chart visualizes the top 10 countries by total population using data from the UN population estimates. The visualization uses d3.scaleBand and d3.scaleLinear to map countries and population values to bar positions and heights, with d3.axisLeft for the y-axis. It leverages @curran/responsive-axes and @curran/un-population-estimates-2024 to handle resizing and data loading. A gray inner rectangle highlights the plotting area, and bars are rendered as SVG rect elements. The chart adapts its dimensions through the observeResize function.

Jul 14, 2024
Loading thumbnail…

Fork of Responsive Bar Chart

This example displays the ten most populous countries as a responsive bar chart, using data from the UN Population Estimates 2024. It updates the visualization dimensions dynamically when the container resizes. The implementation uses d3 selections and scales (scaleBand, scaleLinear), along with libraries for responsive axes and container observation. The bar rects and axis labels are rendered explicitly via D3 joins and the axes helper.

Jul 14, 2024