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