soti_timeseries.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 800,
  "height": 500,
  "padding": 20,
  "autosize": {
    "type": "fit"
  },
  "title": "Load Time by Date",
  
  "signals": [
    {
      "name": "height",
      "update": "height - 54"
    },
    {
      "name": "width",
      "update": "width - 44"
    },
    {
      "name": "interpolate",
      "value": "linear"
    },
    {
      "name": "akdv_breakdown",
      "value": "Timer",
      "bind": {
        "element": "#soti-controls",
        "name": "Breakdown",
        "input": "select",
        "options": ["Timer","Device Type"]
      }
    },
    {
      "name": "akdv_devicetype",
      "value": "Desktop",
      "bind": {
        "element": "#soti-controls",
        "name": "Device Type",
        "input": "select",
        "options": ["Desktop","Mobile","Tablet"]
      }
    },
    {
      "name": "akdv_timer",
      "value": "TTVR",
      "bind": {
        "element": "#soti-controls",
        "name": "Timer",
        "input": "select",
        "options": ["TTVR","TTI","PLT","DOM_READY","FCP","TTFB"]
      }
    },
    {
      "name": "akdv_maxspeed",
      "value": 10000,
      "bind": {
        "element": "#soti-controls",
        "name": "Max load time (ms)",
        "input": "range",
        "min": 5000,
        "max": 60000,
        "step": 1000
      }
    },
    {
      "name": "akdv_highlight_dimension",
      "value": null,
      "on": [
        {
          "events": "@legendSymbol:mouseover, @legendLabel:mouseover",
          "update": "datum.value",
          "force": true
        },
        {
          "events": "@legendSymbol:mouseout, @legendLabel:mouseout",
          "update": "null",
          "force": true
        },
        {
          "events": "@line:mouseover, @point:mouseover",
          "update": "datum.dimension",
          "force": true
        },
        {
          "events": "@line:mouseout, @point:mouseout",
          "update": "null",
          "force": true
        }        
      ]
    },
    {
      "name": "akdv_highlight_speed",
      "value": null
    },
    {
      "name": "data_ready",
      "update": "data('table').length > 0"
    },
    {
      "name": "akdv_timers",
      "value": ["TTVR","TTI","PLT","DOM_READY","FCP","TTFB"]
    }
  ],

  "data": [
    {
      "name": "data",
      "url": "https://gist.githubusercontent.com/simonhearne/4ec46b9d1833c59dcd5ccefcdd370b6c/raw/d5642574e03070a6351c7d91bef1d71f0a7dc3e2/soti_timeseries_data.tsv",
      "format": {
        "type": "tsv"
      }
    },
    {
      "name": "table",
      "source": "data",
      "transform": [
        {"type": "fold", "fields": {"signal": "akdv_timers"}, "as": ["Timer","value"]},
        {"type": "formula", "expr": "toNumber(datum.value)", "as": "value"},
        {"type": "extent", "field":"value", "signal":"loadtime_extent"},
        {"type": "formula", "expr": "toNumber(datum.FREQUENCY)", "as": "FREQUENCY", "initonly": true},
        {"type": "formula", "expr": "datum.DEVICETYPENAME", "as": "Device Type", "initonly": true},
        {"type": "formula", "expr": "datum[akdv_breakdown]", "as": "dimension"},
        {"type": "filter",  "expr": "akdv_breakdown !== 'Device Type' ? datum.DEVICETYPENAME === akdv_devicetype : datum.Timer === akdv_timer"},
        {"type": "project", "fields": ["UTCDATE","dimension","value","FREQUENCY"]},
        {"type": "filter", "expr": "datum.value <= akdv_maxspeed"},
        {"type": "collect", "sort": {"field":["dimension","UTCDATE"]}}
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "table","field": "UTCDATE"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"signal": "[0,akdv_maxspeed]"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": {"scheme": "rainbow"},
      "domain": {"data": "table", "field": "dimension"}
    },
    {
      "name": "size",
      "type": "linear",
      "range": [2,15],
      "domain": {"data": "table", "field": "FREQUENCY"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x", "title": "Date"},
    {"orient": "left", "scale": "y","title": {"signal": "'Median Load Time (ms)'"}}
  ],

  "marks": [
    {
      "type": "rule",
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"signal": "width"},
          "strokeWidth": {"value": 3}
        },
        "update": {
          "y": {"signal": "scale('y',akdv_highlight_speed)"},
          "opacity": {"signal": "akdv_highlight_speed ? 0.05 : 0"}
        }
      }
    },
    {
      "type": "rect",
      "name": "background",
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"signal": "width"},
          "y": {"scale": "y", "value": 0},
          "y2": {"signal": "scale('y',akdv_maxspeed)"},
          "fill": {"value": "transparent"}
        }
      }
    },
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "dimension"
        }
      },
      "marks": [
        {
          "type": "line",
          "from": {"data": "series"},
          "name": "line",
          "encode": {
            "update": {
              "x": {"scale": "x", "field": "UTCDATE"},
              "stroke": {"scale": "color", "field": "dimension"},
              "strokeWidth": {"value": 1.5},
              "y": {"scale": "y", "field": "value"},
              "interpolate": {"signal": "interpolate"},
              "opacity": {"signal": "akdv_highlight_dimension ? (datum.dimension === akdv_highlight_dimension ? 0.95 : 0.05) : 0.8"},
              "tooltip": {"signal": "{'title':utcFormat(datum.UTCDATE, '%a, %b %d'),'Dimension':datum.dimension,'Speed':format(datum.value,',.0f')+'ms'}"}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "series"},
          "name": "point",
          "encode": {
            "update": {
              "x": {"scale": "x", "field": "UTCDATE"},
              "y": {"scale": "y", "field": "value"},
              "stroke": {"value": "transparent"},
              "size": {"value": 5},
              "interpolate": {"signal": "interpolate"},
              "tooltip": {"signal": "{'title':utcFormat(datum.UTCDATE, '%a, %b %d'),'Dimension':datum.dimension,'Speed':format(datum.value,',.0f')+'ms'}"}
            }
          }
        }
      ]
    }
  ],

  "legends": [
    {
      "fill": "color",
      "title": {"signal": "akdv_breakdown"},
      "orient": "top-right",
      "encode": {
        "labels": {
          "name": "legendLabel",
          "interactive": true
        },
        "symbols": {
          "name": "legendSymbol",
          "interactive": true,
          "update": {
            "strokeWidth": {"value": 0},
            "opacity": {"signal": "akdv_highlight_dimension ? (datum.label === akdv_highlight_dimension ? 1 : 0.05) : 0.8"}
          }
        }
      }
    }
  ]
}