Created
April 24, 2024 07:12
-
-
Save thomascamminady/5f030cd30203ff66a5c3b70be3d5aa4a to your computer and use it in GitHub Desktop.
vega full example
This file contains hidden or 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/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