Warming Gradient #

CSS gradient visualizing historical temperature data, inspired by Ed Hawkins' Warming Stripes.

Installation #

You can use NPM (best for projects with a build process), a CDN (quick copy-paste into any HTML file), or download and include the CSS file yourself.

Option 1: Install with NPM #

Make sure you have Node.js installed and run this command in your project folder:

npm install warming-gradient

Import in CSS #

Add this at the top of your main CSS file:

@import 'node_modules/warming-gradient/warming-gradient.css';

Or just paste this <link> in the <head> of your HTML file:

<link rel="stylesheet" href="node_modules/warming-gradient/warming-gradient.css" />

The CSS class and variable will now be available in your project.

Option 2: Use via CDN #

Just paste this <link> in the <head> of your HTML file and the CSS class and variable will be available in your project:

<link rel="stylesheet" href="https://unpkg.com/warming-gradient" />

Option 3: Self-host warming-gradient.css #

1. Download the warming-gradient.css file from the source files here.
2. Place it in your project folder.
3. Include it in your HTML:

<link rel="stylesheet" href="path/to/warming-gradient.css" />

How to use #

Apply the class or variable directly in your HTML, for example:

<!-- Use with class -->
<div class="warming-gradient" style="height: 100px"></div>

<!-- Use with variable -->
<div style="height: 100px; background: var(--warming-gradient)"></div>

Contributing #

Usage #

Basic usage #

python3 data_to_files.py <path-to/data.csv>

This uses the default fixed scale (0.9 standard deviations).

Custom scale #

python3 data_to_files.py <path-to/data.csv> -s 3.0

or

python3 data_to_files.py <path-to/data.csv> --scale 3.0

Specify a custom standard deviation multiple to adjust color intensity.

Date range filtering #

python3 data_to_files.py <path-to/data.csv> -b 1950 -e 2020

or

python3 data_to_files.py <path-to/data.csv> -begin 1950 -end 2020

Filter data to a specific year range.

Input data format #

Your CSV file should have two columns:

• Column 1: Year (e.g., "2000", "2001", etc.)
• Column 2: Temperature value (numeric)

Additional columns in the CSV will be ignored. The script assumes the first row contains headers and automatically skips it.

Example:

Year,Temperature
2000,0.32867876
2001,0.47405365
2002,0.53470516

Output files #

The script generates two files:

1. warming-gradient.css - A CSS file with class and variable for Warming Gradient
2. warming-gradient.svg - Warming Gradient as SVG

How It Works #

Color mapping #

• Blue shades: Below baseline (cooler temperatures)
• Red shades: Above baseline (warmer temperatures)
• Gray: Missing data

Reference periods #

• Baseline (1961-2010): Defines the midpoint where blue transitions to red
• Standard Deviation (1901-2000): Used to scale color intensity (only if a custom scale is provided)

Scaling modes #

• Fixed scale: Uses a constant value (default 0.9) when no argument is provided
• Calculated scale: Multiplies the calculated standard deviation by your specified value

Read my blog post for more information

License #

Code licensed under MIT license. Licenses for data are included in their directory. Please double-check the license for all data yourself.