Coder Social home page Coder Social logo

d3-stripes's Introduction

WARMING STRIPES 1880-2021

final visualization This graph is showing the temperature anomaly from the averaged monthly global (land and sea-surface temperatures) 30-year-mean from 1951-1980 as the color of each year's rectangle. Each year is represented by a recatangle, with years as the x-axis, the year 1880 (when modern record-keeping began) being on the far left and 2021 (last year with complete data) on the far right. The year's difference from the baseline temperature is the anomaly. Normally, those values cooler than baseline are in the blue range, and those warmer than baseline are in the orange range. However, as this is a tutorial, they are mapped directly.

This is a data visualization project based off of Ed Hawkins' original presentation. My goal is to learn some D3. I'm following a tutorial from v5. The tutorial is by Elisabeth Robson, and is available at several places online.

The dataset is from NASA's Combined Land-Surface Air and Sea-Surface Water Temperature Anomalies (Land-Ocean Temperature Index, L-OTI), with the base period: 1951-1980. That is, these monthly deviations are from the corresponding 1951-1980 means. (sources: GHCN-v4 1880-12/2021 + SST: ERSST v5 1880-12/2021 using elimination of outliers and homogeneity adjustment)

The Colors were for the scale approximated from https://colorbrewer2.org, with the deepest blue being the lowest (cooler than average) from the baseline, and the deepest orange being the highest (warmest) anomaly.

The min and max for the anomalies are found, and used as a range for the colorbar. We have 18 colors to map over -0.48 to 1.02, so the middle point isn't the palest color.

I plan on adding a color bar legend at some point.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.