soti_distributions.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 800,
  "height": 500,
  "padding": 20,
  "autosize": "fit",
  "title": "Distribution of load times by Browser",
  
  "data": [
    {
      "name": "table",
      "url": "https://gist.githubusercontent.com/simonhearne/d819beb9a8c611d3e2a6fe255ab25082/raw/a626c3077445679154b50d4c26131d651a007d11/soti_distributions_data.tsv",
      "format": {
        "type": "tsv"
      },
      "transform": [
        {"type": "formula", "expr": "toNumber(datum.FREQUENCY)", "as": "FREQUENCY", "initonly": true},
        {"type": "extent", "field":"FREQUENCY", "signal":"frequency_extent"},
        {"type": "formula", "expr": "toNumber(datum.TTVR)", "as": "Bucket", "initonly": true},
        {"type": "filter", "expr": "datum.DEVICETYPENAME === akdv_devicetype && datum.Bucket <= max_bucket"},
        {"type": "formula", "expr": "datum.DEVICETYPENAME", "as": "Device Type", "initonly": true},
        {"type": "project", "fields": ["Bucket","FREQUENCY","USERAGENTNAME"]},
        {"type": "collect", "sort": {"field":["Bucket"]}},
        {"type": "formula", "expr": "datum.FREQUENCY / frequency_extent[1]", "as": "relative_frequency"}
      ]
    },
    {
      "name": "aggregates",
      "source": "table",
      "transform": [
        {
          "type": "formula",
          "expr": "datum.Bucket * datum.FREQUENCY",
          "as": "sum"
        },
        {
          "type": "aggregate",
          "groupby": ["USERAGENTNAME"],
          "fields": ["sum","FREQUENCY"],
          "ops": ["sum","sum"],
          "as": ["accumulate","frequency"]
        },
        {
          "type": "formula",
          "expr": "datum.accumulate / datum.frequency",
          "as": "mean"
        },
        {
          "type": "formula",
          "expr": "datum.frequency / frequency_extent[1]",
          "as": "relative_frequency"
        }
      ]
    }
  ],

  "signals": [
    {
      "name": "height",
      "update": "height - 54"
    },
    {
      "name": "width",
      "update": "width - 44"
    },
    {
      "name": "max_bucket",
      "value": 20000
    },
    {
      "name": "akdv_devicetype",
      "value": "Desktop",
      "bind": {
        "element": "#soti-controls",
        "name": "Device Type",
        "input": "radio",
        "options": ["Desktop","Mobile","Tablet"]
      }
    },
    {
      "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
        }        
      ]
    }
  ],

  "scales": [
    {
      "name": "frequency",
      "type": "linear",
      "domain": {"data": "table", "field": "relative_frequency"},
      "range": "height"
    },
    {
      "name": "frequency2",
      "type": "linear",
      "domain": {"data": "aggregates", "field": "relative_frequency"},
      "range": "height"
    },
    {
      "name": "bucket",
      "type": "linear",
      "domain": {"data": "table", "field": "Bucket"},
      "domainMax": {"signal": "max_bucket"},
      "range": "width"
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "USERAGENTNAME"},
      "range": {"scheme": "rainbow"}
    }
  ],

  "axes": [
    {
      "scale": "frequency",
      "grid": false,
      "ticks": false,
      "domain": true,
      "orient": "left",
      "title": "Relative Frequency"
    },
    {
      "scale": "bucket",
      "grid": false,
      "ticks": false,
      "domain": true,
      "orient": "bottom",
      "title": "TTVR Bucket (ms)"
    }
  ],

  "legends": [
    {
      "fill": "color",
      "title": "Browser",
      "orient": "top-right",
      "encode": {
        "symbols": {
          "name": "legendSymbol",
          "interactive": true,
          "update": {
            "strokeWidth": {"value": 0},
            "opacity": {"value": 0.5},
            "shape": {"value": "circle"}
          }
        },
        "labels": {
          "name": "legendLabel",
          "interactive": true,
          "update": {
            "tooltip": {"signal": "{'title':datum.label}"}
          }
        }
      }
    }
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "USERAGENTNAME"
        }
      },
      "marks": [
        {
          "name": "area",
          "type": "area",
          "from": {"data": "series"},
          "sort": {
            "field": ["relative_frequency"],
            "order": ["ascending"]
          },
          "encode": {
            "update": {
              "x": {"scale": "bucket", "field": "Bucket"},
              "y": {"scale": "frequency", "field": "relative_frequency"},
              "y2": {"scale": "frequency", "value": 0},
              "fill": {"scale": "color", "field": "USERAGENTNAME"},
              "stroke": {"scale": "color", "field": "USERAGENTNAME"},
              "strokeWidth": {"value": 1},
              "strokeOpacity": {"value": 0.5},
              "fillOpacity": {"signal": "datum.USERAGENTNAME === akdv_highlight_dimension ? 0.9 : 0.25"},
              "tooltip": {"signal": "{'title':datum.USERAGENTNAME}"}
            }
          }
        }
      ]
    },
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "means",
          "data": "aggregates",
          "groupby": "USERAGENTNAME"
        }
      },
      "marks": [
        {
          "name": "markers",
          "type": "rule",
          "from": {"data": "means"},
          "encode": {
            "update": {
              "x": {"scale": "bucket", "field": "mean"},
              "y": {"scale": "frequency2", "field": "relative_frequency"},
              "y2": {"scale": "frequency2", "value": 0},
              "stroke": {"scale": "color", "field": "USERAGENTNAME"},
              "opacity": {"signal": "datum.USERAGENTNAME === akdv_highlight_dimension ? 0.9 : 0.25"},
              "tooltip": {"signal": "{'title':datum.USERAGENTNAME,'Mean':format(datum.mean,',.0f') + 'ms'}"}
            }
          }
        },
        {
          "name": "names",
          "type": "text",
          "from": {"data": "means"},
          "encode": {
            "update": {
              "x": {"scale": "bucket", "field": "mean"},
              "y": {"scale": "frequency2", "field": "relative_frequency"},
              "fill": {"scale": "color", "field": "USERAGENTNAME"},
              "text": {"signal": "datum.USERAGENTNAME"},
              "baseline": {"value": "top"},
              "dx": {"value": 2},
              "opacity": {"signal": "datum.USERAGENTNAME === akdv_highlight_dimension ? 0.9 : (scale('frequency2',datum.relative_frequency) > height-10 ? 0 : 0.3)"},
              "tooltip": {"signal": "{'title':datum.USERAGENTNAME,'Mean':format(datum.mean,',.0f') + 'ms'}"}
            }
          }
        }
      ]
    }
  ]
}