Natural Disasters (Vega-Lite; Desktop → Mobile)

Mobile view

Design specification View

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/disasters.csv"
  },
  "width": 600,
  "height": 400,
  "transform": [
    {"filter": "datum.Entity !== 'All natural disasters'"}
  ],
  "mark": {
    "type": "circle",
    "opacity": 0.8,
    "stroke": "black",
    "strokeWidth": 1
  },
  "encoding": {
    "x": {
      "field": "Year",
      "type": "temporal",
      "axis": {"grid": false}
    },
    "y": {"field": "Entity", "type": "nominal", "axis": {"title": ""}},
    "size": {
      "field": "Deaths",
      "type": "quantitative",
      "title": "Annual Global Deaths",
      "legend": {"values": [500000, 1000000, 2000000,3000000]},// Legened values are modified for the demonstration purpose.
      "scale": {"rangeMax": 5000}
    },
    "color": {"field": "Entity", "type": "nominal", "legend": null}
  }
}

View

Cicero Specification

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

Specification

{
  "$schema": "../cicero.json",
  "name": "vl-disaster-mobile",
  "description": "This is a Cicero specification for 'Natural Disaster' visualization (using Vega-Lite) from desktop to mobile.",
  "metadata": {
    "condition": "small"
  },
  "transformations": [
  ...
  ]
}

View

Rule: Resize the chart

    {
      "description": "Resize the chart",
      "specifier": {
        "role": "view"
      },
      "action": "modify",
      "option": {
        "size": [
          300,
          500
        ]
      }
    }

View

Rule: Transpose axes (reuse from US Cabinet–Entire)

    {
      "description": "Transpose axes",
      "specifier": {
        "role": "view"
      },
      "action": "transpose"
    }

View

Rule: Reposition axis labels (reuse and modify from US Cabinet–Entire)

    {
      "description": "Reposition the horizontal axis labels",
      "specifier": {
        "role": "hAxis",
      // Alternative
        "role": "axis",
        "field": "Deaths"
      },
      "action": "reposition",
      "option": {
      // Removed some details
        "orient": "top"// assign new axis orientation
      }
    }

View

Rule: Remove a legend value and reposition the legend (reuse from Oil Spills with detail adjustment)

Remove the legend value of 500000

    {
      "description": "Remove the legend for 500000.",
      "specifier": {
        "role": "legend"
      },
      "action": "remove",
      "option": {
        "values": [
          500000// adjusted 5000 to 500000
        ]
      }
    }

Reposition the legend

    {
      "description": "Move the legend to the topright position",
      "specifier": {
        "role": "legend"
      },
      "action": "reposition",
      "option": {
        "position": "top"// adjusted bottom-right to top
      }
    }

View

Rule: Resize the size mark (reuse from Oil Spills)

    {
      "description": "Resize the size encoding scale with relative value.",
      "specifier": {
        "role": "mark"
      },
      "action": "modify",
      "option": {
        "size": {
          "scale": {
            "range": {
              "prod": 0.4// multiply 0.4 to range values
            }
          }
        }
      }
    }