This website is for Vega-Lite v3. Go to the main Vega-Lite homepage for the latest release.

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/v3.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"
    },
    {
      "window": [
        {"op": "first_value", "field": "scaled_date", "as": "first_date"},
        {"op": "last_value", "field": "scaled_date", "as": "last_date"}
      ],
      "sort": [
        {"field": "scaled_date", "order": "ascending"}
      ],
      "groupby": ["decade"],
      "frame": [null, null]
    },
    {
      "calculate": "datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null",
      "as": "end"
    }
  ],
  "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}
    }
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "color": {
          "field": "decade",
          "type": "ordinal",
          "scale": {"scheme": "magma"},
          "legend": null
        }
      }
    },
    {
      "transform": [{"filter": {"field": "end", "equal": "first"}}],
      "mark": {"type": "text", "baseline": "top"},
      "encoding": {"text": {"field": "year", "type": "nominal"}}
    },
    {
      "transform": [{"filter": {"field": "end", "equal": "last"}}],
      "mark": {"type": "text", "baseline": "bottom"},
      "encoding": {"text": {"field": "year", "type": "nominal"}}
    }
  ],
  "config": {"text": {"align": "left", "dx": 3, "dy": 1}}
}