Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save thomascamminady/5f030cd30203ff66a5c3b70be3d5aa4a to your computer and use it in GitHub Desktop.
Save thomascamminady/5f030cd30203ff66a5c3b70be3d5aa4a to your computer and use it in GitHub Desktop.
vega full example
```
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "white",
"padding": 5,
"width": 480,
"data": [
{
"name": "brush_store"
},
{
"name": "source_0",
"url": "data/sp500.csv",
"format": {
"type": "csv",
"parse": {
"date": "date"
},
"delimiter": ","
},
"transform": [
{
"type": "impute",
"field": "price",
"groupby": [],
"key": "date",
"method": "value",
"value": 0
},
{
"type": "stack",
"groupby": [
"date"
],
"field": "price",
"sort": {
"field": [],
"order": []
},
"as": [
"price_start",
"price_end"
],
"offset": "zero"
}
]
}
],
"signals": [
{
"name": "childHeight",
"value": 200
},
{
"name": "unit",
"value": {},
"on": [
{
"events": "pointermove",
"update": "isTuple(group()) ? group() : unit"
}
]
},
{
"name": "brush",
"update": "vlSelectionResolve(\"brush_store\", \"union\")"
}
],
"layout": {
"padding": 20,
"columns": 1,
"bounds": "full",
"align": "each"
},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {
"signal": "width"
},
"height": {
"signal": "childHeight"
}
}
},
"signals": [
{
"name": "brush_x",
"value": [],
"on": [
{
"events": {
"source": "scope",
"type": "pointerdown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"type": "pointermove",
"consume": true,
"between": [
{
"source": "scope",
"type": "pointerdown",
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\""
]
},
{
"source": "window",
"type": "pointerup"
}
]
},
"update": "[brush_x[0], clamp(x(unit), 0, width)]"
},
{
"events": {
"signal": "brush_scale_trigger"
},
"update": "[scale(\"concat_0_x\", brush_date[0]), scale(\"concat_0_x\", brush_date[1])]"
},
{
"events": [
{
"source": "view",
"type": "dblclick"
}
],
"update": "[0, 0]"
},
{
"events": {
"signal": "brush_translate_delta"
},
"update": "clampRange(panLinear(brush_translate_anchor.extent_x, brush_translate_delta.x / span(brush_translate_anchor.extent_x)), 0, width)"
},
{
"events": {
"signal": "brush_zoom_delta"
},
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, width)"
}
]
},
{
"name": "brush_date",
"on": [
{
"events": {
"signal": "brush_x"
},
"update": "brush_x[0] === brush_x[1] ? null : invert(\"concat_0_x\", brush_x)"
}
]
},
{
"name": "brush_scale_trigger",
"value": {},
"on": [
{
"events": [
{
"scale": "concat_0_x"
}
],
"update": "(!isArray(brush_date) || (+invert(\"concat_0_x\", brush_x)[0] === +brush_date[0] && +invert(\"concat_0_x\", brush_x)[1] === +brush_date[1])) ? brush_scale_trigger : {}"
}
]
},
{
"name": "brush_tuple",
"on": [
{
"events": [
{
"signal": "brush_date"
}
],
"update": "brush_date ? {unit: \"concat_0\", fields: brush_tuple_fields, values: [brush_date]} : null"
}
]
},
{
"name": "brush_tuple_fields",
"value": [
{
"field": "date",
"channel": "x",
"type": "R"
}
]
},
{
"name": "brush_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "pointerdown",
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit), extent_x: slice(brush_x)}"
}
]
},
{
"name": "brush_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "pointermove",
"consume": true,
"between": [
{
"source": "scope",
"type": "pointerdown",
"markname": "brush_brush"
},
{
"source": "window",
"type": "pointerup"
}
]
}
],
"update": "{x: brush_translate_anchor.x - x(unit), y: brush_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "brush_zoom_anchor",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit)}"
}
]
},
{
"name": "brush_zoom_delta",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"force": true,
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "brush_modify",
"on": [
{
"events": {
"signal": "brush_tuple"
},
"update": "modify(\"brush_store\", brush_tuple, true)"
}
]
}
],
"marks": [
{
"name": "brush_brush_bg",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {
"value": "#333"
},
"fillOpacity": {
"value": 0.125
}
},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"signal": "brush_x[0]"
},
{
"value": 0
}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"value": 0
},
{
"value": 0
}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"signal": "brush_x[1]"
},
{
"value": 0
}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"field": {
"group": "height"
}
},
{
"value": 0
}
]
}
}
},
{
"name": "concat_0_marks",
"type": "area",
"clip": true,
"style": [
"area"
],
"sort": {
"field": "datum[\"date\"]"
},
"interactive": true,
"from": {
"data": "source_0"
},
"encode": {
"update": {
"orient": {
"value": "vertical"
},
"fill": {
"value": "#4c78a8"
},
"description": {
"signal": "\"date: \" + (timeFormat(datum[\"date\"], '%b %d, %Y')) + \"; price: \" + (format(datum[\"price\"], \"\"))"
},
"x": {
"scale": "concat_0_x",
"field": "date"
},
"y": {
"scale": "concat_0_y",
"field": "price_end"
},
"y2": {
"scale": "concat_0_y",
"field": "price_start"
},
"defined": {
"signal": "isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])"
}
}
}
},
{
"name": "brush_brush",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"cursor": {
"value": "move"
},
"fill": {
"value": "transparent"
}
},
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"signal": "brush_x[0]"
},
{
"value": 0
}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"value": 0
},
{
"value": 0
}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"signal": "brush_x[1]"
},
{
"value": 0
}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0\"",
"field": {
"group": "height"
}
},
{
"value": 0
}
],
"stroke": [
{
"test": "brush_x[0] !== brush_x[1]",
"value": "white"
},
{
"value": null
}
]
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"gridScale": "concat_0_y",
"grid": true,
"tickCount": {
"signal": "ceil(width/40)"
},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"gridScale": "concat_0_x",
"grid": true,
"tickCount": {
"signal": "ceil(childHeight/40)"
},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"labelFlush": true,
"labelOverlap": true,
"tickCount": {
"signal": "ceil(width/40)"
},
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "price",
"labelOverlap": true,
"tickCount": {
"signal": "ceil(childHeight/40)"
},
"zindex": 0
}
]
}
],
"scales": [
{
"name": "concat_0_x",
"type": "time",
"domain": {
"data": "source_0",
"field": "date"
},
"domainRaw": {
"signal": "brush[\"date\"]"
},
"range": [
0,
{
"signal": "width"
}
]
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {
"data": "source_0",
"fields": [
"price_start",
"price_end"
]
},
"range": [
{
"signal": "childHeight"
},
0
],
"nice": true,
"zero": true
}
],
"config": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment