Skip to main content
SimilarExport ZIP
100%

data visualization stacked bar chart

✓ Published0🌍 Public
Bbudalavijay2001@gmail.com
Last edited Apr 22, 2024
Created on Apr 22, 2024
Forked from Hello VizHub

This example visualizes COVID-19 total cases by country, grouped into stacked horizontal bars organized by continent. The chart uses D3 v7’s `d3.csv` to load remote data, `d3.groups` to structure the data hierarchically, and `d3.scaleBand`/`d3.scaleLinear` with SVG rendering. Each country is a rectangle colored via `d3.schemeSet3`, with rotated axis labels for readability.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

data visualization project

This example presents a bar chart of COVID-19 total cases by country, using data loaded from a remote CSV file. The chart is rendered as an SVG element using D3 v7, with a rotated x-axis to accommodate country labels and a linear y-axis for case counts. The code demonstrates D3’s scaleBand and scaleLinear for axis scaling, and uses the `join` operator to efficiently create bar rectangles, with a steelblue fill for the bars.

Bbudalavijay2001@gmail.com
89% 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
84% 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
84% 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
84% 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
84% 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
84% match
Loading thumbnail…

Covid-19 Data Visualization

This visualization displays total COVID-19 case counts for fourteen countries using a bar chart. Each bar’s height and value labels are mapped through d3.scaleBand and d3.scaleLinear, while d3.axisBottom and d3.axisLeft render the axes. Tooltips appear via mouseover events, and the SVG rendering includes a title and case number annotations. The data is embedded in the code as a static array, with cases formatted using the toLocaleString method.

AAbdul Kareem
83% match
Loading thumbnail…

covid-19 bar chart

This bar chart displays total COVID-19 case counts for different countries, with bars colored using a categorical palette and labeled with case numbers. It shows tooltips on hover containing country and total case information. The visualization uses D3 v7 to build the SVG, employing `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for bar colors. The underlying data is embedded directly in the source code.

HHarinathChakali33@gmail.com
83% match