crux.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 1000,
  "height": 600,
  "padding": 20,
  "autosize": {
    "type": "fit",
    "resize": true,
    "contains": "padding"
  },
  "config": {
    "text": {
      "font": "Ideal Sans, Avenir Next, Helvetica"
    },
    "title": {
      "font": "Ideal Sans, Avenir Next, Helvetica",
      "fontWeight": 500,
      "fontSize": 17,
      "limit": -1
    },
    "axis": {
      "labelFont": "Ideal Sans, Avenir Next, Helvetica",
      "labelFontSize": 12
    }
  },
  "signals": [
    {
      "name": "width",
      "update": "width - 40"
    },
    {
      "name": "height",
      "update": "height - 40"
    },
    {
      "name": "plotWidth",
      "value": 60,
      "update": "(height / origins.length) - boxplotHeight - 2"
    },
    {
      "name": "offsetPx",
      "value": 10,
      "update": "height / origins.length"
    },
    {
      "name": "overlap",
      "value": 0
    },
    {
      "name": "maxLoadTime",
      "value": 10
    },
    {
      "name": "boxplotHeight",
      "value": 10
    },
    {
      "name": "origins",
      "value": [
        "Ebay","Etsy","Amazon","Target","Walmart"
      ]
    },
    {
      "name": "focus_origin",
      "value": "Walmart"
    },
    {
      "name": "band_opacity",
      "value": 0.05
    },
    {
      "name": "device",
      "value": "Desktop",
      "bind": {
        "input": "radio",
        "options": [
          "Desktop",
          "Phone",
          "Tablet"
        ],
        "name": "Device Type"
      }
    },
    {
      "name": "timer",
      "value": "Page Load",
      "bind": {
        "input": "radio",
        "options": [
          "DOM Content Loaded",
          "First Contentful Paint",
          "First Paint",
          "Page Load"
        ],
        "name": "Timer"
      }
    },
    {
      "name": "show_bands",
      "value": true,
      "bind": {
        "input": "checkbox",
        "name": "Performance bands"
      }
    }
  ],
  "data": [
    {
      "name": "distributions",
      "url": "https://gist.githubusercontent.com/simonhearne/fb0bb564a999910e1cd99dbfb2e85b66/raw/aae36eed2c459b0629bc811c9b43b3535fcbf52f/crux_benchmark.json",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.bin <= maxLoadTime && datum.bin >= 0 && datum.density >= 0"
        },
        {
          "type": "filter",
          "expr": "datum.device == device && datum.timer == timer"
        }
      ]
    },
    {
      "name": "boxplots",
      "values": [
        {"origin":"Ebay","min":0,"q1":0.5,"q2":1.8,"q3":3,"max":7},
        {"origin":"Etsy","min":0.2,"q1":1.1,"q2":2.1,"q3":6.5,"max":9},
        {"origin":"Amazon","min":0.1,"q1":2,"q2":2.5,"q3":7.5,"max":10},
        {"origin":"Target","min":0,"q1":1.5,"q2":3,"q3":7,"max":10},
        {"origin":"Walmart","min":0,"q1":2.5,"q2":5,"q3":7.5,"max":10}
        ]
    },
    {
      "name": "boxplots_dynamic",
      "source": "distributions",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["origin"],
          "fields": [
            "bin","bin","bin","bin","bin"
          ],
          "ops": [
            "min","q1","median","q3","max"
          ],
          "as": [
            "min","q1","q2","q3","max"
          ]
        }
      ]
    },
    {
      "name": "performance_bands",
      "values": [
        {"name": "Good", "color": "green", "start": 0, "end": 3, "timer": "Page Load"},
        {"name": "Ok", "color": "yellow", "start": 3, "end": 6,  "timer": "Page Load"},
        {"name": "Poor", "color": "red", "start": 6, "end": 30,  "timer": "Page Load"},

        {"name": "Good", "color": "green", "start": 0, "end": 1, "timer": "First Paint"},
        {"name": "Ok", "color": "yellow", "start": 1, "end": 2,  "timer": "First Paint"},
        {"name": "Poor", "color": "red", "start": 2, "end": 30,  "timer": "First Paint"},

        {"name": "Good", "color": "green", "start": 0, "end": 1, "timer": "First Contentful Paint"},
        {"name": "Ok", "color": "yellow", "start": 1, "end": 2,  "timer": "First Contentful Paint"},
        {"name": "Poor", "color": "red", "start": 2, "end": 30,  "timer": "First Contentful Paint"},

        {"name": "Good", "color": "green", "start": 0, "end": 2, "timer": "DOM Content Loaded"},
        {"name": "Ok", "color": "yellow", "start": 2, "end": 5,  "timer": "DOM Content Loaded"},
        {"name": "Poor", "color": "red", "start": 5, "end": 30,  "timer": "DOM Content Loaded"}
      ],
      "transform": [
        {
          "type": "filter",
          "expr": "datum.timer == timer"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "layout",
      "type": "band",
      "range": "height",
      "domain": {
        "data": "distributions", 
        "field": "origin"
      }
    },
    {
      "name": "loadTime",
      "type": "linear",
      "range": "width",
      "zero": true,
      "domain": [0, {"signal":"maxLoadTime"}]
    },
    {
      "name": "originColor",
      "type": "ordinal",
      "range": {
        "scheme": "category10"
      },
      "domain": {
        "signal": "origins"
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "loadTime",
      "title": "Load Time (s)"
    },
    {
      "orient": "left",
      "scale": "layout",
      "tickCount": 5,
      "zindex": 1
    }
  ],
  "legends": [
    {
      "orient": "top-right",
      "labelAlign": "left",
      "labelOffset": 10,
      "fill": "originColor",
      "rowPadding": 5,
      "columnPadding": 5,
      "zindex": 1,
      "padding": 5,
      "fillColor": "white"
    }
  ],
  "marks": [
    {
      "type": "group",
      "marks": [
        {
          "type": "rect",
          "from": {
            "data": "performance_bands"
          },
          "encode": {
            "enter": {
              "fill": {
                "signal": "datum.color"
              }
            },
            "update": {
              "x": {
                "signal": "scale('loadTime',datum.start)"
              },
              "x2": {
                "signal": "scale('loadTime',min(maxLoadTime,datum.end))"
              },
              "y": {
                "value": 0
              },
              "y2": {
                "signal": "height"
              },
              "tooltip": {
                "signal": "show_bands ? {'Performance band': datum.name, 'Timer': datum.timer, 'Minimum': format(datum.start,'.2n')+'s','Maximum': format(datum.end,'.2n')+'s'} : false"
              },
              "fillOpacity": {
                "signal": "show_bands ? band_opacity : 0"
              }
            }
          }
        }
      ]
    },
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "origin",
          "data": "distributions",
          "groupby": ["origin"]
        }
      },
      "encode": {
        "enter": {
          "yc": {
            "scale": "layout",
            "field": "origin",
            "band": 0.5
            },
          "height": {"signal": "plotWidth"},
          "width": {"signal": "width"}
        }
      },
      "scales": [
        {
          "name": "yscale",
          "type": "linear",
          "range": [{"signal": "plotWidth"}, {"signal":"-1 * overlap"}],
          "domain": {
            "data": "origin",
            "field": "density"
          }
        }
      ],
      "marks": [
        {
          "type": "area",
          "from": {
            "data": "origin"
          },
          "encode": {
            "enter": {
              "fill": {
                "scale": "originColor",
                "field": "origin"
              },
              "fillOpacity": {
                "signal": "datum.origin == focus_origin ? 0.75 : 0.25"
              },
              "stroke": {
                "scale": "originColor",
                "field": "origin"
              },
              "strokeWidth": {
                "value": 0.5
              }
            },
            "update": {
              "x": {
                "scale": "loadTime",
                "field": "bin"
              },
              "y": {
                "signal": "scale('yscale',datum.density)"
              },
              "y2": {
                "signal": "scale('yscale',0)"
              },
              "tooltip": {
                "signal": "datum.origin"
              }
            }
          }
        }
      ]
    },

    {
      "type": "group",
      "from": {
        "facet": {
          "name": "boxplot",
          "data": "boxplots",
          "groupby": ["origin"]
        }
      },
      "encode": {
        "enter": {
          "yc": {
            "scale": "layout",
            "field": "origin",
            "band": 0.89
          }
        }
      },
      "marks": [
        {
          "type": "rule",
          "from": {
            "data": "boxplot"
          },
          "encode": {
            "enter": {
              "stroke": {
                "value": "black"
              },
              "strokeWidth": {
                "value": 2
              },
              "strokeOpacity": {
                "value": 0.9
              },
              "y": {
                "signal": "boxplotHeight / 2"
              }
            },
            "update": {
              "x": {
                "scale": "loadTime",
                "field": "min"
              },
              "x2": {
                "scale": "loadTime",
                "field": "max"
              },
              "tooltip": {
                "signal": "{'Origin': datum.origin, 'Minimum': format(datum.min,'.2n')+'s','25th %ile': format(datum.q1,'.2n')+'s', 'Median': format(datum.q2,'.2n')+'s', '75th %ile': format(datum.q3,'.2n')+'s', 'Maximum': format(datum.max,'.2n')+'s'}"
              }
            }
          }
        },
        {
          "type": "rect",
          "from": {
            "data": "boxplot"
          },
          "encode": {
            "enter": {
              "fill": {
                "value": "white"
              },
              "stroke": {
                "value": "black"
              },
              "strokeWidth": {
                "value": 1.5
              },
              "strokeOpacity": {
                "value": 0.9
              },
              "y": {
                "signal": "2"
              },
              "y2": {
                "signal": "boxplotHeight - 2"
              }
            },
            "update": {
              "x": {
                "scale": "loadTime",
                "field": "q1"
              },
              "x2": {
                "scale": "loadTime",
                "field": "q3"
              },
              "tooltip": {
                "signal": "{'Origin': datum.origin, 'Minimum': format(datum.min,'.2n')+'s','25th %ile': format(datum.q1,'.2n')+'s', 'Median': format(datum.q2,'.2n')+'s', '75th %ile': format(datum.q3,'.2n')+'s', 'Maximum': format(datum.max,'.2n')+'s'}"
              }
            }
          }
        },
        {
          "type": "symbol",
          "from": {
            "data": "boxplot"
          },
          "encode": {
            "enter": {
              "fill": {
                "value": "black"
              },
              "y": {
                "signal": "boxplotHeight / 2"
              },
              "size": {
                "signal": "boxplotHeight * 3.14159265"
              }
            },
            "update": {
              "x": {
                "scale": "loadTime",
                "field": "q2"
              },
              "tooltip": {
                "signal": "{'Origin': datum.origin, 'Minimum': format(datum.min,'.2n')+'s','25th %ile': format(datum.q1,'.2n')+'s', 'Median': format(datum.q2,'.2n')+'s', '75th %ile': format(datum.q3,'.2n')+'s', 'Maximum': format(datum.max,'.2n')+'s'}"
              }
            }
          }
        }
      ]
    }    
  ]
}