zw_vega.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 1040,
  "height": 508,
  "padding": 5,
  "config": {
    "text": {
      "font": "Ideal Sans, Avenir Next, Helvetica"
    },
    "axis": {
      "labelFont": "Ideal Sans, Avenir Next, Helvetica",
      "labelFontSize": 10,
      "titleFont": "Ideal Sans, Avenir Next, Helvetica",
      "titleFontSize": 12,
      "titleFontWeight": 400,
      "domainOpacity": 0.4,
      "ticks": false,
      "labelOpacity": 0.75,
      "labelPadding": 5,
      "titlePadding": 10
    },
    "legend": {
      "labelFont": "Ideal Sans, Avenir Next, Helvetica",
      "labelFontSize": 10,
      "labelFontWeight": 300,
      "orient": "top-right"
    },
    "title": {
      "font": "Ideal Sans, Avenir Next, Helvetica",
      "fontSize": 16,
      "fontWeight": 400
    },
    "bind": {
      "font": "Ideal Sans, Avenir Next, Helvetica",
      "fontSize": 16,
      "fontWeight": 400
    }
  },
  "title": {
    "text": "Akamai mPulse beacon volume · Zimbabwe · 07 - 15 Jan 2019",
    "orient": "top",
    "offset": -20
  },
  "signals": [
    {
      "name": "interpolate",
      "value": "basis"
    },
    {
      "name": "stack_days",
      "value": false,
      "on": [
        {
          "events": "click",
          "update": "!stack_days"
        }
      ]
    }
  ],

  "data": [
    {
      "name": "table",
      "url": "https://gist.githubusercontent.com/simonhearne/f1a85905d845db57dc0ab1b62c63a7c2/raw/8e9577d04b6c41f67c9d95cf403a38d0bc149e77/zw.tsv",
      "format": {"type":"tsv"},
      "transform": [
        {
          "type": "formula",
          "expr": "(stack_days ? toNumber(datum.MINUTE) : toNumber(datum.MINUTE) + toNumber(datum.UTCDATE))",
          "as": "TIME"
        },
        {
          "type":"collect",
          "sort": {
            "field": ["TIME","UTCDATE"]
          }
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "table", "field": "TIME"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "FREQUENCY"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "UTCDATE"},
      "range": {"scheme": "inferno"},
      "reverse": true
    },
    {
      "name": "opacity",
      "type": "band",
      "domain": {"data": "table", "field": "UTCDATE"},
      "range": [{"signal": "stack_days ? 0 : 0.5"},1],
      "reverse": false
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x", "title": {"signal": "stack_days ? 'Time of Day (UTC)' : 'Date'"}, "format": {"signal": "stack_days ? '%H:%M' : '%a, %b %d'"}},
    {"orient": "left", "scale": "y", "title": "Relative Beacon Volume", "ticks": false, "labels": false}
  ],

  "marks": [
    {
      "type": "image",
          "encode": {
            "enter": {
              "x": {"value": -10},
              "y": {"value": 0},
              "width": {"signal": "width / 5"},
              "height": {"value": 100},
              "opacity": {"value": 0.2},
              "align": {"value": "left"},
              "baseline": {"value": "top"},
              "url": {"value": "https://www.counterspace.us/wp-content/uploads/2017/03/akamai-logo-100.jpg"}
            }
          }

    },
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "dates",
          "data": "table",
          "groupby": ["UTCDATE"]
        }
      },
      "marks": [
        {
          "type": "area",
          "from": {
            "data": "dates"
          },
          "encode": {
            "enter": {
            },
            "update": {
              "y2": {"scale": "y", "value": 0},
              "fill": {"scale": "color", "field": "UTCDATE"},
              "x": {"scale": "x", "field": "TIME"},
              "y": {"scale": "y", "field": "FREQUENCY"},
              "interpolate": {"signal": "interpolate"},
              "fillOpacity": {"scale": "opacity", "field":"UTCDATE"},
              "stroke": {"scale": "color", "field": "UTCDATE"},
              "strokeWidth": {"value": 0.2}
            }
          }
        }
      ]
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "x": {"signal": "width /2"},
          "y": {"value": 35},
          "align": {"value": "center"},
          "text": {"value": "(click on the chart to toggle stack by date)"},
          "opacity": {"value": 0.75}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "x": {"signal": "width - 80"},
          "y": {"signal": "height + 32"},
          "text": {"value": "@SimonHearne"},
          "opacity": {"value": 0.75}
        }
      }
    }
  ],

  "legends": [
    {
      "fill": "color",
      "encode": {
        "labels": {
          "interactive": true,
          "update": {
            "text": {"signal":"timeFormat(datum.value,'%a, %b %d')"},
            "tooltip":{"signal":"datum"}
          }
        },
        "symbols": {
          "update": {
            "fillOpacity": {"scale":"opacity","field":"value"},
            "stroke": {"scale": "color", "field": "value"},
            "strokeWidth": {"value": 0.2}
          }
        }
      }
    }
  ]
}