186 lines
3.4 KiB
JSON
186 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://vega.github.io/schema/vega/v5.json",
|
|
"description": "A basic area chart example",
|
|
"width": 500,
|
|
"height": 100,
|
|
"autosize": "fit",
|
|
"padding": 5,
|
|
"data": [
|
|
{
|
|
"name": "con"
|
|
},
|
|
{
|
|
"name": "dis"
|
|
}
|
|
],
|
|
"signals": [
|
|
{
|
|
"name": "xscale",
|
|
"description": "The transform of the x scale",
|
|
"value": false,
|
|
"bind": {
|
|
"input": "checkbox",
|
|
"name": "log x scale"
|
|
}
|
|
},
|
|
{
|
|
"name": "yscale",
|
|
"description": "The transform of the y scale",
|
|
"value": false,
|
|
"bind": {
|
|
"input": "checkbox",
|
|
"name": "log y scale"
|
|
}
|
|
}
|
|
],
|
|
"scales": [
|
|
{
|
|
"name": "xscale",
|
|
"type": "pow",
|
|
"exponent": {
|
|
"signal": "xscale ? 0.1 : 1"
|
|
},
|
|
"range": "width",
|
|
"zero": false,
|
|
"nice": false,
|
|
"domain": {
|
|
"fields": [
|
|
{
|
|
"data": "con",
|
|
"field": "x"
|
|
},
|
|
{
|
|
"data": "dis",
|
|
"field": "x"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"name": "yscale",
|
|
"type": "pow",
|
|
"exponent": {
|
|
"signal": "yscale ? 0.1 : 1"
|
|
},
|
|
"range": "height",
|
|
"nice": true,
|
|
"zero": true,
|
|
"domain": {
|
|
"fields": [
|
|
{
|
|
"data": "con",
|
|
"field": "y"
|
|
},
|
|
{
|
|
"data": "dis",
|
|
"field": "y"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
],
|
|
"axes": [
|
|
{
|
|
"orient": "bottom",
|
|
"scale": "xscale",
|
|
"labelColor": "#727d93",
|
|
"tickColor": "#fff",
|
|
"tickOpacity": 0.0,
|
|
"domainColor": "#fff",
|
|
"domainOpacity": 0.0,
|
|
"format": "~s",
|
|
"tickCount": 10
|
|
}
|
|
],
|
|
"marks": [
|
|
{
|
|
"type": "area",
|
|
"from": {
|
|
"data": "con"
|
|
},
|
|
"encode": {
|
|
"update": {
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "y"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"value": 0
|
|
},
|
|
"fill": {
|
|
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#4C78A8'}] }"
|
|
},
|
|
"interpolate": {
|
|
"value": "monotone"
|
|
},
|
|
"fillOpacity": {
|
|
"value": 1
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "rect",
|
|
"from": {
|
|
"data": "dis"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"width": {
|
|
"value": 1
|
|
}
|
|
},
|
|
"update": {
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "y"
|
|
},
|
|
"y2": {
|
|
"scale": "yscale",
|
|
"value": 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"type": "symbol",
|
|
"from": {
|
|
"data": "dis"
|
|
},
|
|
"encode": {
|
|
"enter": {
|
|
"shape": {
|
|
"value": "circle"
|
|
},
|
|
"size": [{ "value": 100 }],
|
|
"tooltip": {
|
|
"signal": "datum.y"
|
|
}
|
|
},
|
|
"update": {
|
|
"x": {
|
|
"scale": "xscale",
|
|
"field": "x"
|
|
},
|
|
"y": {
|
|
"scale": "yscale",
|
|
"field": "y"
|
|
},
|
|
"fill": {
|
|
"value": "#1e4577"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|