Carbon Dioxide in the Atmosphere

This example was inspired by Gregor Aisch’s Carbon Dioxide Concentration By Decade.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "data/co2-concentration.csv",
    "format": {"parse": {"Date": "utc:'%Y-%m-%d'"}}
  },
  "width": 800,
  "height": 500,
  "transform": [
    {"calculate": "year(datum.Date)", "as": "year"},
    {"calculate": "floor(datum.year / 10)", "as": "decade"},
    {
      "calculate": "(datum.year % 10) + (month(datum.Date)/12)",
      "as": "scaled_date"
    },
    {
      "calculate": "datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null",
      "as": "end"
    }
  ],
  "encoding": {
    "color": {
      "field": "decade",
      "type": "ordinal",
      "scale": {"scheme": "magma"},
      "legend": null
    }
  },

  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "scaled_date",
          "type": "quantitative",
          "axis": {"title": "Year into Decade", "tickCount": 11}
        },
        "y": {
          "field": "CO2",
          "title": "CO2 concentration in ppm",
          "type": "quantitative",
          "scale": {"zero": false}
        }
      }
    },
    {
      "mark": {"type": "text", "baseline": "top"},
      "encoding": {
        "x": {
          "aggregate": "min",
          "field": "scaled_date",
          "type": "quantitative"
        },
        "y": {
          "aggregate": {"argmin": "scaled_date"},
          "field": "CO2",
          "type": "quantitative"
        },
        "text": {
          "aggregate": {"argmin": "scaled_date"},
          "field": "year",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "scaled_date",
          "type": "quantitative"
        },
        "y": {
          "aggregate": {"argmax": "scaled_date"},
          "field": "CO2",
          "type": "quantitative"
        },
        "text": {
          "aggregate": {"argmax": "scaled_date"},
          "field": "year",
          "type": "nominal"
        }
      }
    }
  ],
  "config": {"text": {"align": "left", "dx": 3, "dy": 1}}
}