Skip to main content
SimilarExport ZIP
100%

Spiral heatmap (with mouseover)

✓ Published0🌍 Public
663anp3ca
Last edited Oct 16, 2018
Created on Oct 16, 2018

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.

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>

With added mouseover to highlight that month across all years, and the preceding/subsequent months. The spiral lets you compare preceding/subsequent months across breaks in the year.

A spiral heatmap, showing the number of tourist nights in Berlin (from the Makeover Monday series.

This is based in on the spiral heatmap from this stackoverflow question, for R.

Draws inspiration from Robert Kosara's example, and the research papers linked from that blog posting.

Within the code, you can adjust

  • the number arcs per coil (one rotation around the spiral). In this example, it is set to 12, being the number of months
  • the radius of the chart
  • the size of the hole in the middle
  • you can have straight edged arcs, but why would you :)

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>

mit Licensed

Similar vizzes

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
73% 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
70% 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
70% 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
69% 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
69% match
Loading thumbnail…

d3 | reusable heatmap calendar

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

CCBasis
68% match
Loading thumbnail…

Untitled

This interactive heatmap displays hourly activity counts for each date, using a color gradient to show intensity variations. The visualization renders a grid of tiles positioned by date and hour bucket, with color encoding count values via a sequential scale. It cycles through multiple color interpolators automatically, including Viridis, Inferno, and sequential schemes from d3-scale-chromatic, while allowing manual selection. The code uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleSequential to map values, with SVG rectangles and d3.axisBottom/d3.axisLeft for the chart’s axes.

Mmkt-ds
67% match
Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas
67% match