Skip to main content
100%

Reusable spiral heatmap

✓ Published0🌍 Public
Aabrown004
Last edited Jun 29, 2018
Created on Jun 29, 2018

A reusable spiral heatmap displays German car and truck production data from Makeover Monday, using a continuous spiral of colored arcs to encode monthly production values. The D3 v4 chart, rendered in SVG, maps each data point to an arc along the spiral, with arcsPerCoil set to 12 to align with months. Labels around the circumference identify months, while labels at the start of each coil mark years. The implementation exposes configurable options such as radius, hole radius proportion, arcs per coil, and coil padding, making it adaptable to other periodic datasets. Color encodes production volume, and the spiral layout reveals cyclical patterns over time.

AI-generated description

An example of a resuable spiral heatmap.

The data is from the Makeover Monday series, about German car and truck production.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/4080b28445785939b3f043b8c5b63e22'>Reusable spiral heatmap</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
77% match
Loading thumbnail…

Spiral heatmap #2 (with mouseover)

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.

TThanaporn-sk
73% 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
72% 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
71% match
Loading thumbnail…

Spiral Visualization with D3

This example renders a colorful spiral of 50 circles connected by thin, semi-transparent lines. Generated procedurally using trigonometric functions, the circles vary in size and hue, creating a dynamic, decorative pattern against a dark background. The visualization is built with D3 v7, using selections and data joins to efficiently draw and update both the `<circle>` and `<line>` elements. The code recalculates the layout on window resize to maintain its centered composition.

VVinayak Revankar
70% match
Loading thumbnail…

D3 color spiral

A D3 color spiral arranges named CSS colors in a circular arc around a central point. Each color is rendered as a slice using a d3.arc with a large outer radius, creating a radial gradient of hues. The code fetches color data from a CSV file via d3.csv, then uses d3.pie to map each row to a segment. Built with React and ReactDOM, the visualization displays the colors in an SVG canvas sized 960 by 500 pixels.

AAmeer Nuri
70% match
Loading thumbnail…

Q1_Reusable D3 Scatter Plot

This reusable scatter plot visualizes car sales data, showing the relationship between horsepower and price, with color encoding car make and bubble size representing mileage. The chart includes interactive tooltips that display detailed values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `schemeTableau10` for categorical colors. Data comes from a Kaggle CSV loaded via `d3.csv`, rendered as SVG elements within a reusable component function.

Mmaddineni2112@gmail.com
70% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable D3 scatter plot cycles through four numeric car-sales variables—mileage, engine size, year of manufacture, and price—on the x-axis while price stays on the y-axis, updating every 2.5 seconds with an animated transition. Built using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, it renders SVG circles from a Kaggle CSV and re-invokes the chart function to swap axes. The code demonstrates a modular `scatterPlot` factory pattern with setter methods for width, height, data, and accessors.

Mmaddineni2112@gmail.com
70% match