Skip to content

Instantly share code, notes, and snippets.

@simonhearne

simonhearne/crux_boxplots.json

Last active October 25, 2018 19:19
Show Gist options
  • Save simonhearne/4c2aa213601c14074817d6ea2717002a to your computer and use it in GitHub Desktop.
Save simonhearne/4c2aa213601c14074817d6ea2717002a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
crux_boxplots.json
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 1000,
"height": 450,
"padding": 0,
"autosize": {
"type": "pad",
"contains": "padding"
},
"config": {
"text": {
"font": "Ideal Sans, Avenir Next, Helvetica"
},
"axis": {
"labelFont": "Ideal Sans, Avenir Next, Helvetica",
"labelFontSize": 12,
"titleFontSize": 14,
"titleFontWeight": 400
},
"legend": {
"labelFont": "Ideal Sans, Avenir Next, Helvetica",
"labelFontSize": 14
}
},
"signals": [
{
"name": "plotWidth",
"value": 100,
"update": "height / origins.length"
},
{
"name": "boxplotColor",
"value": "#666"
},
{
"name": "origins",
"value": [
"Ebay","Etsy","Amazon","Target","Walmart"
]
},
{
"name": "focus_origin",
"value": "Walmart"
},
{
"name": "band_opacity",
"value": 0.05
},
{
"name": "device",
"value": "Phone",
"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": false,
"bind": {
"input": "checkbox",
"name": "Performance bands"
}
},
{
"name": "maxLoadTime",
"value": 10,
"bind": {
"input": "range",
"name": "Maximum Time (s)",
"min": 1,
"max": 30,
"step": 1
}
},
{
"name": "show_boxplots",
"value": true,
"bind": {
"input": "checkbox",
"name": "Box plots"
}
},
{
"name": "highlight_origin",
"value": true,
"bind": {
"input": "checkbox",
"name": "Highlight origin"
}
}
],
"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"
},
{
"type": "extent",
"field": "density",
"signal": "density_extent"
}
]
},
{
"name": "boxplots",
"values": [
{"origin":"Ebay", "min":0.00, "q1":0.2, "q2":1.1, "q3":2.8, "max":7, "device":"Phone"},
{"origin":"Etsy", "min":0.20, "q1":1.1, "q2":2.1, "q3":6.5, "max":9, "device":"Phone"},
{"origin":"Amazon", "min":0.10, "q1":0.2, "q2":1.2, "q3":4.5, "max":9, "device":"Phone"},
{"origin":"Target", "min":0.50, "q1":1.5, "q2":3.5, "q3":8.0, "max":11, "device":"Phone"},
{"origin":"Walmart","min":0.75, "q1":1.5, "q2":4.0, "q3":7.5, "max":18, "device":"Phone"}
]
},
{
"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,
"nice": true,
"domain": [0, {"signal":"maxLoadTime"}],
"clamp": true
},
{
"name": "originColor",
"type": "ordinal",
"range": {
"scheme": "category10"
},
"domain": {
"signal": "origins"
}
},
{
"name": "opacityScale",
"type": "linear",
"range": [0.1,0.9],
"domain": {
"data": "distributions",
"field": "density"
}
}
],
"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": 10,
"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"
},
"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
},
"height": {"signal": "plotWidth"},
"width": {"signal": "width"}
}
},
"scales": [
{
"name": "yscale",
"type": "linear",
"range": [{"signal": "plotWidth"}, 0],
"domain": [0, {"signal": "density_extent[1]"}]
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "origin"
},
"encode": {
"enter": {
"fill": {
"scale": "originColor",
"field": "origin"
},
"strokeWidth": {
"value": 0
},
"strokeOpacity": {
"value": 0
}
},
"update": {
"x": {
"scale": "loadTime",
"field": "bin"
},
"x2": {
"signal": "scale('loadTime',datum.bin+0.1)"
},
"y": {
"signal": "scale('yscale',datum.density/2)"
},
"y2": {
"signal": "scale('yscale',datum.density/-2)"
},
"opacity": {
"signal": "scale('opacityScale',datum.density)"
}
}
}
}
]
},
{
"type": "group",
"from": {
"facet": {
"name": "boxplot",
"data": "boxplots",
"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"}, 0],
"domain": {
"data": "boxplot",
"field": "density"
}
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "boxplot"
},
"encode": {
"enter": {
"fill": {
"value": "grey"
},
"y": {
"signal": "plotWidth"
},
"y2": {
"value": 0
},
"x": {
"value": 0
},
"x2": {
"signal": "width"
}
},
"update": {
"opacity": {
"signal": "datum.origin == focus_origin && highlight_origin ? 0.05 : 0"
}
}
}
},
{
"type": "rule",
"from": {
"data": "boxplot"
},
"encode": {
"enter": {
"stroke": {
"signal": "boxplotColor"
},
"strokeWidth": {
"value": 2
},
"strokeOpacity": {
"value": 0.9
},
"y": {
"signal": "plotWidth / 2"
}
},
"update": {
"x": {
"scale": "loadTime",
"field": "min"
},
"x2": {
"scale": "loadTime",
"field": "q1"
},
"opacity": {
"signal": "show_boxplots ? 1 : 0"
}
}
}
},
{
"type": "rule",
"from": {
"data": "boxplot"
},
"encode": {
"enter": {
"stroke": {
"signal": "boxplotColor"
},
"strokeWidth": {
"value": 2
},
"strokeOpacity": {
"value": 0.9
},
"y": {
"signal": "plotWidth / 2"
}
},
"update": {
"x": {
"scale": "loadTime",
"field": "q3"
},
"x2": {
"scale": "loadTime",
"field": "max"
},
"opacity": {
"signal": "show_boxplots ? 1 : 0"
}
}
}
},
{
"type": "rect",
"from": {
"data": "boxplot"
},
"encode": {
"enter": {
"fill": {
"value": "white"
},
"fillOpacity": {
"value": 0
},
"stroke": {
"signal": "boxplotColor"
},
"strokeWidth": {
"value": 1.5
},
"strokeOpacity": {
"value": 0.9
},
"y": {
"signal": "plotWidth / 4 * 3"
},
"y2": {
"signal": "plotWidth / 4"
}
},
"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'}"
},
"opacity": {
"signal": "show_boxplots ? 1 : 0"
}
}
}
},
{
"type": "rule",
"from": {
"data": "boxplot"
},
"encode": {
"enter": {
"stroke": {
"signal": "boxplotColor"
},
"y": {
"signal": "plotWidth / 4 * 3"
},
"y2": {
"signal": "plotWidth / 4"
},
"strokeWidth": {
"value": 2
}
},
"update": {
"x": {
"scale": "loadTime",
"field": "q2"
},
"opacity": {
"signal": "show_boxplots ? 1 : 0"
}
}
}
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment