-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
35 lines (33 loc) · 12.3 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.0.2"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300, "height": 600, "strokeWidth": 0, "width": 1000}, "axis": {"grid": false, "labelFont": "Verdana", "titleFont": "Verdana"}}, "vconcat": [{"layer": [{"data": {"name": "data-e24efd7efefe2ab19688ca9470422657"}, "mark": "trail", "encoding": {"color": {"type": "quantitative", "field": "division", "legend": null, "scale": {"domain": ["1", "2", "3"], "range": ["#F44336", "#64B5F6", "#AFB42B"]}}, "detail": {"type": "quantitative", "field": "division"}, "latitude": {"field": "lat", "type": "quantitative"}, "longitude": {"field": "lon", "type": "quantitative"}, "size": {"type": "quantitative", "field": "survivor", "legend": null, "scale": {"range": [2, 30]}}, "tooltip": [{"type": "quantitative", "field": "lat", "title": "Latitude"}, {"type": "quantitative", "field": "lon", "title": "Longitude"}, {"type": "quantitative", "field": "survivor", "title": "Survivors"}, {"type": "nominal", "field": "dir", "title": "Direction"}]}}, {"data": {"name": "data-0d147b66f9a24ca267991d42664a0e23"}, "mark": {"type": "circle", "color": "#000000", "size": 60}, "encoding": {"latitude": {"field": "lat", "type": "quantitative"}, "longitude": {"field": "lon", "type": "quantitative"}, "tooltip": [{"type": "quantitative", "field": "lat", "title": "Latitude"}, {"type": "quantitative", "field": "lon", "title": "Longitude"}, {"type": "nominal", "field": "city", "title": "City"}]}}, {"data": {"name": "data-0d147b66f9a24ca267991d42664a0e23"}, "mark": {"type": "text", "dx": 7, "dy": -12, "font": "Verdana", "fontSize": 9, "fontStyle": "bold"}, "encoding": {"latitude": {"field": "lat", "type": "quantitative"}, "longitude": {"field": "lon", "type": "quantitative"}, "text": {"type": "nominal", "field": "city"}}}, {"data": {"name": "data-c3169e73c36b632c9163b58c859946ec"}, "mark": {"type": "text", "angle": 280, "dx": 1, "dy": 8, "font": "Verdana", "fontSize": 8, "fontStyle": "italic"}, "encoding": {"latitude": {"field": "lat", "type": "quantitative"}, "longitude": {"field": "lon", "type": "quantitative"}, "text": {"type": "quantitative", "field": "survivor"}}}, {"data": {"name": "data-e24efd7efefe2ab19688ca9470422657"}, "mark": "text", "encoding": {"x": {"type": "quantitative", "axis": {"grid": true, "title": "Longitude"}, "field": "lon", "scale": {"domain": [24.0, 37.65]}}, "y": {"type": "quantitative", "axis": {"grid": true, "orient": "left", "title": "Latitude"}, "field": "lat", "scale": {"domain": [52.95, 57.05]}}}}]}, {"layer": [{"mark": {"type": "line", "color": "#4CAF50"}, "encoding": {"x": {"type": "quantitative", "axis": {"grid": true, "title": "Longitude"}, "field": "lon", "scale": {"domain": [24.0, 37.65]}}, "y": {"type": "quantitative", "axis": {"grid": true, "orient": "right", "title": "Temperature on Retreat"}, "field": "temp", "scale": {"domain": [-40.0, 10.0]}}}}, {"mark": {"type": "circle", "color": "#4CAF50", "size": 50}, "encoding": {"tooltip": [{"type": "quantitative", "field": "lon", "title": "Longitude"}, {"type": "quantitative", "field": "temp", "title": "Temperature"}, {"type": "nominal", "field": "date", "title": "Date"}], "x": {"type": "quantitative", "axis": {"grid": true, "title": "Longitude"}, "field": "lon", "scale": {"domain": [24.0, 37.65]}}, "y": {"type": "quantitative", "axis": {"grid": true, "orient": "right", "title": "Temperature on Retreat"}, "field": "temp", "scale": {"domain": [-40.0, 10.0]}}}}, {"mark": {"type": "text", "dx": 5, "dy": 20, "font": "Verdana", "fontSize": 10, "fontStyle": "bold"}, "encoding": {"text": {"type": "nominal", "field": "date"}, "x": {"type": "quantitative", "axis": {"grid": true, "title": "Longitude"}, "field": "lon", "scale": {"domain": [24.0, 37.65]}}, "y": {"type": "quantitative", "axis": {"grid": true, "orient": "right", "title": "Temperature on Retreat"}, "field": "temp", "scale": {"domain": [-40.0, 10.0]}}}}], "data": {"name": "data-993e84ace5437efec843a868c647593c"}, "height": 200}], "$schema": "https://vega.github.io/schema/vega-lite/v4.0.2.json", "datasets": {"data-e24efd7efefe2ab19688ca9470422657": [{"lon": 24.0, "lat": 55.2, "survivor": 22000, "dir": "A", "division": 3}, {"lon": 24.5, "lat": 55.3, "survivor": 22000, "dir": "A", "division": 3}, {"lon": 24.6, "lat": 55.8, "survivor": 6000, "dir": "R", "division": 3}, {"lon": 24.2, "lat": 54.4, "survivor": 6000, "dir": "R", "division": 3}, {"lon": 24.1, "lat": 54.3, "survivor": 6000, "dir": "R", "division": 3}, {"lon": 24.0, "lat": 55.1, "survivor": 60000, "dir": "A", "division": 2}, {"lon": 24.5, "lat": 55.2, "survivor": 60000, "dir": "A", "division": 2}, {"lon": 25.5, "lat": 54.7, "survivor": 60000, "dir": "A", "division": 2}, {"lon": 26.6, "lat": 55.7, "survivor": 40000, "dir": "A", "division": 2}, {"lon": 27.4, "lat": 55.6, "survivor": 33000, "dir": "A", "division": 2}, {"lon": 28.7, "lat": 55.5, "survivor": 30000, "dir": "R", "division": 2}, {"lon": 29.2, "lat": 54.3, "survivor": 30000, "dir": "R", "division": 2}, {"lon": 28.5, "lat": 54.2, "survivor": 30000, "dir": "R", "division": 2}, {"lon": 28.3, "lat": 54.3, "survivor": 28000, "dir": "R", "division": 2}, {"lon": 27.5, "lat": 54.5, "survivor": 20000, "dir": "R", "division": 2}, {"lon": 26.4, "lat": 54.4, "survivor": 14000, "dir": "R", "division": 2}, {"lon": 26.8, "lat": 54.3, "survivor": 12000, "dir": "R", "division": 2}, {"lon": 24.6, "lat": 54.5, "survivor": 8000, "dir": "R", "division": 2}, {"lon": 24.4, "lat": 54.4, "survivor": 4000, "dir": "R", "division": 2}, {"lon": 24.2, "lat": 54.4, "survivor": 4000, "dir": "R", "division": 2}, {"lon": 24.1, "lat": 54.3, "survivor": 4000, "dir": "R", "division": 2}, {"lon": 24.0, "lat": 54.9, "survivor": 340000, "dir": "A", "division": 1}, {"lon": 24.5, "lat": 55.0, "survivor": 340000, "dir": "A", "division": 1}, {"lon": 25.5, "lat": 54.5, "survivor": 340000, "dir": "A", "division": 1}, {"lon": 26.0, "lat": 54.7, "survivor": 320000, "dir": "A", "division": 1}, {"lon": 27.0, "lat": 54.8, "survivor": 300000, "dir": "A", "division": 1}, {"lon": 28.0, "lat": 54.9, "survivor": 280000, "dir": "A", "division": 1}, {"lon": 28.5, "lat": 55.0, "survivor": 240000, "dir": "A", "division": 1}, {"lon": 29.0, "lat": 55.1, "survivor": 210000, "dir": "A", "division": 1}, {"lon": 30.0, "lat": 55.2, "survivor": 180000, "dir": "A", "division": 1}, {"lon": 30.3, "lat": 55.3, "survivor": 175000, "dir": "A", "division": 1}, {"lon": 32.0, "lat": 54.8, "survivor": 145000, "dir": "A", "division": 1}, {"lon": 33.2, "lat": 54.9, "survivor": 140000, "dir": "A", "division": 1}, {"lon": 34.4, "lat": 55.5, "survivor": 127100, "dir": "A", "division": 1}, {"lon": 35.5, "lat": 55.4, "survivor": 100000, "dir": "A", "division": 1}, {"lon": 37.6, "lat": 55.8, "survivor": 100000, "dir": "A", "division": 1}, {"lon": 37.65, "lat": 55.8, "survivor": 100000, "dir": "R", "division": 1}, {"lon": 37.5, "lat": 55.7, "survivor": 98000, "dir": "R", "division": 1}, {"lon": 37.0, "lat": 55.0, "survivor": 97000, "dir": "R", "division": 1}, {"lon": 36.8, "lat": 55.0, "survivor": 96000, "dir": "R", "division": 1}, {"lon": 35.4, "lat": 55.3, "survivor": 87000, "dir": "R", "division": 1}, {"lon": 34.3, "lat": 55.2, "survivor": 55000, "dir": "R", "division": 1}, {"lon": 33.3, "lat": 54.8, "survivor": 37000, "dir": "R", "division": 1}, {"lon": 32.0, "lat": 54.6, "survivor": 24000, "dir": "R", "division": 1}, {"lon": 30.4, "lat": 54.4, "survivor": 20000, "dir": "R", "division": 1}, {"lon": 29.2, "lat": 54.4, "survivor": 20000, "dir": "R", "division": 1}, {"lon": 28.5, "lat": 54.3, "survivor": 20000, "dir": "R", "division": 1}, {"lon": 28.3, "lat": 54.4, "survivor": 20000, "dir": "R", "division": 1}], "data-0d147b66f9a24ca267991d42664a0e23": [{"lon": 24.0, "lat": 55.0, "city": "Kowno"}, {"lon": 25.3, "lat": 54.7, "city": "Wilna"}, {"lon": 26.4, "lat": 54.4, "city": "Smorgoni"}, {"lon": 26.8, "lat": 54.3, "city": "Molodexno"}, {"lon": 27.7, "lat": 55.2, "city": "Gloubokoe"}, {"lon": 27.6, "lat": 53.9, "city": "Minsk"}, {"lon": 28.5, "lat": 54.3, "city": "Studienska"}, {"lon": 28.7, "lat": 55.5, "city": "Polotzk"}, {"lon": 29.2, "lat": 54.4, "city": "Bobr"}, {"lon": 30.2, "lat": 55.3, "city": "Witebsk"}, {"lon": 30.4, "lat": 54.5, "city": "Orscha"}, {"lon": 30.4, "lat": 53.9, "city": "Mohilow"}, {"lon": 32.0, "lat": 54.8, "city": "Smolensk"}, {"lon": 33.2, "lat": 54.9, "city": "Dorogobouge"}, {"lon": 34.3, "lat": 55.2, "city": "Wixma"}, {"lon": 34.4, "lat": 55.5, "city": "Chjat"}, {"lon": 36.0, "lat": 55.5, "city": "Mojaisk"}, {"lon": 37.6, "lat": 55.8, "city": "Moscou"}, {"lon": 36.6, "lat": 55.3, "city": "Tarantino"}, {"lon": 36.5, "lat": 55.0, "city": "Malo-jarosewli"}], "data-c3169e73c36b632c9163b58c859946ec": [{"lon": 24.39, "lat": 55.550000000000004, "survivor": 22000, "dir": "A", "division": 3}, {"lon": 24.990000000000002, "lat": 55.589999999999996, "survivor": 6000, "dir": "R", "division": 3}, {"lon": 24.490000000000002, "lat": 54.089999999999996, "survivor": 6000, "dir": "R", "division": 3}, {"lon": 24.76, "lat": 55.550000000000004, "survivor": 60000, "dir": "A", "division": 2}, {"lon": 26.860000000000003, "lat": 56.050000000000004, "survivor": 40000, "dir": "A", "division": 2}, {"lon": 28.96, "lat": 55.29, "survivor": 30000, "dir": "R", "division": 2}, {"lon": 28.76, "lat": 53.99, "survivor": 30000, "dir": "R", "division": 2}, {"lon": 27.76, "lat": 54.29, "survivor": 20000, "dir": "R", "division": 2}, {"lon": 27.060000000000002, "lat": 54.089999999999996, "survivor": 12000, "dir": "R", "division": 2}, {"lon": 24.66, "lat": 54.19, "survivor": 4000, "dir": "R", "division": 2}, {"lon": 24.360000000000003, "lat": 54.089999999999996, "survivor": 4000, "dir": "R", "division": 2}, {"lon": 24.63, "lat": 55.35, "survivor": 340000, "dir": "A", "division": 1}, {"lon": 26.13, "lat": 55.050000000000004, "survivor": 320000, "dir": "A", "division": 1}, {"lon": 28.13, "lat": 55.25, "survivor": 280000, "dir": "A", "division": 1}, {"lon": 29.13, "lat": 55.45, "survivor": 210000, "dir": "A", "division": 1}, {"lon": 30.43, "lat": 55.65, "survivor": 175000, "dir": "A", "division": 1}, {"lon": 33.330000000000005, "lat": 55.25, "survivor": 140000, "dir": "A", "division": 1}, {"lon": 35.63, "lat": 55.75, "survivor": 100000, "dir": "A", "division": 1}, {"lon": 37.78, "lat": 55.589999999999996, "survivor": 100000, "dir": "R", "division": 1}, {"lon": 37.13, "lat": 54.79, "survivor": 97000, "dir": "R", "division": 1}, {"lon": 35.53, "lat": 55.089999999999996, "survivor": 87000, "dir": "R", "division": 1}, {"lon": 33.43, "lat": 54.589999999999996, "survivor": 37000, "dir": "R", "division": 1}, {"lon": 30.529999999999998, "lat": 54.19, "survivor": 20000, "dir": "R", "division": 1}, {"lon": 28.63, "lat": 54.089999999999996, "survivor": 20000, "dir": "R", "division": 1}], "data-993e84ace5437efec843a868c647593c": [{"lon": 37.6, "temp": 0.0, "days": 6.0, "date": "0.0\u00b0C 18,Oct"}, {"lon": 36.0, "temp": 0.0, "days": 6.0, "date": "0.0\u00b0C 24,Oct"}, {"lon": 33.2, "temp": -9.0, "days": 16.0, "date": "-9.0\u00b0C 9,Nov"}, {"lon": 32.0, "temp": -21.0, "days": 5.0, "date": "-21.0\u00b0C 14,Nov"}, {"lon": 29.2, "temp": -11.0, "days": 10.0, "date": "-11.0\u00b0C "}, {"lon": 28.5, "temp": -20.0, "days": 4.0, "date": "-20.0\u00b0C 28,Nov"}, {"lon": 27.2, "temp": -24.0, "days": 3.0, "date": "-24.0\u00b0C 1,Dec"}, {"lon": 26.7, "temp": -30.0, "days": 5.0, "date": "-30.0\u00b0C 6,Dec"}, {"lon": 25.3, "temp": -26.0, "days": 1.0, "date": "-26.0\u00b0C 7,Dec"}]}};
var embedOpt = {"actions": false, "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));
})(vegaEmbed);
</script>
</body>
</html>