Untitled

100%

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 17, 2023

Created on Jul 17, 2023

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.

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…

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

96% 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

96% 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

95% 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

94% 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

92% match

Loading thumbnail…

DV2_Stacked bar chart

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.

NNagateja99

91% 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

85% match

Loading thumbnail…

Untitled

This example visualizes earthquake data across U.S. states from 2010 to 2015, using a heatmap-like grid where each tile’s color intensity represents the recorded count, with categories grouping states by magnitude ranges. The visualization uses D3.js v3 to render SVG rectangles, with a time scale for the x-axis, a linear scale for the y-axis, and a color scale mapping counts to shades of steelblue. It reads from a CSV file and includes a legend and axes to clarify the count values and date range.

Sszhang182

84% match