Created
December 18, 2018 16:52
-
-
Save simonhearne/1e8a3f01c40dec2bf6cee421484816c7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://vega.github.io/schema/vega/v4.json", | |
| "width": 1000, | |
| "height": 400, | |
| "padding": 20, | |
| "autosize": { | |
| "type": "fit" | |
| }, | |
| "config": { | |
| "text": { | |
| "font": "Ideal Sans, Avenir Next, Helvetica" | |
| }, | |
| "axis": { | |
| "labelFont": "Ideal Sans, Avenir Next, Helvetica", | |
| "labelFontSize": 12, | |
| "titleFontSize": 14, | |
| "titleFontWeight": 400 | |
| } | |
| }, | |
| "signals": [ | |
| { | |
| "name": "height", | |
| "update": "height - 40" | |
| }, | |
| { | |
| "name": "width", | |
| "update": "width - 40" | |
| }, | |
| { | |
| "name": "plotWidth", | |
| "value": 100, | |
| "update": "height / types.length" | |
| }, | |
| { | |
| "name": "types", | |
| "value": [ | |
| "Mobile","Desktop","Tablet" | |
| ] | |
| }, | |
| { | |
| "name": "timers", | |
| "value": [ | |
| "FIRSTBYTETIMER", | |
| "DOMLOADTIMER", | |
| "FIRSTINPUTDELAY", | |
| "TTVR", | |
| "FIRSTPAINT", | |
| "FIRSTCONTENTFULPAINT", | |
| "PAGELOADTIME", | |
| "TTI", | |
| "TTFI" | |
| ] | |
| }, | |
| { | |
| "name": "band_opacity", | |
| "value": 0.05 | |
| }, | |
| { | |
| "name": "maxLoadTime", | |
| "value": 10000 | |
| } | |
| ], | |
| "data": [ | |
| { | |
| "name": "distributions", | |
| "values": [ | |
| { | |
| "DEVICETYPENAME":"Desktop", "FIRSTBYTETIMER":532, "DOMLOADTIMER":573, "FIRSTCONTENTFULPAINT":2685, "FIRSTINPUTDELAY":626, "FIRSTPAINT":1867, "PAGELOADTIME":3707, "TTFI":56811, "TTI":3910.5, "TTVR":1560, "FREQUENCY":534140 | |
| }, | |
| { | |
| "DEVICETYPENAME":"Mobile", "FIRSTBYTETIMER":183,"DOMLOADTIMER":331, "FIRSTCONTENTFULPAINT":2278, "FIRSTINPUTDELAY":639, "FIRSTPAINT":1397, "PAGELOADTIME":2168, "TTFI":10290.5, "TTI":756, "TTVR":814, "FREQUENCY":50156 | |
| }, | |
| { | |
| "DEVICETYPENAME":"Tablet", "FIRSTBYTETIMER":438, "DOMLOADTIMER":570, "FIRSTCONTENTFULPAINT":3164.5, "FIRSTINPUTDELAY":1164, "FIRSTPAINT":2338, "PAGELOADTIME":7155, "TTFI":77565, "TTI":8400.5, "TTVR":2283, "FREQUENCY":60441 | |
| } | |
| ], | |
| "transform": [ | |
| { | |
| "type": "fold", | |
| "fields": [ | |
| "PAGELOADTIME", | |
| "FIRSTINPUTDELAY", | |
| "DOMLOADTIMER", | |
| "TTVR", | |
| "FIRSTPAINT", | |
| "FIRSTCONTENTFULPAINT", | |
| "TTI", | |
| "FIRSTBYTETIMER", | |
| "TTFI" | |
| ], | |
| "as":[ | |
| "key", | |
| "value" | |
| ] | |
| } | |
| ] | |
| } | |
| ], | |
| "scales": [ | |
| { | |
| "name": "layout", | |
| "type": "band", | |
| "range": "height", | |
| "domain": { | |
| "data": "distributions", | |
| "field": "DEVICETYPENAME" | |
| } | |
| }, | |
| { | |
| "name": "loadTime", | |
| "type": "linear", | |
| "range": "width", | |
| "zero": true, | |
| "nice": true, | |
| "domain": [0, {"signal":"maxLoadTime"}], | |
| "clamp": true | |
| }, | |
| { | |
| "name": "timerColor", | |
| "type": "ordinal", | |
| "range": { | |
| "scheme": "magma" | |
| }, | |
| "domain": { | |
| "data": "distributions", | |
| "field": "key" | |
| } | |
| } | |
| ], | |
| "axes": [ | |
| { | |
| "orient": "bottom", | |
| "scale": "loadTime", | |
| "title": "Load Time (ms)" | |
| }, | |
| { | |
| "orient": "left", | |
| "scale": "layout", | |
| "tickCount": 5, | |
| "zindex": 1 | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "type": "group", | |
| "from": { | |
| "facet": { | |
| "name": "devicetype", | |
| "data": "distributions", | |
| "groupby": ["DEVICETYPENAME"] | |
| } | |
| }, | |
| "encode": { | |
| "enter": { | |
| "yc": { | |
| "scale": "layout", | |
| "field": "DEVICETYPENAME", | |
| "band": 0.5 | |
| }, | |
| "height": {"signal": "plotWidth"}, | |
| "width": {"signal": "width"} | |
| } | |
| }, | |
| "scales": [ | |
| { | |
| "name": "yscale", | |
| "type": "linear", | |
| "range": [{"signal": "plotWidth"}, 0], | |
| "domain": [0,1] | |
| } | |
| ], | |
| "marks": [ | |
| { | |
| "type": "group", | |
| "from": { | |
| "facet": { | |
| "name": "devicetimers", | |
| "data": "devicetype", | |
| "groupby": "timer" | |
| } | |
| }, | |
| "marks": [ | |
| { | |
| "type": "rect", | |
| "from": { | |
| "data": "devicetype" | |
| }, | |
| "encode": { | |
| "enter": { | |
| "fill": { | |
| "signal": "'rebeccapurple'" | |
| } | |
| }, | |
| "update": { | |
| "x": { | |
| "value": 0 | |
| }, | |
| "x2": { | |
| "signal": "scale('loadTime',datum.value)" | |
| }, | |
| "y": { | |
| "signal": "scale('yscale',0.2)" | |
| }, | |
| "y2": { | |
| "signal": "scale('yscale',0.8)" | |
| }, | |
| "tooltip" : { | |
| "signal": "datum" | |
| }, | |
| "opacity": { | |
| "signal": "datum.key === 'FREQUENCY' ? 0 : 0.15" | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type": "rule", | |
| "encode": { | |
| "enter": { | |
| "stroke": {"value": "black"}, | |
| "strokeWidth": {"value": 2} | |
| }, | |
| "update": { | |
| "x": { | |
| "signal": "scale('loadTime',datum.value)" | |
| }, | |
| "y": { | |
| "signal": "scale('yscale',0.2)" | |
| }, | |
| "y2": { | |
| "signal": "scale('yscale',0.8)" | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "type": "text", | |
| "encode": { | |
| "enter": { | |
| "text": { | |
| "signal": "datum.value + 'foo'" | |
| } | |
| }, | |
| "update": { | |
| "x": { | |
| "signal": "scale('loadTime',datum.value)" | |
| }, | |
| "y": { | |
| "signal": "scale('yscale',0.9)" | |
| } | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment