Untitled

100%

✓ Published0🌍 Public

Last edited Oct 2, 2019

Created on Oct 2, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Q4

This visualization shows earthquake counts by US state from 2010 to 2015, using an interactive heatmap with tiles colored on a yellow-to-dark-red scale. A dropdown menu filters the display by earthquake intensity category, and hovering over a tile reveals the state, year, and exact count via a tooltip. The code transforms the wide CSV data into long format, then uses d3.scaleBand for axes, d3.scaleLinear for color, and d3.nest to group data by category. The SVG rendering includes an animated legend, and the visualization is built with React and D3 v5.

NNeepaB

86% match

Loading thumbnail…

Earthquakes

A heatmap displays earthquake counts for U.S. states from 2010 to 2015, with color intensity varying by magnitude category. A dropdown menu allows filtering by category range, while hovering over cells reveals exact counts via a tooltip. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleQuantize` for color mapping, `d3.nest` for data grouping, and `d3.csv` to load the dataset.

Ccyanea1

86% match

Loading thumbnail…

Earthquakes

This heatmap visualizes earthquake counts (M3+) across U.S. states from 2010 to 2015, with each cell’s color encoding the annual total via a `d3.scaleQuantize` over nine discrete bins. A dropdown menu lets users filter the display by magnitude category (e.g., “10 to 99”), updating the visible rectangles. Built with D3 v5, the SVG renders axes using `d3.axisBottom` and `d3.axisLeft`, while a tooltip appears on hover to show the exact count. Data is loaded from a CSV with `d3.csv` and processed using `d3.nest` for grouping.

MManishJariwala22

85% match

Loading thumbnail…

Earthquakes

This heatmap visualizes earthquake counts across U.S. states from 2010 to 2015, with each cell colored by magnitude category. The view initially filters to the "10 to 99" category, but a dropdown menu lets viewers switch between magnitude ranges. Built with D3 v5, the code uses `d3.scaleBand` for axes, `d3.scaleQuantize` for color mapping, and `d3.nest` for category grouping. SVG rectangles render the data, with tooltips showing exact counts via mouseover and mouseleave events.

Yyoyo2050

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

85% match

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

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

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

84% match