Skip to content

Instantly share code, notes, and snippets.

@ijlyttle

ijlyttle/.block

Created August 22, 2018 18:43
Show Gist options
  • Save ijlyttle/185913b949c36dbf140184d137cb1e3d to your computer and use it in GitHub Desktop.
Save ijlyttle/185913b949c36dbf140184d137cb1e3d to your computer and use it in GitHub Desktop.
Download ZIP
Vega-Lite: multiple data
Raw
.block
license: mit
height: 500
scrolling: yes
border: yes
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- uploaded using vegawidget -->
<script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.16.0"></script>
<link rel="stylesheet" type="text/css" href="vega-embed.css">
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
const spec = "spec.json";
const opt = {"defaultStyle":true,"renderer":"canvas"};
vegaEmbed('#vis', spec, opt).then(function(result) {
// access view as result.view
}).catch(console.error);
</script>
</body>
</html>
Raw
spec.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"layer": [
{
"data": {
"values": [
{
"category": "a",
"count": 3
},
{
"category": "b",
"count": 7
},
{
"category": "c",
"count": 3
},
{
"category": "d",
"count": 5
},
{
"category": "e",
"count": 10
},
{
"category": "f",
"count": 6
}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "category",
"type": "nominal"
},
"y": {
"field": "count",
"type": "quantitative"
},
"opacity": {
"value": 0.3
}
}
},
{
"data": {
"values": [
{
"category": "a",
"count": 3
},
{
"category": "b",
"count": 7
},
{
"category": "c",
"count": 3
},
{
"category": "d",
"count": 5
},
{
"category": "e",
"count": 10
},
{
"category": "f",
"count": 6
}
]
},
"mark": "line",
"encoding": {
"x": {
"field": "category",
"type": "nominal"
},
"y": {
"field": "count",
"type": "quantitative"
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment