Q4 — VizHub

100%

Q4

✓ Published1🌍 Public

Last edited Feb 14, 2021

Created on Jan 29, 2021

Forked from Untitled

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

88% match

Loading thumbnail…

Q4 HeapMap

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.

Sswathijay

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…

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

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

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

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

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

81% match