DV2_Stacked bar chart

100%

DV2_Stacked bar chart

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 22, 2023

Forked from Untitled

This interactive stacked bar chart displays earthquake magnitude data across US states for selected years, with each bar broken into three magnitude-range segments. A dropdown menu switches between years, triggering smooth 750-millisecond transitions that update bar positions, axis scales, and total value labels. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.stack` to structure and draw the layers, while `transition().duration()` animates the state changes based on the CSV data.

AI-generated description

Stacked bar chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake magnitudes across U.S. states for selectable years, with each bar segmented by magnitude range (7.0+, 6–6.9, 5–5.9) and annotated with the total count. Users choose a year from a dropdown menu, triggering a 750ms transition that updates bar positions, heights, and axis scales. The visualization uses D3 v5, leveraging `d3.csv` for data loading, `d3.stack` for layering, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG transitions to animate changes.

SSwapna1915

91% match

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake counts by magnitude range for individual U.S. states across two years. A dropdown menu lets viewers switch between 2017 and 2018, triggering a smooth 750-millisecond transition that updates bar heights, positions, and axis scales. The visualization uses D3 v5 with SVG rendering, employing d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to map the year, state, and three magnitude categories from a CSV file. Total counts appear as text labels above each bar.

JJens Grochtdreis

90% match

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake counts by magnitude range (7.0+, 6–6.9, 5–5.9) for six U.S. states across the years 2017 and 2018. A dropdown menu switches between years, triggering a 750ms transition that updates bar heights, axis scales, and total labels. The visualization uses D3 v5 with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and ordinal color mapping, rendering SVG elements with animated transitions. Data is loaded from a CSV file via `d3.csv`.

Rrichad97

90% match

Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes earthquake counts by magnitude range across U.S. states for selected years. A dropdown menu lets viewers switch between 2017 and 2018 data, triggering a 750ms transition that updates bar positions and total labels. Built with D3 v5, the chart uses `d3.stack()` and `d3.scaleBand()`, rendering SVG rects and text elements. Color encoding distinguishes three magnitude categories (7.0+, 6–6.9, 5–5.9), with data loaded from a CSV file via `d3.csv`.

CChristoph Diefenthal

90% match

Loading thumbnail…

Untitled

A grouped and stacked bar chart displays earthquake counts by magnitude range across US states for 2017 and 2018. A dropdown menu switches between years, animating bar heights and total labels with 750-millisecond transitions. Built with D3 v5, the visualization uses `d3.csv` to load data, `d3.stack` to create layers, and `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color encoding. SVG transitions update the chart smoothly when the selected year changes.

CChristoph Diefenthal

88% match

Loading thumbnail…

Untitled

A drop-down menu switches between two years of earthquake magnitude data, displaying stacked totals for seven U.S. states across three magnitude bands (7.0+, 6–6.9, 5–5.9) as colored segments. The chart uses D3 v5’s `d3.csv`, `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`, with SVG rectangles and text labels updated via `transition`. Segments animate smoothly to new heights and totals when the year changes, rendering the raw CSV counts as proportional bars.

Aandrewtran1991

87% match

Loading thumbnail…

bar chart

This bar chart displays earthquake counts across U.S. states for the Western region in 2011, sorting states from highest to lowest frequency. The visualization uses D3 v5’s `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `axisBottom` for tick marks, rendering as SVG. Data is loaded from a CSV file and filtered for the specific region and year, with bars sized proportionally to earthquake counts.

Ggotyou007

81% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays the distribution of three categories across U.S. states for a selected year, with a dropdown menu to switch between years. The visualization uses D3.js v5’s `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.stack()` to compute stacked segments. Animated transitions (via `transition().duration()`) smoothly update bar heights and axis labels. Total values for each state are shown above the bars. The SVG rendering includes axis groups and colored layers, with the year selector populated from the dataset.

Pp189

80% match