Skip to content

Instantly share code, notes, and snippets.

@domoritz

domoritz/.block

Last active May 11, 2020 16:17
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/8a8bdd59d379c147fa7a2e54709f6906 to your computer and use it in GitHub Desktop.
Save domoritz/8a8bdd59d379c147fa7a2e54709f6906 to your computer and use it in GitHub Desktop.
Download ZIP
Vega out of sync demo
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Sample</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis" style="height:100%;width:100%;"></div>
<script type="text/javascript">
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/editor/data/cars.json"},
"autosize": {
"contains": "padding", "type": "fit", "resize": true
},
"layer": [
{
"mark": {
"type": "point", "size": 150, "clip": true
},
"selection": {
"highlight": {
"type": "interval",
"on": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": false,
"empty": "none"
},
"zoom": {
"type": "interval",
"bind": "scales",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]",
"empty": "none"
}
},
"encoding": {
"x": {
"field": "Displacement", "type": "quantitative"
},
"y": {
"field": "Miles_per_Gallon", "type": "quantitative"
}
}
}
]
};
vlSpec.height = window.innerHeight-100; vlSpec.width = window.innerWidth-100;
vegaEmbed('#vis', vlSpec, {renderer: 'svg', actions: false});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment