Skip to content

Instantly share code, notes, and snippets.

@domoritz

domoritz/.block

Last active October 4, 2020 21:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save domoritz/b36f7601f82a633f45bd2443d0d150dc to your computer and use it in GitHub Desktop.
Save domoritz/b36f7601f82a633f45bd2443d0d150dc to your computer and use it in GitHub Desktop.
Download ZIP
Interpreter with Vega-Lite
Raw
.block
license: mit
Raw
index.html
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5/build/vega.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-interpreter@1/build/vega-interpreter.js"></script>
</head>
<body>
<div id="view"></div>
<script src="main.js"></script>
</body>
Raw
main.js
const USE_EXPRESSION_INTERPRETER = true;
function render(spec) {
// Parse the Vega specification with AST output enabled
// Pass a null configuration value as the second argument
const runtime = vega.parse(spec, null, {
ast: USE_EXPRESSION_INTERPRETER
});
const viewOptions = {
renderer: 'svg', // renderer (canvas or svg)
container: '#view', // parent DOM container
hover: true // enable hover processing
};
if (USE_EXPRESSION_INTERPRETER) {
viewOptions['expr'] = vega.expressionInterpreter;
}
// Call Vega View constructor with an 'expr' interpreter option
const view = new vega.View(runtime, viewOptions);
return view.runAsync();
}
let vegaLiteCompiledSpec = {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"background": "white",
"padding": 5,
"height": 200,
"style": "cell",
"data": [
{"name": "highlight_store"},
{"name": "select_store"},
{
"name": "source_0",
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43},
{"a": "D", "b": 91},
{"a": "E", "b": 81},
{"a": "F", "b": 53},
{"a": "G", "b": 19},
{"a": "H", "b": 87},
{"a": "I", "b": 52}
]
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{"type": "identifier", "as": "_vgsid_"},
{
"type": "filter",
"expr": "isValid(datum[\"b\"]) && isFinite(+datum[\"b\"])"
}
]
}
],
"signals": [
{"name": "x_step", "value": 20},
{
"name": "width",
"update": "bandspace(domain('x').length, 0.2, 0.1) * x_step"
},
{
"name": "unit",
"value": {},
"on": [
{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
]
},
{
"name": "highlight",
"update": "vlSelectionResolve(\"highlight_store\", \"union\")"
},
{
"name": "select",
"update": "vlSelectionResolve(\"select_store\", \"union\", true)"
},
{
"name": "highlight_tuple",
"on": [
{
"events": [{"source": "scope", "type": "mouseover"}],
"update": "datum && item().mark.marktype !== 'group' ? {unit: \"\", fields: highlight_tuple_fields, values: [(item().isVoronoi ? datum.datum : datum)[\"_vgsid_\"]]} : null",
"force": true
},
{"events": [{"source": "scope", "type": "dblclick"}], "update": "null"}
]
},
{
"name": "highlight_tuple_fields",
"value": [{"type": "E", "field": "_vgsid_"}]
},
{
"name": "highlight_modify",
"on": [
{
"events": {"signal": "highlight_tuple"},
"update": "modify(\"highlight_store\", highlight_tuple, true)"
}
]
},
{
"name": "select_tuple",
"on": [
{
"events": [{"source": "scope", "type": "click"}],
"update": "datum && item().mark.marktype !== 'group' ? {unit: \"\", fields: select_tuple_fields, values: [(item().isVoronoi ? datum.datum : datum)[\"_vgsid_\"]]} : null",
"force": true
},
{"events": [{"source": "scope", "type": "dblclick"}], "update": "null"}
]
},
{
"name": "select_tuple_fields",
"value": [{"type": "E", "field": "_vgsid_"}]
},
{
"name": "select_toggle",
"value": false,
"on": [
{
"events": [{"source": "scope", "type": "click"}],
"update": "event.shiftKey"
},
{"events": [{"source": "scope", "type": "dblclick"}], "update": "false"}
]
},
{
"name": "select_modify",
"on": [
{
"events": {"signal": "select_tuple"},
"update": "modify(\"select_store\", select_toggle ? null : select_tuple, select_toggle ? null : true, select_toggle ? select_tuple : null)"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"interactive": true,
"from": {"data": "data_0"},
"encode": {
"update": {
"fill": {"value": "#4C78A8"},
"stroke": {"value": "black"},
"cursor": {"value": "pointer"},
"fillOpacity": [
{
"test": "!(length(data(\"select_store\"))) || (vlSelectionTest(\"select_store\", datum))",
"value": 1
},
{"value": 0.3}
],
"strokeWidth": [
{
"test": "(!(length(data(\"select_store\"))) || (vlSelectionTest(\"select_store\", datum))) && (length(data(\"select_store\")))",
"value": 2
},
{
"test": "(vlSelectionTest(\"highlight_store\", datum))",
"value": 1
},
{"value": 0}
],
"ariaRoleDescription": {"value": "bar"},
"description": {
"signal": "\"a: \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; b: \" + (format(datum[\"b\"], \"\"))"
},
"x": {"scale": "x", "field": "a"},
"width": {"scale": "x", "band": 1},
"y": {"scale": "y", "field": "b"},
"y2": {"scale": "y", "value": 0}
}
}
}
],
"scales": [
{
"name": "x",
"type": "band",
"domain": {"data": "data_0", "field": "a", "sort": true},
"range": {"step": {"signal": "x_step"}},
"paddingInner": 0.2,
"paddingOuter": 0.1
},
{
"name": "y",
"type": "linear",
"domain": {"data": "data_0", "field": "b"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "a",
"labelAlign": "right",
"labelAngle": 270,
"labelBaseline": "middle",
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "b",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
]
};
render(vegaLiteCompiledSpec);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment