covid_regions.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "",
  "width": 840,
  "height": 500,
  "padding": 5,

    "title": {
      "text": {
        "signal": "['COVID-19 Cases by England Region',utcFormat(timestamp*1000, '%e %B %Y')]"
      }
    },

  "signals": [
    {
      "name": "timestamp",
      "value": 1580342400,
      "on": [
        {
          "events": {
            "type": "timer",
            "throttle": 16
          },
          "update": "update?((timestamp >= date_extent[1])?date_extent[0]:timestamp+86400):timestamp"
        },
        {"events": "rect:mouseover", "update": "datum.date"}
      ]
    },
    {
      "name": "update",
      "value": true,
      "bind": {
        "name": "Animate",
        "input": "checkbox"
      }
    },
    {
      "name": "metric",
      "value": "newCasesBySpecimenDate"
    }
  ],

  "data": [
    {
      "name": "data",
      "url": {"signal": "'https://api.coronavirus.data.gov.uk/v2/data?areaType=ltla&metric='+metric+'&format=csv'"},
      "format": {"type": "csv", "parse": "auto"},
      "transform": [
        {
          "type": "collect",
          "sort": {
            "field": ["date"],
            "order": ["ascending"]
          }
        },
        {
          "type": "formula",
          "expr": "utcFormat(datum.date, '%e %B %Y')",
          "as": "UTCdate"
        },
        {
          "type": "formula",
          "expr": "datum.date/1000",
          "as": "date"
        },
        {
          "type": "extent",
          "field": {"signal": "metric"},
          "signal": "metric_extent"
        },
        {
          "type": "extent",
          "field": "date",
          "signal": "date_extent"
        }
      ]
    },
    {
      "name": "totals",
      "source": "data",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["date"],
          "fields": [{"signal":"metric"}],
          "ops": ["sum"],
          "as":["total"]
        },
        {
          "type": "extent",
          "field": "total",
          "signal": "total_metric_extent"
        }
      ]
    },
    {
      "name": "covid",
      "source": "data",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.date == timestamp"
        }
      ]
    },
    {
      "name": "regions",
      "url": "https://martinjc.github.io/UK-GeoJSON/json/eng/topo_lad.json",
      "format": {"type": "topojson", "feature": "lad"},
      "transform": [
        {
          "type": "lookup", "from": "covid", "key": "areaCode", "fields": ["id"], "values": [{"signal": "metric"},"areaName"]
        }
      ]
    }
  ],

  "projections": [
    {
      "name": "england",
      "size": {"signal": "[width, height]"},
      "fit": {"signal": "data('regions')"},
      "type": "mercator"
    }
  ],

  "scales": [
    {
      "name": "color",
      "type": "linear",
      "domain": [1,1000],
      "range": {"scheme": "inferno"},
      "reverse": true
    }
  ],

  "legends": [
    {
      "fill": "color",
      "orient": "bottom-right",
      "title": {"signal": "metric"}
    }
  ],


  "layout": {"padding": 20, "bounds": "full", "align": "each"},

  "marks": [
    {
      "type": "group",
      "style": "cell",
      "encode": {
      },
      "marks": [
        {
          "type": "shape",
          "from": {"data": "regions"},
          "encode": {
            "update": {
              "fill": {"signal": "datum[metric] !== null ? scale('color', datum[metric]) : 'lightgrey'"},
              "tooltip": {"signal": "{'title': datum.areaName,'Value': datum[metric]}"},
              "hover": { "fill": {"value": "red"} }
            }
          },
          "transform": [
            { "type": "geoshape", "projection": "england" }
          ]
        }
      ]
    },
    {
      "type": "group",
      "name": "minichart",
      "style": "cell",
      "encode": {
        "enter": {
          "width": {"signal": "width/4"},
          "height": {"signal": "height/4"},
          "fill": {"value": "lightgrey"},
          "fillOpacity": {"value": 0.2}
        }
      },
      "scales": [
        {
          "name": "x",
          "type": "band",
          "range": [0,{"signal":"width/4"}],
          "domain": {"data": "totals", "field": "date"}
        },
        {
          "name": "y",
          "type": "linear",
          "nice": false,
          "range": [{"signal":"height/4"},0],
          "domain": {"signal": "total_metric_extent"}
        }
      ],
      "signals": [
        {
          "name": "highlight",
          "value": null
        }
      ],
      "axes": [
        {
          "scale": "x",
          "orient": "bottom",
          "grid": false,
          "labels": false,
          "domain": false,
          "ticks": false
        },
        {
          "scale": "y",
          "orient": "left",
          "grid": false,
          "domain": false,
          "labels": false,
          "ticks": false
        }
      ],
      "marks": [
        {
          "type": "line",
          "from": {"data": "totals"},
          "encode": {
            "enter": {
              "stroke": {"value": "rebeccapurple"},
              "interpolate": {"value": "basis"}
            },
            "update": {
              "x": {"scale": "x", "field": "date"},
              "y": {"scale": "y", "field": "total"}
            }
          }
        },
        {
          "type": "rule",
          "encode": {
            "enter": {
              "y": {"value":0},
              "strokeWidth": {"value": 2},
              "stroke": {"value": "red"},
              "opacity": {"value": 0.5}
            },
            "update": {
              "x": {"signal": "scale('x',timestamp)"},
              "y2": {"signal": "height/4"}
            }
          }
        },
        {
          "type": "rect",
          "from": {"data": "totals"},
          "encode": {
            "enter": {
              "fill": {"value": "transparent"}
            },
            "update": {
              "x": {"scale": "x", "field": "date"},
              "width": {"scale": "x","band": 1},
              "y": {"signal": "0"},
              "y2": {"signal": "height/4"}
            }
          }
        }
      ]
    }
  ]
}