A line (and area) 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).

Desktop view
Design specification 
{
  "name": "bond-yields-desktop",
  "layout": {
    "width": 924,
    "height": 465,
    "composition": "single",// single view composition
    "row": [
      {
        "field": "growth",
        "scale": {
          "zero": false,// non-zero y scale
          "domain": [
            3,
            5.5
          ]
        },
        "type": "quantitative"
      }
    ],
    "column": [
      {
        "field": "year"
      }
    ],
    "vaxis": {// vertical axis design
      "grid": true,
      "gridColor": "#cccccc",
      "gridWidth": 1
    }
  },
  "layer": [
    {// first layer
      "transform": [// local filter
        {
          "filter": "datum.cat == 'forecast'"
        }
      ],
      "mark": {
        "type": "line",// line mark
        "color": {// color encoding, manual
          "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",// axis labels
          "field": "growth",
          "values": [
            3,
            3.5,
            4,
            4.5,
            5,
            5.5
          ],
          "dy": "-5px",
          "anchor": "start",
          "align": "left",
          "items": [
            {
              "fontSize": 11,
              "color": "#999999",
              "align": "left",
              "expression": "format(datum.value, '.1f') + (datum.index == 1 ? '%' : '')"// only the last element gets '%' unit
            }
          ]
        },
        {
          "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",// only the first and mod10=0 elements get '%' unit
              "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": [// only year of 2010 and 2016
            2010,
            2016
          ],
          "dx": -130,
          "dy": -100,
          "items": [
            {// common
              "width": 200,
              "fontSize": 13,
              "fontWeight": 700,
              "color": "red",
              "expression": "(datum.value + ' forecast for world GDP growth')"
            },
            {
              "width": 140,
              "condition": [// only year of 2010
                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": 140,
              "condition": [// only year of 2016
                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",// only year names
          "field": "forecasted_year",
          "orient": "bottom-right",
          "anchorAlign": "center",
          "dx": -50,
          "dy": 20,
          "items": [
            {
              "fontSize": 13,
              "color": "$mark"// color of its associating element's color
            }
          ]
        }
      ]
    },
    {// second layer
      "transform": [
        {// local filter
          "filter": "datum.cat == 'actual'"
        }
      ],
      "mark": {
        "type": "area",
        "color": {
          "value": {
            "x1": 1,
            "y1": 1,
            "x2": 1,
            "y2": 0,
            "gradient": "linear",
            "stops": [
              {
                "offset": 0.58,
                "color": "transparent"
              },
              {
                "offset": 1,
                "color": "lightgray"
              }
            ]
          }
        }
      }
    },
    {// third layer
      "transform": [
        {// local filter
          "filter": "datum.cat == 'actual'"
        }
      ],
      "mark": {
        "type": "line",
        "color": {
          "value": "black"
        },
        "strokeWidth": {
          "value": 2
        }
      }
    }
  ],
  "title": {// chart title elements
    "width": 965,
    "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": [// dataset for the visualization
    {
      "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-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-2010$-tf0-2016$-tf1-2010$-tf1-2011$-tf1-2012$-tf1-2013$-tf1-2014$-tf1-2015$-tf1-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
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
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
2011
2012
2013
2014
2015
2016
Cicero Specification

Below, we provide one transformation rule at a time, and show the intermediate result on the side.

Specification
{
  "$schema": "../cicero.json",
  "name": "bond-yields-mobile",
  "description": "This is a Cicero specification for 'Bond Yields' visualization from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}
View
Rules: Resize the chart and filtering
Resize the chart 
    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          365,
          450
        ]
      }
    }
Filter out data points of forecast_year less than or equal to 2011 
    {
      "description": "Filter out data points of forecast_year <= 2011",
      "specifier": {
        "role": "data",
        "data": [// OR
          {// datum query
            "forecasted_year": {
              "leq": 2011
            }
          },
          {// datum query
            "year": {
              "leq": 2011
            }
          }
        ]
      },
      "action": "remove"
    }
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$-y-p52412$-tf0-2016$-tf1-2012$-tf1-2013$-tf1-2014$-tf1-2015$-tf1-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
Rules: Remove the area mark and adjust the domin of the row element
Remove the area mark 
    {
      "description": "Remove area mark",
      "specifier": {
        "role": "mark",
        "mark": "area"
      },
      "action": "remove"
    }
Remove the axis value of 5.5 
    {
      "description": "Change the domain of row element",
      "specifier": {
        "role": "row",
        "field": "growth"
      },
      "action": "modify",
      "option": {
        "scale": {
          "domain": [
            3.0,
            5.0
          ]
        }
      }
    }

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$-tf1-2012$-tf1-2013$-tf1-2014$-tf1-2015$-tf1-2016
3.0
3.5
4.0
4.5
5.0%
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
Rule: Reposition a mark label
    {
      "description": "Reposition a mark label for 2016 (data annotation)",
      "specifier": {
        "role": "mark.label",
        "mark": "line",
        "text": {// text query
          "startsWith": "2016 forecast for"// with 'startsWith' operator
        }
      },
      "action": "reposition",
      "option": {// relative change using 'by' keyword
        "dx": {"by": -10},
        "dy": {"by": -40}
      }
    }
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