Skip to content

Instantly share code, notes, and snippets.

@eiri

eiri/index.html

Created October 4, 2020 15:32
Show Gist options
  • Save eiri/b714a66bd2efcf7e1cba96022ede39ac to your computer and use it in GitHub Desktop.
Save eiri/b714a66bd2efcf7e1cba96022ede39ac to your computer and use it in GitHub Desktop.
Download ZIP
Embedded vega-lite with async data load and transform
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script src="vega.min.js"></script>
<script src="vega-lite.min.js"></script>
<script src="vega-embed.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var specsV1 = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {
"name" : "table"
},
"title": "Car's hoursepower",
"width": 1280,
"height": 720,
"mark": {
"type": "point",
"shape": "circle"
},
"encoding": {
"x": {
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"field": "Miles_per_Gallon",
"title": "MPG",
"type": "quantitative"
},
"size": {
"field": "Cylinders",
"type": "quantitative"
},
"tooltip": {
"field": "Name",
"type": "nominal"
}
}
};
vegaEmbed('#vis', specsV1, {
actions: false,
}).then(res => {
vega.loader().load("/cars/_all_docs?include_docs=true").then(data => {
var parsed = vega.read(data, {type: "json", property: "rows"})
var filtered = parsed.map(function(d) {
return d.doc
});
console.log('data', filtered)
res.view.insert('table', filtered).run()
})
console.log('res', res)
}).catch(console.error);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment