Q4 HeapMap

100%

✓ Published0🌍 Public

Last edited Sep 21, 2019

Created on Sep 21, 2019

Forked from Untitled

This heatmap displays earthquake counts across U.S. states for each year from 2010 to 2015, filtered by magnitude category via a dropdown selector. The visualization uses a quantized color scale to encode count values, with tooltips revealing exact numbers on hover. Built with D3 v5, it renders SVG rectangles positioned by band scales for states and years, and updates dynamically through a change event listener. The data is loaded from an external CSV file and grouped using d3.nest.

AI-generated description

MIT Licensed

Similar vizzes

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

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

88% match

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

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

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

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

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

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

78% match