Northern hemisphere sea ice extent

100%

Northern hemisphere sea ice extent

✓ Published0🌍 Public

Last edited Nov 27, 2019

Created on Nov 27, 2019

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/77f12d419e71e572f4250a52ef9bf1ad'>Northern hemisphere sea ice extent</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

73% 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…

summer-heat

The chart displays monthly average temperatures from 1881 to 2017, with each month’s data points laid out vertically and color-coded by year. It uses `d3.nestBy` to group data by month and `d3.line` to draw rolling average paths, while `ss.linearRegression` adds trend lines for each month. Circles representing individual years are rendered with SVG, and hovering highlights all data for that year via `d3.attachTooltip`. The visualization reveals warming trends across most months, with the steepest increases in winter and spring.

11wheel

69% match

Loading thumbnail…

heat-histogram

This animated heat-histogram shows how summer temperature distributions have shifted over time, cycling through the years 1951, 1983, 1994, and 2005. A single SVG path, drawn with `d3.area` and `d3.curveBasis`, is used as a mask over five colored rectangles to create a multi-color histogram. Each year’s distribution is loaded from a TSV file, and `d3.interval` triggers transitions that update the path’s `d` attribute and animate the displayed year text.

11wheel

69% match

Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl

69% match

Loading thumbnail…

Svelte + D3: Radial

This radial chart displays daily global surface temperatures from 1940 to 2024, with each year drawn as a single circular path. The visualization highlights 2023 and 2024 in distinct colors, while older years appear as faint white rings. Using d3.lineRadial with a curveCatmullRom, the code maps day-of-year to angle and temperature values to radius via d3.scaleLinear. Data is loaded from a CSV using d3.csv with autoType, grouped by year with d3.groups, and rendered as SVG paths. The background uses a dark radial gradient, with an opacity scale differentiating historical from recent years.

MMatthias Stahl

69% match

Loading thumbnail…

https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv

This visualization displays global temperature anomalies from 1881 to 1933, with each year as a row and months as columns, colored from blue (cooler) to red (warmer). It uses D3.js to parse the CSV data and render a heatmap grid, with scales mapping temperature values to a diverging color scheme. The dataset comes from NASA GISS, providing monthly and seasonal temperature deviations from a baseline. The code employs d3.csv to load the data and d3.scaleSequential for color encoding.

JJustinGOSSES

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

68% match