Spiral heatmap #2 (with mouseover)

100%

Spiral heatmap #2 (with mouseover)

✓ Published0🌍 Public

Last edited Jul 11, 2017

Created on Jul 11, 2017

A spiral heatmap displays monthly maximum temperatures in Cambridge, UK from 1959 to 2017, with each coil representing a year and each segment a month. The color scale uses d3.scaleSequential with d3.interpolatePlasma to encode temperature values. Built with D3 v4 and rendered as SVG, the visualization includes a mouseover interaction that highlights individual data points. Data comes from the Met Office's Cambridge station dataset. Radial month labels and grid lines help orient the viewer around the spiral.

AI-generated description

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/0a024581fd0b7c4e483203d5bff9631b'>Spiral heatmap</a>

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/5862cfadb015448eb8b763e7ed8d3bdc'>Spiral heatmap (with mouseover)</a>

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/fbf481071aa45a5a01d7893d4da978fe'>Spiral heatmap #2 (with mouseover)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Spiral heatmap (with mouseover)

This spiral heatmap visualizes monthly tourist nights in Berlin from 2010 to 2016, using color intensity to represent visitor counts. Each coil of the spiral represents one year, with twelve segments per coil for the months, and the spiral layout allows viewers to compare seasonal patterns across years. Hovering over a segment highlights that month across all years, along with the preceding and subsequent months, making it easy to spot cyclical trends and year-over-year changes. The visualization uses a viridis color scale, with a hole in the center and adjustable parameters for the number of arcs per coil, chart radius, and hole size.

663anp3ca

81% match

Loading thumbnail…

Northern hemisphere sea ice extent

This spiral heatmap visualizes Northern hemisphere sea ice extent from 1978 onward, with each coil representing one year and each arc a single day, colored from blue to red via a sequential spectral scale. The chart uses D3 v4 to render SVG paths, with a custom `spiralHeatmap()` function that computes quadratic Bezier curves for each arc segment. Month labels and tick lines are drawn around the circumference, while the data is loaded from a CSV file containing daily extent measurements.

Dd3noob

75% match

Loading thumbnail…

Heatmap

This heatmap shows monthly values across five years, with a white-to-orange color scale indicating magnitude from 0 to 2. Rendering as SVG, the visualization uses d3.scaleBand for month and year axes, d3.scaleLinear for color encoding, and d3.csv to load the heatmap.csv data. A tooltip appears on hover, displaying the exact cell value via mouseover, mousemove, and mouseleave handlers.

Pprateekvasi

74% match

Loading thumbnail…

HeatMap D3

This heatmap displays average monthly temperatures for ten cities across 2016, using a vertical color gradient from the Inferno interpolator to encode temperature values. The visualization employs D3.js v6 with SVG rendering, scaling months along the x-axis and cities along the y-axis. Interactive tooltips reveal exact temperature values on hover, while a d3-legend color scale provides a visual reference for the temperature range. The data comes from a CSV file loaded via d3.csv, with rounded cell corners and opacity styling for clarity.

AAllen Ho

72% match

Loading thumbnail…

Circular Heat Map

This circular heat map visualizes the relationship between four categories and twelve months, with each cell’s color intensity encoding the numeric value. The chart is composed of concentric rings, one per category, split into twelve angular segments for each month, creating a compact radial layout. Color mapping uses a linear blue scale from white to a dark navy (#01579b). Hovering over any cell triggers a tooltip displaying the exact month, category, and value. The visualization is implemented in D3.js v3 using SVG, with the circular layout emphasizing cyclical patterns in the data.

663anp3ca

72% match

Loading thumbnail…

Circular Heat Map

663anp3ca

72% match

Loading thumbnail…

Svelte + D3: Radial (II)

This radial line chart shows daily Atlantic sea surface temperatures from 1982 to 2024, with each year represented as a single spiral line. One line traces the temperatures through the 366 days of a year, with recent years (2023 and 2024) highlighted in pink and blue, while older years appear as translucent white strokes. The visualization uses d3.csv with autoType for data loading, d3.scaleLinear for the angle and radius scales, and d3.lineRadial with a Catmull-Rom curve to generate the spiral paths. The data comes from Climate Reanalyzer, and the SVG is rendered responsively using Svelte’s bind:clientWidth and bind:clientHeight.

MMatthias Stahl

71% match

Loading thumbnail…

Heatmap YearHour Calendar View

A calendar-style heatmap displays data for 2014 across twelve monthly SVG panels, with each day of the month plotted against the 24 hours of the day. The intensity of each hour is encoded through a linear color scale from white to blue, representing percentage values (PER) loaded from a CSV file. The visualization uses d3.nest to group and roll up the data, and d3.scaleLinear to map value ranges to colors. Rectangles are positioned using d3.timeHours and d3.timeDays iterators, with month labels and hour/date legends derived from the time scale.

TThanaporn-sk

70% match