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).
{"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"}]}
{"$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}}]}