-
Notifications
You must be signed in to change notification settings - Fork 592
/
demo.html
60 lines (55 loc) · 1.8 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
---
---
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Bar Chart</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@{{ site.data.versions.vega }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.data.versions.vega-lite }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.data.versions.vega-embed }}"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Template for Embedding Vega-Lite Visualization</h1>
<div>See code at <a href="https://github.com/vega/vega-lite-demo">https://github.com/vega/vega-lite-demo</a></div>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
"data": {
"values": [
{"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
{"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
{"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
]
},
"mark": "bar",
"encoding": {
"y": {"field": "a", "type": "nominal"},
"x": {
"aggregate": "average", "field": "b", "type": "quantitative",
"axis": {
"title": "Average of b"
}
}
}
};
// optional argument passed to Vega-Embed to specify Vega-Lite spec. More info at https://github.com/vega/vega-embed
var opt = {
"mode": "vega-lite"
};
// Embed the visualization in the container with id `vis`
vegaEmbed("#vis", vlSpec, opt).then(function(result) {
// Callback receiving the View instance and parsed Vega spec
// result.view is the View, which resides under the '#vis' element
}).catch(console.warn);
</script>
</body>
</html>