-
Notifications
You must be signed in to change notification settings - Fork 2
/
datachallenge_json.html
39 lines (37 loc) · 2.11 KB
/
datachallenge_json.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
<!DOCTYPE html>
<html>
<head>
<style>
.vega-actions a {
margin-right: 12px;
color: #757575;
font-weight: normal;
font-size: 13px;
}
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@4"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@3"></script>
</head>
<body>
<div id="vis"></div>
<script>
var spec = {"config": {"view": {"width": 400, "height": 300}}, "data": {"url": "datachallenge.json"}, "mark": "bar", "encoding": {"color": {"condition": {"value": "#1696d2", "selection": "selector001"}, "value": "lightgray"}, "tooltip": [{"type": "quantitative", "aggregate": "sum", "field": "commitment_amount_usd_constant"}], "x": {"type": "quantitative", "aggregate": "sum", "field": "commitment_amount_usd_constant", "title": "Amount"}, "y": {"type": "nominal", "field": "donor", "sort": {"op": "sum", "field": "commitment_amount_usd_constant", "order": "descending"}, "title": ""}}, "selection": {"selector001": {"type": "interval", "encodings": ["y"]}}, "title": "Top 10 Donors", "transform": [{"window": [{"op": "rank", "field": "commitment_amount_usd_constant", "as": "rank"}], "sort": [{"field": "commitment_amount_usd_constant", "order": "descending"}]}, {"filter": "(datum.rank < 10)"}], "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json"};
var embedOpt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = ('<div class="error" style="color:red;">'
+ '<p>JavaScript Error: ' + error.message + '</p>'
+ "<p>This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.</p>"
+ '</div>');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));
</script>
</body>
</html>