crux_violin.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"
    },
    "axis": {
      "labelFont": "Ideal Sans, Avenir Next, Helvetica",
      "labelFontSize": 12,
      "titleFont": "Ideal Sans, Avenir Next, Helvetica",
      "titleFontSize": 18,
      "titleFontWeight": 300,
      "domain": false,
      "ticks": false,
      "labelColor": "#54565b"
    }
  },
  "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": "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"
      }
    }
  ],
  "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}
        ]
    }
  ],
  "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": "viridis"
      },
      "domain": {
        "signal": "origins"
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "loadTime",
      "title": "Load Time (s)"
    },
    {
      "orient": "left",
      "scale": "layout",
      "labelAngle": 270,
      "labelAlign": "center",
      "labelPadding": 12,
      "encode": {
        "labels": {
          "update": {
            "text": {"signal": "upper(datum.value)"}
          }
        }
      }
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "background",
          "data": "boxplots",
          "groupby": ["origin"]
        }
      },
      "encode": {
        "enter": {
          "yc": {
            "scale": "layout",
            "field": "origin",
            "band": 0.5
          }
        }
      },
      "marks": [
        {
          "type": "rect",
          "from": {
            "data": "background"
          },
          "encode": {
            "enter": {
              "fill": {"value": "#54565b"},
              "fillOpacity": {"value" : 0.05}
            },
            "update": {
              "x": {"value": 0},
              "x2": {"signal": "width"},
              "y": {"signal": "plotWidth / -2"},
              "y2": {"signal": "plotWidth / 2"}
            }
          }
        },
        {
          "type": "rule",
          "from": {
            "data": "background"
          },
          "encode": {
            "enter": {
              "x": {"value": 0},
              "x2": {"signal": "width"},
              "stroke": {"value": "#54565b"},
              "strokeOpacity": {"value": 0.5}
            }
          }
        }
      ]
    },
    {
      "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 /2"}, {"signal":"-1 * overlap"}],
          "domain": {
            "data": "origin",
            "field": "density"
          }
        }
      ],
      "marks": [
        {
          "type": "area",
          "from": {
            "data": "origin"
          },
          "encode": {
            "enter": {
              "fill": {
                "scale": "originColor",
                "field": "origin"
              },
              "fillOpacity": { "value": 0.25 },
              "stroke": {
                "scale": "originColor",
                "field": "origin"
              },
              "strokeWidth": {
                "value": 1
              }
            },
            "update": {
              "x": {
                "scale": "loadTime",
                "field": "bin"
              },
              "y": {
                "signal": "scale('yscale',datum.density * 0.9)"
              },
              "y2": {
                "signal": "scale('yscale',datum.density * -0.9)"
              },
              "tooltip": {
                "signal": "datum.origin"
              }
            }
          }
        }
      ]
    },
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "boxplot",
          "data": "boxplots",
          "groupby": ["origin"]
        }
      },
      "encode": {
        "enter": {
          "yc": {
            "scale": "layout",
            "field": "origin",
            "band": 0.5
          }
        }
      },
      "marks": [
        {
          "type": "rule",
          "from": {
            "data": "boxplot"
          },
          "encode": {
            "enter": {
              "stroke": {
                "value": "black"
              },
              "strokeWidth": {
                "value": 1.5
              },
              "strokeOpacity": {
                "value": 0.9
              }
            },
            "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"
              },
              "size": {
                "signal": "50"
              }
            },
            "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'}"
              }
            }
          }
        }
      ]
    }
  ]
}