369 lines
6.8 KiB
JSON
369 lines
6.8 KiB
JSON
{
|
|
"$schema": "https://vega.github.io/schema/vega/v5.json",
|
|
"width": 500,
|
|
"height": 200,
|
|
"padding": 5,
|
|
"data": [
|
|
{
|
|
"name": "facet",
|
|
"values": [],
|
|
"format": {
|
|
"type": "json",
|
|
"parse": {
|
|
"timestamp": "date"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "table",
|
|
"source": "facet",
|
|
"transform": [
|
|
{
|
|
"type": "aggregate",
|
|
"groupby": ["x"],
|
|
"ops": [
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean",
|
|
"mean"
|
|
],
|
|
"fields": [
|
|
"p1",
|
|
"p5",
|
|
"p10",
|
|
"p20",
|
|
"p30",
|
|
"p40",
|
|
"p50",
|
|
"p60",
|
|
"p70",
|
|
"p80",
|
|
"p90",
|
|
"p95",
|
|
"p99"
|
|
],
|
|
"as": [
|
|
"p1",
|
|
"p5",
|
|
"p10",
|
|
"p20",
|
|
"p30",
|
|
"p40",
|
|
"p50",
|
|
"p60",
|
|
"p70",
|
|
"p80",
|
|
"p90",
|
|
"p95",
|
|
"p99"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"scales": [
|
|
{
|
|
"name": "xscale",
|
|
"type": "linear",
|
|
"nice": true,
|
|
"domain": {
|
|
"data": "facet",
|
|
"field": "x"
|
|
},
|
|
"range": "width"
|
|
},
|
|
{
|
|
"name": "yscale",
|
|
"type": "linear",
|
|
"range": "height",
|
|
"nice": true,
|
|
"zero": true,
|
|
"domain": {
|
|
"data": "facet",
|
|
"field": "p99"
|
|
}
|
|
}
|
|
],
|
|
"signals": [
|
|
{
|
|
"name": "mousemove",
|
|
"on": [{ "events": "mousemove", "update": "invert('xscale', x())" }]
|
|
},
|
|
{
|
|
"name": "mouseout",
|
|
"on": [{ "events": "mouseout", "update": "invert('xscale', x())" }]
|
|
}
|
|
],
|
|
"axes": [
|
|
{
|
|
"orient": "bottom",
|
|
"scale": "xscale",
|
|
"grid": false,
|
|
"labelColor": "#727d93",
|
|
"tickColor": "#fff",
|
|
"tickOpacity": 0.0,
|
|
"domainColor": "#727d93",
|
|
"domainOpacity": 0.1,
|
|
"tickCount": 5
|
|
},
|
|
{
|
|
"orient": "left",
|
|
"scale": "yscale",
|
|
"grid": false,
|
|
"labelColor": "#727d93",
|
|
"tickColor": "#fff",
|
|
"tickOpacity": 0.0,
|
|
"domainColor": "#727d93",
|
|
"domainOpacity": 0.1,
|
|
"tickCount": 5
|
|
}
|
|
],
|
|
"marks": [
|
|
{
|
|
"type": "rule",
|
|
"encode": {
|
|
"update": {
|
|
"xscale": { "scale": "xscale", "signal": "mousemove" }
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"fill": {
|
|
"value": "#4C78A8"
|
|
}
|
|
},
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p1"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"field": "p99"
|
|
},
|
|
"opacity": {
|
|
"value": 0.05
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"fill": {
|
|
"value": "#4C78A8"
|
|
}
|
|
},
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p5"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"field": "p95"
|
|
},
|
|
"opacity": {
|
|
"value": 0.1
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"fill": {
|
|
"value": "#4C78A8"
|
|
}
|
|
},
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p10"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"field": "p90"
|
|
},
|
|
"opacity": {
|
|
"value": 0.15
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"fill": {
|
|
"value": "#4C78A8"
|
|
}
|
|
},
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p20"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"field": "p80"
|
|
},
|
|
"opacity": {
|
|
"value": 0.2
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"fill": {
|
|
"value": "#4C78A8"
|
|
}
|
|
},
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p30"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"field": "p70"
|
|
},
|
|
"opacity": {
|
|
"value": 0.2
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"fill": {
|
|
"value": "#4C78A8"
|
|
}
|
|
},
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p40"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"field": "p60"
|
|
},
|
|
"opacity": {
|
|
"value": 0.2
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "line",
|
|
"from": {
|
|
"data": "table"
|
|
},
|
|
"encode": {
|
|
"update": {
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"stroke": {
|
|
"value": "#4C78A8"
|
|
},
|
|
"strokeWidth": {
|
|
"value": 2
|
|
},
|
|
"opacity": {
|
|
"value": 0.8
|
|
},
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "p50"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|