A bar chart about cost of loss and damage caused by historical disasters. This example covers transformation strategies for axis labels and nondata annotations.

See how the important property works (click)

Desktop view
Design specification 
{
  "name": "cost",
  "layout": {
    "composition": "single",// single view composition
    "width": 1024,
    "height": 612,
    "row": [// row element
      {
        "field": "cost"
      }
    ],
    "column": [// column element
      {
        "field": "year",
        "type": "ordinal"
      }
    ],
    "vaxis": {// vertical axis grid design
      "grid": true,
      "gridDash": [
        2,
        4
      ]
    }
  },
  "layer": [// layers
    {
      "mark": {// mark type and property
        "type": "bar",// bar mark
        "color": {// color-nominal
          "field": "labeled",
          "scale": {
            "range": [
              "#e3dcd1",
              "crimson"
            ]
          }
        },
        "stroke": {// static stroke color
          "value": "white"
        }
      },
      "text": [// text elements
        {
          "type": "on-axis",// axis label for 'cost' field, values 50, ..., 300
          "field": "cost",
          "values": [
            50,
            100,
            150,
            200,
            250,
            300
          ],
          "anchor": "start",
          "orient": "left",
          "items": [
            {
              "align": "right",
              "fontSize": 14,
              "fontWeight": 100,
              "custom": {// to express special format for the value of 300; can also use an expression
                "300": "$300 billion"
              },
              "fill": "white"
            }
          ]
        },
        {
          "type": "on-axis",// axis label for 'year' field, values 1980, 1985, ..., 2015
          "field": "year",
          "values": [
            "1980",
            "1985",
            "1990",
            "1995",
            "2000",
            "2005",
            "2010",
            "2015"
          ],
          "angle": 0,// To prevent rotation
          "items": [
            {
              "fontSize": 14,
              "fontWeight": 100,
              "align": "center"
            }
          ],
          "tick": {// axis label tick
            "ticks": true,
            "offset": 3
          }
        },
        {
          "type": "on-mark",// mark label for 'label' field
          "field": "label",
          "orient": "top-right",
          "anchorAlign": "start",
          "values": [
            "Hurricane Katrina",
            "Hurricane Maria",
            "Hurricane Harvey",
            "Hurricane Irma",
            "California wildfires"
          ],
          "width": 120,
          "dx": 10,
          "dy": 10,
          "items": [
            {
              "fontSize": 12,
              "fontWeight": 100
            },
            {
              "fontSize": 12,
              "fontWeight": 700,
              "expression": "('$' + datum.cost + ' billion')"
            }
          ]
        }
      ]
    }
  ],
  "nondata": {// non-data elements
    "items": [
      {
        "type": "text",// non-data annotation
        "name": "in-title",
        "x": 250,// positioning
        "y": 275,
        "dx": "-50%",
        "dy": "-50%",
        "width": 180,// sizing
        "fill": "white",
        "text": [
          {
            "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
          }
        ]
      }
    ]
  },
  "data": [// dataset for the visualization
    {
      "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": "Hurricane 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": "Hurricane Harvey",
      "_index_": 38
    },
    {
      "year": 2017,
      "cost": 90,
      "labeled": true,
      "label": "Hurricane Maria",
      "_index_": 39
    },
    {
      "year": 2017,
      "cost": 50,
      "labeled": true,
      "label": "Hurricane Irma",
      "_index_": 40
    },
    {
      "year": 2017,
      "cost": 18,
      "labeled": true,
      "label": "California wildfires",
      "_index_": 41
    },
    {
      "year": 2017,
      "cost": 25,
      "labeled": false,
      "_index_": 42
    }
  ]
}
View
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p1691$-y-p48625$-y-p48780$-y-p49586$-y-p49741$-y-p50547
Hurricane Katrina
$161 billion
Hurricane Harvey
$125 billion
Hurricane Maria
$90 billion
Hurricane Irma
$50 billion
California wildfires
$18 billion
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
50
100
150
200
250
$300 billion
1980
1985
1990
1995
2000
2005
2010
2015
Cicero Specification

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

Specification
{
  "$schema": "../cicero.json",
  "name": "cost-mobile",
  "description": "This is a Cicero specification for 'Disaster Cost' visualization from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}
Rule: Resize the chart
    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          375,
          325
        ]
      }
    }
View
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p1691$-y-p48625$-y-p48780$-y-p49586$-y-p49741$-y-p50547
Hurricane Katrina
$161 billion
Hurricane Harvey
$125 billion
Hurricane Maria
$90 billion
Hurricane Irma
$50 billion
California wildfires
$18 billion
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
50
100
150
200
250
$300 billion
1980
1985
1990
1995
2000
2005
2010
2015
Rule: Externalize annotation (as a title)
    {
      "description": "Externalize the annotations as a title",
      "specifier": {
        "role": "annotation"
      },
      "action": "replace",
      "option": {
        "to": {
          "role": "title",
          "width": null
        }
      }
    }

View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p1691$-y-p48625$-y-p48780$-y-p49586$-y-p49741$-y-p50547
Hurricane Katrina
$161 billion
Hurricane Harvey
$125 billion
Hurricane Maria
$90 billion
Hurricane Irma
$50 billion
California wildfires
$18 billion
50
100
150
200
250
$300 billion
1980
1985
1990
1995
2000
2005
2010
2015
Rule: Remove axis values
    {
      "description": "Remove axis values: 250, 150, 50 (partially reusable)",
      "specifier": {
        "role": "vAxis"
      },
      "action": "remove",
      "option": {
        "values.filter": "datum.value % 100 != 0"
      }
    },
View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p48625$-y-p49586$-y-p50547
Hurricane Katrina
$161 billion
Hurricane Harvey
$125 billion
Hurricane Maria
$90 billion
Hurricane Irma
$50 billion
California wildfires
$18 billion
100
200
$300 billion
1980
1985
1990
1995
2000
2005
2010
2015
Rule: Remove the second part of mark labels
    {
      "description": "Remove the second part of mark labels",
      "specifier": {
        "role": "mark.label"
      },
      "action": "remove",
      "option": {
        "items": {
          "index": 2
        }
      }
    },
View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p48625$-y-p49586$-y-p50547
Hurricane Katrina
Hurricane Harvey
Hurricane Maria
Hurricane Irma
California wildfires
100
200
$300 billion
1980
1985
1990
1995
2000
2005
2010
2015
Rule: Modify mark labels (shortening, adding ticks, and repositioning)
    {
      "description": "Modify mark labels (shortening, adding ticks, and repositioning)",
      "specifier": {
        "role": "mark.label"
      },
      "action": "modify",
      "option": {
        "expression": "(datum.value.startsWith('Hurricane') ? datum.value.split(' ')[1] : datum.value)",// using expression
        "dx": -5,// repositioning
        "orient": "top-left",
        "anchor": "end",
        "align": "right",
        "tick": true// adding tick
      }
    }
View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p48625$-y-p49586$-y-p50547
Katrina
Harvey
Maria
Irma
California wildfires
100
200
$300 billion
1980
1985
1990
1995
2000
2005
2010
2015
Rule: Shorten the axis labels (e.g., 1980 to '80)
    {
      "description": "Shorten the axis labels",
      "specifier": {
        "role": "axis.label",
        "field": "year"
      },
      "action": "modify",
      "option": {
        "expression": "(\"'\" + datum.value.toString().slice(2))",
        "dx": -5,
        "orient": "top-left",
        "anchor": "end",
        "align": "right",
        "tick": true
      }
    }
View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455$-x-p16460$-x-p16486$-x-p16491$-x-p37349$-x-p37354$-x-p37380$-x-p37385$-y-p48625$-y-p49586$-y-p50547
Katrina
Harvey
Maria
Irma
California wildfires
100
200
$300 billion
'80
'85
'90
'95
'00
'05
'10
'15
Use of the important propoerty
Rules: change the axis label colors without the important property (demonstration purposes)
Change the color of every label on the horizontal axis (year) 
{
  "description": "Change color of hAxis labels",
  "specifier": {
    "role": "hAxis.label"
  },
  "action": "modify",
  "option": {
    "color": "blue"
  }
},
Change the color of the label for "1995" on the horizontal axis (year). 
{
  "description": "Change color of hAxis labels (special)",
  "specifier": {
    "role": "hAxis.label",
    "values": [
      "1995"
    ]
  },
  "action": "modify",
  "option": {
    "color": "red"
  }
}
View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455!$-x-p16460!$-x-p16486!$-x-p16491!$-x-p37349!$-x-p37354!$-x-p37380!$-x-p37385!$-y-p48625!$-y-p49586!$-y-p50547!
Katrina
Harvey
Maria
Irma
California wildfires
100
200
$300 billion
'80
'85
'90
'95
'00
'05
'10
'15
Rules: change the axis label colors with the important property (demonstration purposes; alternative)
Change the color of every label on the horizontal axis (year) with the important property, which overrides the next rule. 
{
  "description": "Change color of hAxis labels",
  "specifier": {
    "role": "hAxis.label"
  },
  "action": "modify",
  "option": {
    "color": "blue"
  }
  "important": true,
},
Change the color of the label for "1995" on the horizontal axis (year), which is not effective. 
{
  "description": "Change color of hAxis labels (special)",
  "specifier": {
    "role": "hAxis.label",
    "values": [
      "1995"
    ]
  },
  "action": "modify",
  "option": {
    "color": "red"
  }
}
View
Total cost of major natural disasters
For disasters causing more than $1 billion in losses
$-x-p16455!$-x-p16460!$-x-p16486!$-x-p16491!$-x-p37349!$-x-p37354!$-x-p37380!$-x-p37385!$-y-p48625!$-y-p49586!$-y-p50547!
Katrina
Harvey
Maria
Irma
California wildfires
100
200
$300 billion
'80
'85
'90
'95
'00
'05
'10
'15