Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Interactive Stacked Bar Chart

✓ Published0🌍 Public
DDivyaKota2@my.unt.edu
Last edited Apr 26, 2024
Created on Apr 26, 2024

This interactive stacked bar chart visualizes COVID-19 case and death counts for the world's most populous countries in 2023. Built with D3 v7, it uses `stack()` to layer the two metrics within horizontal bars, with `scaleBand` for country positioning and `scaleLinear` for the value axis. Hovering over the legend highlights a specific stack layer via `mouseenter` and `mouseleave` events on the color legend. The chart renders as SVG using the `@curran/responsive-axes` library for axis generation, drawing from merged pandemic and population CSV data.

AI-generated description

Stacked bars showing estimated religion breakdown of the most populous 20 countries in 2010. Based on an example from the tutorial Splitting Charts. Interactions:

  • Hover over the legend to highlight religions.

Data is from The Global Religious Landscape by Pew Research, generated using this processing script.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays the total COVID-19 cases per continent against population, using a categorical color scale to distinguish continents. A linked legend allows hovering to highlight a specific continent’s bars while dimming others. The visualization uses D3’s `flatRollup` and `stack` to structure data, `scaleBand` and `scaleLinear` for axes, and responsive resizing via `@curran/responsive-axes`. Data is loaded from a local CSV file containing population and case counts.

DDivyaKota2@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays the total COVID-19 cases per continent against population, using a categorical color scale to distinguish continents. A linked legend allows hovering to highlight a specific continent’s bars while dimming others. The visualization uses D3’s `flatRollup` and `stack` to structure data, `scaleBand` and `scaleLinear` for axes, and responsive resizing via `@curran/responsive-axes`. Data is loaded from a local CSV file containing population and case counts.

DDivyaKota2@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays the total COVID-19 cases per continent against population, using a categorical color scale to distinguish continents. A linked legend allows hovering to highlight a specific continent’s bars while dimming others. The visualization uses D3’s `flatRollup` and `stack` to structure data, `scaleBand` and `scaleLinear` for axes, and responsive resizing via `@curran/responsive-axes`. Data is loaded from a local CSV file containing population and case counts.

DDivyaKota2@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays the total COVID-19 cases per continent against population, using a categorical color scale to distinguish continents. A linked legend allows hovering to highlight a specific continent’s bars while dimming others. The visualization uses D3’s `flatRollup` and `stack` to structure data, `scaleBand` and `scaleLinear` for axes, and responsive resizing via `@curran/responsive-axes`. Data is loaded from a local CSV file containing population and case counts.

DDivyaKota2@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart displays the total COVID-19 cases per continent against population, using a categorical color scale to distinguish continents. A linked legend allows hovering to highlight a specific continent’s bars while dimming others. The visualization uses D3’s `flatRollup` and `stack` to structure data, `scaleBand` and `scaleLinear` for axes, and responsive resizing via `@curran/responsive-axes`. Data is loaded from a local CSV file containing population and case counts.

DDivyaKota2@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes the population of continents alongside their total COVID-19 cases. The chart uses `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping, with `d3.scaleLinear` and `d3.scaleBand` for axes. Hovering over the legend items, implemented via `mouseenter` and `mouseleave` events in `colorLegend.js`, highlights the corresponding religious segment while fading others. The data, from a CSV file, is processed using `flatRollup` and `stack` from D3's `d3` library.

DDivyaKota2@my.unt.edu
88% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

DDivyaKota2@my.unt.edu
87% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

DDivyaKota2@my.unt.edu
87% match