soti_sessionlength.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 1000,
  "height": 500,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "url": "https://gist.githubusercontent.com/simonhearne/48e78ea1473340198b9220816dcc9763/raw/469efdd2e19be7223a2bf57dc0176847ac3b45d3/sessionlength_timer.tsv",
      "format": {
        "type": "tsv"
      },
      "transform": [
        {"type": "fold", "fields": {"signal": "timers"}, "as": ["Timer","value"]},
        {"type": "extent", "field":"value", "signal":"loadtime_extent"},
        {"type": "formula", "expr": "toNumber(datum.SESSIONLENGTH)", "as": "SESSIONLENGTH", "initonly": true},
        {"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": "filter",  "expr": "datum.SESSIONLENGTH >= akdv_minSessionLength && datum.SESSIONLENGTH <= akdv_maxSessionLength"},
        {"type": "formula", "expr": "toNumber(datum.SESSIONLENGTH)", "as": "SESSIONLENGTH"},
        {"type": "project", "fields": ["SESSIONLENGTH","dimension","value","FREQUENCY"]},
        {"type": "collect", "sort": {"field":["FREQUENCY","SESSIONLENGTH"]}}
      ]
    }
  ],

  "signals": [
    {
      "name": "akdv_breakdown",
      "value": "Timer",
      "bind": {
        "name": "Breakdown",
        "input": "radio",
        "options": ["Timer","Device Type"]
      }
    },
    {
      "name": "akdv_devicetype",
      "value": "Desktop",
      "bind": {
        "name": "Device Type",
        "input": "radio",
        "options": ["Desktop","Mobile","Tablet"]
      }
    },
    {
      "name": "akdv_timer",
      "value": "TTVR",
      "bind": {
        "name": "Timer",
        "input": "radio",
        "options": ["TTVR","TTI","PLT","DOM_READY","FCP","TTFB"]
      }
    },
    {
      "name": "timers",
      "value": ["TTVR","TTI","PLT","DOM_READY","FCP","TTFB"]
    },
    {
      "name": "akdv_minSessionLength",
      "value": 0
    },
    {
      "name": "akdv_maxSessionLength",
      "value": 50
    }
  ],

  "scales": [
    {
      "name": "sessionlength",
      "type": "linear",
      "domain": {"data": "table", "field": "SESSIONLENGTH"},
      "range": "height"
    },
    {
      "name": "loadtime",
      "type": "linear",
      "domain": {"data": "table", "field": "value"},
      "domainMax": {"signal": "loadtime_extent[1]*0.9"},
      "range": "width"
    },
    {
      "name": "size",
      "type": "linear",
      "round": true,
      "nice": false,
      "zero": true,
      "domain": {"data": "table", "field": "FREQUENCY"},
      "range": [1.5,10]
    },
    {
      "name": "opacity",
      "type": "linear",
      "domain": {"data": "table", "field": "FREQUENCY"},
      "range": [0.5,1]
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "dimension"},
      "range": {"scheme": "rainbow"}
    }
  ],

  "axes": [
    {
      "scale": "sessionlength",
      "grid": false,
      "ticks": false,
      "domain": true,
      "orient": "left",
      "title": "Session Length (pages)"
    },
    {
      "scale": "loadtime",
      "grid": false,
      "ticks": false,
      "domain": true,
      "orient": "bottom",
      "title": {"signal": "'First Page '+(akdv_breakdown !== 'Timer' ? akdv_timer : 'Load')+' Time (ms)'"}
    }
  ],

  "legends": [
    {
      "fill": "color",
      "title": {"signal": "akdv_breakdown"},
      "orient": "top-right",
      "encode": {
        "symbols": {
          "update": {
            "strokeWidth": {"value": 0},
            "opacity": {"value": 0.5},
            "shape": {"value": "circle"}
          }
        }
      }
    }
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "dimension"
        }
      },
      "marks": [
        {
          "name": "line",
          "type": "trail",
          "from": {"data": "series"},
          "encode": {
            "update": {
              "y": {"scale": "sessionlength", "field": "SESSIONLENGTH"},
              "x": {"scale": "loadtime", "field": "value"},
              "size": {"scale": "size", "field": "FREQUENCY"},
              "opacity": {"scale": "opacity", "field": "FREQUENCY"},
              "fill": {"scale": "color", "field": "dimension"},
              "tooltip": {"signal": "{'title':datum.dimension,'Session Length':datum.SESSIONLENGTH,'Value':format(datum.value,',.0f')+'ms'}"}
            }
          }
        }
      ]
    }
  ]
}