Skip to content

Instantly share code, notes, and snippets.

@wch

wch/vega-legend-update.html

Last active November 2, 2017 05:27
Show Gist options
  • Save wch/6313003 to your computer and use it in GitHub Desktop.
Save wch/6313003 to your computer and use it in GitHub Desktop.
Download ZIP
Example of vega data and legend updates
Raw
vega-legend-update.html
<!DOCTYPE html>
<html>
<head>
<script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
<script src="http://trifacta.github.io/vega/vega.js"></script>
</head>
<body>
<script type="text/javascript">
var iris_spec = {
"width": 200,
"height": 200,
"data": [
{
"name": "iris",
}
],
"scales": [
{
"name": "x",
"nice": true,
"range": "width",
"domain": {"data": "iris", "field": "data.sepalWidth"}
},
{
"name": "y",
"nice": true,
"range": "height",
"domain": {"data": "iris", "field": "data.petalLength"}
},
{
"name": "c",
"type": "ordinal",
"domain": {"data": "iris", "field": "data.species"},
"range": "category10"
}
],
"axes": [
{"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
{"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
],
"legends": [
{
"fill": "c",
"title": "Species",
"offset": 0,
"properties": {
"symbols": {
"fillOpacity": {"value": 0.5},
"stroke": {"value": "transparent"}
}
}
}
],
"marks": [
{
"type": "symbol",
"from": {"data": "iris"},
"properties": {
"enter": {
"x": {"scale": "x", "field": "data.sepalWidth"},
"y": {"scale": "y", "field": "data.petalLength"},
"fill": {"scale": "c", "field": "data.species"},
"fillOpacity": {"value": 0.5}
},
"update": {
"x": {"scale": "x", "field": "data.sepalWidth"},
"y": {"scale": "y", "field": "data.petalLength"},
"fill": {"scale": "c", "field": "data.species"},
"size": {"value": 100},
"stroke": {"value": "transparent"}
},
"hover": {
"size": {"value": 300},
"stroke": {"value": "white"}
}
}
}
]
}
var categories_2 = {
"iris" : [
{"sepalWidth": 1, "petalLength": 1, "species": "setosa"},
{"sepalWidth": 2, "petalLength": 2, "species": "setosa"},
{"sepalWidth": 3, "petalLength": 3, "species": "versicolor"},
{"sepalWidth": 4, "petalLength": 4, "species": "versicolor"}
]
}
var categories_6 = {
"iris" : [
{"sepalWidth": 1, "petalLength": 9, "species": "setosa"},
{"sepalWidth": 2, "petalLength": 8, "species": "setosa1"},
{"sepalWidth": 3, "petalLength": 7, "species": "setosa1"},
{"sepalWidth": 4, "petalLength": 6, "species": "versicolor"},
{"sepalWidth": 5, "petalLength": 5, "species": "versicolor"},
{"sepalWidth": 6, "petalLength": 4, "species": "versicolor1"},
{"sepalWidth": 7, "petalLength": 3, "species": "virginica"},
{"sepalWidth": 8, "petalLength": 2, "species": "virginica1"},
{"sepalWidth": 9, "petalLength": 1, "species": "virginica1"}
]
};
function go(spec, data1, data2) {
var vis;
vg.parse.spec(spec, function(chart) {
vis = chart({el:"#vis", renderer: "canvas"});
vis.data(data1);
vis.update();
});
// After 1 second, load second data set and update.
setTimeout(function() {
vis.data(data2)
vis.update();
},
1000
);
}
</script>
<div>
When either of the links below are clicked, Vega will parse the spec with the first data set; then it will wait one second and load the second data set and update, without re-parsing the spec.
<br>
One of the data sets has two categories, the other has six.
<br><br>
<a href="#" onclick="go(iris_spec, categories_2, categories_6);">Two then six categories</a>
<br><br>
<a href="#" onclick="go(iris_spec, categories_6, categories_2);">Six then two categories</a>
<br><br>
<div id="vis"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment