A line chart about changes to forcasted GDP growth rate over time. This example covers transformation strategies regarding data (filtering) and downstream changes. Further descriptions are available in Kim et al. (2021).

Mobile view
Design specification
{
  "name": "bond-yields-mobile",
  "transform": [
    {
      "filter": "!(((datum.forecasted_year <= 2011)) || ((datum.year <= 2011)))"
    }
  ],
  "layout": {
    "width": 365,
    "height": 450,
    "composition": "single",
    "row": [
      {
        "field": "growth",
        "scale": {
          "zero": false,
          "domain": [
            3,
            5.5
          ]
        },
        "type": "quantitative"
      }
    ],
    "column": [
      {
        "field": "year"
      }
    ],
    "vaxis": {
      "grid": true,
      "gridColor": "#cccccc",
      "gridWidth": 1
    }
  },
  "layer": [
    {
      "transform": [
        {
          "filter": "datum.cat == 'forecast'"
        },
        {
          "filter": "!(((datum.forecasted_year <= 2011)) || ((datum.year <= 2011)))"
        }
      ],
      "mark": {
        "type": "line",
        "color": {
          "field": "forecasted_year",
          "type": "nominal",
          "scale": {
            "domain": [
              2010,
              2011,
              2012,
              2013,
              2014,
              2015,
              2016
            ],
            "range": [
              "red",
              "lightgray",
              "lightgray",
              "lightgray",
              "lightgray",
              "lightgray",
              "red"
            ]
          }
        }
      },
      "text": [
        {
          "type": "on-axis",
          "field": "growth",
          "values": [
            3,
            3.5,
            4,
            4.5,
            5
          ],
          "dy": "-5px",
          "anchor": "start",
          "align": "left",
          "items": [
            {
              "fontSize": 11,
              "color": "#999999",
              "align": "left",
              "expression": "format(datum.value, '.1f') + (datum.index == 1 ? '%' : '')"
            }
          ]
        },
        {
          "type": "on-axis",
          "field": "year",
          "values": [
            2010,
            2011,
            2012,
            2013,
            2014,
            2015,
            2016,
            2017,
            2018,
            2019,
            2020,
            2021
          ],
          "items": [
            {
              "fontSize": 11,
              "color": "#999999",
              "align": "left",
              "expression": "(datum.value % 10 == 0 || datum.index == 0 ? datum.value : '\\'' + (datum.value % 100))"
            }
          ],
          "tick": true
        },
        {
          "type": "on-mark",
          "field": "forecasted_year",
          "orient": "top-right",
          "anchorAlign": "end",
          "values": [
            2010,
            2016
          ],
          "dx": -170,
          "dy": -250,
          "items": [
            {
              "width": 240,
              "fontSize": 13,
              "fontWeight": 700,
              "color": "red",
              "expression": "(datum.value + ' forecast for world GDP growth')"
            },
            {
              "width": 160,
              "condition": [
                2010
              ],
              "fontSize": 13,
              "fontWeight": 100,
              "expression": "'In April 2010 the IMF forecast the world’s GDP growth to be 4.2% that year and 4.6% in 2015'"
            },
            {
              "width": 160,
              "condition": [
                2016
              ],
              "fontSize": 13,
              "fontWeight": 100,
              "align": "right",
              "expression": "'In April 2016 the IMF forecast the world’s GDP growth to be 3.9 this year and 3.2 in 2021'"
            }
          ],
          "tick": true
        }, 
        {
          "type": "on-mark",
          "field": "forecasted_year",
          "orient": "bottom-right",
          "anchorAlign": "center",
          "dx": -50,
          "dy": 20,
          "items": [
            {
              "fontSize": 13,
              "color": "$mark"
            }
          ]
        }
      ]
    },
    {
      "transform": [
        {
          "filter": "datum.cat == 'actual'"
        },
        {
          "filter": "!(((datum.forecasted_year <= 2011)) || ((datum.year <= 2011)))"
        }
      ],
      "mark": {
        "type": "line",
        "color": {
          "value": "black"
        },
        "strokeWidth": {
          "value": 2
        }
      }
    }
  ],
  "title": {
    "width": 365,
    "align": "center",
    "items": [
      {
        "text": "Forecasts for the world's gross domestic product, change from previous year",
        "fontWeight": 700,
        "fontSize": 16,
        "align": "left"
      },
      {
        "text": "Forecasts are shown for the forecasting year and the next five years. Forecasts are made in April of each year.",
        "fontSize": 13,
        "fontcolor": "#333333",
        "align": "left"
      }
    ]
  },
  "data": [
    {
      "year": 2010,
      "forecasted_year": 2010,
      "growth": 5.4,
      "cat": "actual"
    },
    {
      "year": 2011,
      "forecasted_year": 2011,
      "growth": 4.2,
      "cat": "actual"
    },
    {
      "year": 2012,
      "forecasted_year": 2012,
      "growth": 3.49,
      "cat": "actual"
    },
    {
      "year": 2013,
      "forecasted_year": 2013,
      "growth": 3.35,
      "cat": "actual"
    },
    {
      "year": 2014,
      "forecasted_year": 2014,
      "growth": 3.4,
      "cat": "actual"
    },
    {
      "year": 2015,
      "forecasted_year": 2015,
      "growth": 3.1,
      "cat": "actual"
    },
    {
      "year": 2010,
      "forecasted_year": 2010,
      "growth": 4.2,
      "cat": "forecast"
    },
    {
      "year": 2011,
      "forecasted_year": 2010,
      "growth": 4.3,
      "cat": "forecast"
    },
    {
      "year": 2012,
      "forecasted_year": 2010,
      "growth": 4.45,
      "cat": "forecast"
    },
    {
      "year": 2013,
      "forecasted_year": 2010,
      "growth": 4.55,
      "cat": "forecast"
    },
    {
      "year": 2014,
      "forecasted_year": 2010,
      "growth": 4.6,
      "cat": "forecast"
    },
    {
      "year": 2015,
      "forecasted_year": 2010,
      "growth": 4.65,
      "cat": "forecast"
    },
    {
      "year": 2011,
      "forecasted_year": 2011,
      "growth": 4.4,
      "cat": "forecast"
    },
    {
      "year": 2012,
      "forecasted_year": 2011,
      "growth": 4.52,
      "cat": "forecast"
    },
    {
      "year": 2013,
      "forecasted_year": 2011,
      "growth": 4.6,
      "cat": "forecast"
    },
    {
      "year": 2014,
      "forecasted_year": 2011,
      "growth": 4.6,
      "cat": "forecast"
    },
    {
      "year": 2015,
      "forecasted_year": 2011,
      "growth": 4.75,
      "cat": "forecast"
    },
    {
      "year": 2016,
      "forecasted_year": 2011,
      "growth": 4.85,
      "cat": "forecast"
    },
    {
      "year": 2012,
      "forecasted_year": 2012,
      "growth": 3.55,
      "cat": "forecast"
    },
    {
      "year": 2013,
      "forecasted_year": 2012,
      "growth": 4.1,
      "cat": "forecast"
    },
    {
      "year": 2014,
      "forecasted_year": 2012,
      "growth": 4.4,
      "cat": "forecast"
    },
    {
      "year": 2015,
      "forecasted_year": 2012,
      "growth": 4.6,
      "cat": "forecast"
    },
    {
      "year": 2016,
      "forecasted_year": 2012,
      "growth": 4.65,
      "cat": "forecast"
    },
    {
      "year": 2017,
      "forecasted_year": 2012,
      "growth": 4.7,
      "cat": "forecast"
    },
    {
      "year": 2013,
      "forecasted_year": 2013,
      "growth": 3.3,
      "cat": "forecast"
    },
    {
      "year": 2014,
      "forecasted_year": 2013,
      "growth": 4.05,
      "cat": "forecast"
    },
    {
      "year": 2015,
      "forecasted_year": 2013,
      "growth": 4.4,
      "cat": "forecast"
    },
    {
      "year": 2016,
      "forecasted_year": 2013,
      "growth": 4.45,
      "cat": "forecast"
    },
    {
      "year": 2017,
      "forecasted_year": 2013,
      "growth": 4.5,
      "cat": "forecast"
    },
    {
      "year": 2018,
      "forecasted_year": 2013,
      "growth": 4.48,
      "cat": "forecast"
    },
    {
      "year": 2014,
      "forecasted_year": 2014,
      "growth": 3.6,
      "cat": "forecast"
    },
    {
      "year": 2015,
      "forecasted_year": 2014,
      "growth": 3.8,
      "cat": "forecast"
    },
    {
      "year": 2016,
      "forecasted_year": 2014,
      "growth": 3.95,
      "cat": "forecast"
    },
    {
      "year": 2017,
      "forecasted_year": 2014,
      "growth": 3.93,
      "cat": "forecast"
    },
    {
      "year": 2018,
      "forecasted_year": 2014,
      "growth": 3.9,
      "cat": "forecast"
    },
    {
      "year": 2019,
      "forecasted_year": 2014,
      "growth": 3.85,
      "cat": "forecast"
    },
    {
      "year": 2015,
      "forecasted_year": 2015,
      "growth": 3.45,
      "cat": "forecast"
    },
    {
      "year": 2016,
      "forecasted_year": 2015,
      "growth": 3.8,
      "cat": "forecast"
    },
    {
      "year": 2017,
      "forecasted_year": 2015,
      "growth": 3.85,
      "cat": "forecast"
    },
    {
      "year": 2018,
      "forecasted_year": 2015,
      "growth": 3.9,
      "cat": "forecast"
    },
    {
      "year": 2019,
      "forecasted_year": 2015,
      "growth": 3.95,
      "cat": "forecast"
    },
    {
      "year": 2020,
      "forecasted_year": 2015,
      "growth": 3.99,
      "cat": "forecast"
    },
    {
      "year": 2016,
      "forecasted_year": 2016,
      "growth": 3.2,
      "cat": "forecast"
    },
    {
      "year": 2017,
      "forecasted_year": 2016,
      "growth": 3.55,
      "cat": "forecast"
    },
    {
      "year": 2018,
      "forecasted_year": 2016,
      "growth": 3.65,
      "cat": "forecast"
    },
    {
      "year": 2019,
      "forecasted_year": 2016,
      "growth": 3.75,
      "cat": "forecast"
    },
    {
      "year": 2020,
      "forecasted_year": 2016,
      "growth": 3.78,
      "cat": "forecast"
    },
    {
      "year": 2021,
      "forecasted_year": 2016,
      "growth": 3.85,
      "cat": "forecast"
    }
  ]
}
View
Forecasts for the world's gross domestic product, change from previous year
Forecasts are shown for the forecasting year and the next five years. Forecasts are made in April of each year.
$-x-p37382!$-x-p37383!$-x-p37384!$-x-p37385!$-x-p37386!$-x-p37387!$-x-p37388!$-x-p37389!$-x-p37411!$-x-p37412!$-y-p51!$-y-p50490!$-y-p52!$-y-p51451!$-y-p53!$-tf0-2016$-tf2-2012$-tf2-2013$-tf2-2014$-tf2-2015$-tf2-2016
3.0
3.5
4.0
4.5
5.0
5.5%
2012
'13
'14
'15
'16
'17
'18
'19
2020
'21
2016 forecast for world GDP growth
In April 2016 the IMF forecast the world’s GDP growth to be 3.9 this year and 3.2 in 2021
2012
2013
2014
2015
2016
Cicero Specification
Specification
{
  "$schema": "../cicero.json",
  "name": "bond-yields-mobile",
  "description": "This is a Cicero specification for 'Bond Yields' visualization from mobile to desktop.",
  "metadata": {
    "condition": "large"
  },
  "transformations": [
    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          924,
          465
        ]
      }
    },
    {
      "description": "Remove filters for data points with 'forecast_year' <= 2011",
      "specifier": {
        "role": "data"
      },
      "action": "add",
      "option": {
        "data": [
          {
            "forecasted_year": {
              "leq": 2011
            }
          },
          {
            "year": {
              "leq": 2011
            }
          }
        ]
      }
    },
    {
      "description": "Add mark's label",
      "specifier": {
        "role": "mark.label",
        "mark": "line",
        "index": 1
      },
      "action": "add",
      "option": {
        "text": {
          "items": [
            "2010 forecast for world GDP growth",
            "In April 2010 the IMF forecast the world's GDP growth to be 4.2% that year and 4.6% in 2015"
          ]
        },
        "data": {
          "year": 2010
        }
      }
    },
    {
      "description": "Change the domain of row element",
      "specifier": {
        "role": "row",
        "field": "growth"
      },
      "action": "modify",
      "option": {
        "scale": {
          "domain": [
            3.0,
            5.5
          ]
        }
      }
    }
    {
      "description": "Add the vertical axis element for growth-rate of 5.5",
      "specifier": {
        "role": "vAxis"
      },
      "action": "add",
      "option": {
        "values": [5.5]
      }
    },
    {
      "description": "Add an area mark",
      "specifier": {
        "role": "layer"
      },
      "action": "add",
      "option": {
        "data": {
          "cat": "actual"
        },
        "role": "mark",
        "mark": "area",
        "index": 2,
        "color": {
          "value": {
            "x1": 1,
            "y1": 1,
            "x2": 1,
            "y2": 0,
            "gradient": "linear",
            "stops": [
              {
                "offset": 0.58,
                "color": "transparent"
              },
              {
                "offset": 1,
                "color": "lightgray"
              }
            ]
          }
        }
      }
    },
    {
      "description": "Reposition the mark label for 2016 (data annotation)",
      "specifier": {
        "role": "mark.label",
        "mark": "line",
        "text": {
          "startsWith": "2016 forecast for"
        }
      },
      "action": "reposition",
      "option": {
        "dx": {"by": 10},
        "dy": {"by": 40}
      }
    },
    {
      "description": "Reposition the mark label for 2010 (data annotation)",
      "specifier": {
        "role": "mark.label",
        "mark": "line",
        "text": {
          "startsWith": "2010 forecast for"
        }
      },
      "action": "reposition",
      "option": {
        "dx": {"by": 10},
        "dy": {"by": 40}
      }
    },
    {
      "description": "Adjust title area",
      "specifier": {
        "role": "title"
      },
      "action": "modify",
      "option": {
        "width": 924
      }
    }
  ]
}
Transformed View
Forecasts for the world's gross domestic product, change from previous year
Forecasts are shown for the forecasting year and the next five years. Forecasts are made in April of each year.
$-x-p37380$-x-p37381$-x-p37382$-x-p37383$-x-p37384$-x-p37385$-x-p37386$-x-p37387$-x-p37388$-x-p37389$-x-p37411$-x-p37412$-y-p51$-y-p50490$-y-p52$-y-p51451$-y-p53$-y-p52412$-tf0-2016$-tf1-2010$-tf2-2010$-tf2-2011$-tf2-2012$-tf2-2013$-tf2-2014$-tf2-2015$-tf2-2016
3.0
3.5
4.0
4.5
5.0
5.5%
2010
'11
'12
'13
'14
'15
'16
'17
'18
'19
2020
'21
2016 forecast for world GDP growth
In April 2016 the IMF forecast the world’s GDP growth to be 3.9 this year and 3.2 in 2021
2010 forecast for world GDP growth
In April 2010 the IMF forecast the world’s GDP growth to be 4.2% that year and 4.6% in 2015
2010
2011
2012
2013
2014
2015
2016