-
Notifications
You must be signed in to change notification settings - Fork 2
/
datachallenge.html
39 lines (37 loc) · 4.06 KB
/
datachallenge.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//vega-lite@2.6.0"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@3"></script>
</head>
<body>
<div id="vis"></div>
<script>
var spec = {"width": 685, "height": 380, "config": {"title": {"anchor": "start", "fontSize": 18, "font": "Lato", "fontColor": "#000000"}, "axisX": {"domain": true, "domainColor": "#000000", "domainWidth": 1, "grid": false, "labelFontSize": 12, "labelFont": "Lato", "labelAngle": 0, "tickColor": "#000000", "tickSize": 5, "titleFontSize": 12, "titlePadding": 10, "titleFont": "Lato", "title": ""}, "axisY": {"domain": false, "grid": true, "gridColor": "#DEDDDD", "gridWidth": 1, "labelFontSize": 12, "labelFont": "Lato", "labelPadding": 8, "ticks": false, "titleFontSize": 12, "titlePadding": 10, "titleFont": "Lato", "titleAngle": 0, "titleY": -10, "titleX": 18}, "background": "#FFFFFF", "legend": {"labelFontSize": 12, "labelFont": "Lato", "symbolSize": 100, "symbolType": "square", "titleFontSize": 12, "titlePadding": 10, "titleFont": "Lato", "title": "", "orient": "top-left", "offset": 0}, "view": {"stroke": "transparent"}, "range": {"category": ["#1696d2", "#d2d2d2", "#000000", "#fdbf11", "#ec008b", "#55b748", "#5c5859", "#db2b27"], "diverging": ["#cfe8f3", "#a2d4ec", "#73bfe2", "#46abdb", "#1696d2", "#12719e"]}, "area": {"fill": "#1696d2"}, "line": {"color": "#1696d2", "stroke": "#1696d2", "strokewidth": 5}, "trail": {"color": "#1696d2", "stroke": "#1696d2", "strokeWidth": 0, "size": 1}, "path": {"stroke": "#1696d2", "strokeWidth": 0.5}, "point": {"filled": true}, "text": {"font": "Lato", "color": "#1696d2", "fontSize": 11, "align": "right", "fontWeight": 400, "size": 11}, "bar": {"size": 40, "binSpacing": 1, "continuousBandSize": 30, "discreteBandSize": 30, "fill": "#1696d2", "stroke": false}}, "hconcat": [{"data": {"url": "donor.json"}, "mark": "bar", "encoding": {"color": {"condition": {"value": "#1696d2", "selection": "selector004"}, "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": {"selector004": {"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)"}]}, {"data": {"url": "recipient.json"}, "mark": "bar", "encoding": {"x": {"type": "quantitative", "aggregate": "sum", "field": "commitment_amount_usd_constant", "title": "Amount"}, "y": {"type": "nominal", "field": "recipient", "sort": {"op": "sum", "field": "commitment_amount_usd_constant", "order": "descending"}, "title": ""}}, "title": "Top 20 Receipients in the world", "transform": [{"filter": {"selection": "selector004"}}]}], "$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>