A bar chart about cost of loss and damage caused by historical disasters. This example covers transformation strategies for axis labels and nondata annotations.
The horizontal axis labels are not shortened in this case.
{"data": [{"year": 1980,"cost": 40,"labeled": false,"_index_": 0},{"year": 1981,"cost": 5,"labeled": false,"_index_": 1},{"year": 1982,"cost": 25,"labeled": false,"_index_": 2},{"year": 1983,"cost": 35,"labeled": false,"_index_": 3},{"year": 1984,"cost": 10,"labeled": false,"_index_": 4},{"year": 1985,"cost": 25,"labeled": false,"_index_": 5},{"year": 1986,"cost": 15,"labeled": false,"_index_": 6},{"year": 1987,"cost": 0,"labeled": false,"_index_": 7},{"year": 1988,"cost": 45,"labeled": false,"_index_": 8},{"year": 1989,"cost": 35,"labeled": false,"_index_": 9},{"year": 1990,"cost": 20,"labeled": false,"_index_": 10},{"year": 1991,"cost": 30,"labeled": false,"_index_": 11},{"year": 1992,"cost": 60,"labeled": false,"_index_": 12},{"year": 1993,"cost": 50,"labeled": false,"_index_": 13},{"year": 1994,"cost": 20,"labeled": false,"_index_": 14},{"year": 1995,"cost": 25,"labeled": false,"_index_": 15},{"year": 1996,"cost": 20,"labeled": false,"_index_": 16},{"year": 1997,"cost": 15,"labeled": false,"_index_": 17},{"year": 1998,"cost": 35,"labeled": false,"_index_": 18},{"year": 1999,"cost": 30,"labeled": false,"_index_": 19},{"year": 2000,"cost": 20,"labeled": false,"_index_": 20},{"year": 2001,"cost": 30,"labeled": false,"_index_": 21},{"year": 2002,"cost": 25,"labeled": false,"_index_": 22},{"year": 2003,"cost": 35,"labeled": false,"_index_": 23},{"year": 2004,"cost": 75,"labeled": false,"_index_": 24},{"year": 2005,"cost": 161,"labeled": true,"label": "Katrina","_index_": 25},{"year": 2005,"cost": 60,"labeled": false,"_index_": 26},{"year": 2006,"cost": 30,"labeled": false,"_index_": 27},{"year": 2007,"cost": 25,"labeled": false,"_index_": 28},{"year": 2008,"cost": 75,"labeled": false,"_index_": 29},{"year": 2009,"cost": 25,"labeled": false,"_index_": 30},{"year": 2010,"cost": 25,"labeled": false,"_index_": 31},{"year": 2011,"cost": 75,"labeled": false,"_index_": 32},{"year": 2012,"cost": 125,"labeled": false,"_index_": 33},{"year": 2013,"cost": 40,"labeled": false,"_index_": 34},{"year": 2014,"cost": 30,"labeled": false,"_index_": 35},{"year": 2015,"cost": 40,"labeled": false,"_index_": 36},{"year": 2016,"cost": 45,"labeled": false,"_index_": 37},{"year": 2017,"cost": 125,"labeled": true,"label": "Harvey","_index_": 38},{"year": 2017,"cost": 90,"labeled": true,"label": "Maria","_index_": 39},{"year": 2017,"cost": 50,"labeled": true,"label": "Irma","_index_": 40},{"year": 2017,"cost": 18,"labeled": true,"label": "California wildfires","_index_": 41},{"year": 2017,"cost": 25,"labeled": false,"_index_": 42}],"name": "cost","layout": {"composition": "single","width": 375,"height": 350,"row": [{"field": "cost"}],"column": [{"field": "year","type": "ordinal"}],"vaxis": {"grid": true,"gridDash": [2,4]}},"layer": [{"mark": {"type": "bar","color": {"field": "labeled","scale": {"range": ["#e3dcd1","crimson"]}},"stroke": {"value": "white"}},"text": [{"type": "on-axis","field": "cost","values": [100,200,300],"anchor": "start","orient": "left","items": [{"align": "right","fontSize": 14,"fontWeight": 100,"custom": {"300": "$300 billion"},"fill": "white"}]},{"type": "on-axis","field": "year","values": ["1980","1985","1990","1995","2000","2005","2010","2015"],"angle": 0,"items": [{"fontSize": 14,"fontWeight": 100,"align": "center"}],"tick": {"ticks": true,"offset": 3}},{"type": "on-mark","field": "label","orient": "top-left","anchorAlign": "end","align": "right","values": ["Katrina","Maria","Harvey","Irma"],"width": 120,"dx": -10,"dy": 10,"items": [{"fontSize": 12,"fontWeight": 100,"expression": "datum.value"}],"tick": {"ticks": true}},{"type": "on-mark","field": "label","orient": "top-left","anchorAlign": "end","values": ["California wildfires"],"width": 120,"dx": -10,"dy": -10,"items": [{"fontSize": 12,"fontWeight": 100,"expression": "(datum.value)"}],"tick": {"ticks": true}}]}],"nondata": {},"title": {"items": [{"text": "Total cost of major natural disasters","align": "center","fontSize": 14,"fontWeight": 700,"lineHeight": 130},{"text": "For disasters causing more than $1 billion in losses","align": "center","fontSize": 13,"lineHeight": 140}]}}
{"$schema": "../cicero.json","name": "cost-desktop","description": "This is a Cicero specification for 'Disaster Cost' visualization from mobile to desktop.","metadata": {"condition": "large"},"transformations": [{"description": "Resize the chart","specifier": {"role": "view"},"action": "modify","option": {"size": [1024,612]}},{"description": "Make title to annotation","specifier": {"role": "title"},"action": "replace","option": {"to": {"role": "annotation","internal": true// This enables the automated positioning of an internalized annotation (only supported by our extension of Vega-Lite). },"separate": false// This denotes that internalizing all the title element as a single non-data annotation. }},{// a variation from the destkop->mobile transformation "description": "Add axis values: 250, 150, 50","specifier": {"role": "vAxis"},"action": "add","option": {"values": [50,150,250]}},{// a variation from the destkop->mobile transformation "description": "Lengthen the labels","specifier": {"role": "mark.label"},"action": "modify","option": {"expression": "(datum.value !== 'California wildfires' ? 'Hurricane ' + datum.value : datum.value)","dx": 10,"orient": "top-right","anchor": "start","align": "left","tick": null}},{"description": "Add on-mark second items (specific to the dataset)","specifier": {"role": "mark.label"},"action": "add","option": {"items": [{"fontSize": 12,"fontWeight": 700,"expression": "('$' + datum.cost + ' billion')"}]}}]}