-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (102 loc) · 4.45 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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css"
integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<link rel="stylesheet" href="layout.css">
<div class="pure-g" id="box">
<div class="pure-u-1-2 pure-u-md-1-2">
<div class="header1_div">
<h1>Global Density Dot Plot (2022)</h1>
</div>
<div class="text_div">
<p>Figure 1 shows a world map that shows the <br> airports that
range between ~20 flights to ~130 <br> flights. Each
proportional symbol is accompanied by information <br>
relating to the Airport's: Airport's Name, Frequency and Location.
</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2">
<div class="chart-container" id="vega-chart2"></div>
</div>
</div>
<div class="pure-g" id="box">
<div class="pure-u-1-2 pure-u-md-1-2">
<div class="header1_div">
<h1>Most Active Months</h1>
</div>
<div class="text_div">
<p>Figure 2 shows a stacked bar chart to represent the <br>
top coutries around the world with the most active flights <br>
for each period of each month</p>
</div>
</div>
<div class="pure-u-1-2 pure-u-md-1-2">
<div class="chart-container" id="vega-chart1"></div>
</div>
</div>
<div class="pure-g" id="box">
<div class="pure-u-1-2">
<div class="header1_div">
<h1>Monthly Average Ages (Per Continent)</h1>
</div>
<div class="text_div">
<p>Figure 3 shows an interactive grouped/multiple bar chart. <br>
It allows you to see the average age per each <br>
flight for each month in 2022.</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="chart-container" id="vega-chart3"></div>
</div>
</div>
<div class="smalltext">Owned and produced by: Alexander Authors. All data was taken from: <br>
https://www.kaggle.com/datasets/iamsouravbanerjee/airline-dataset <br>
https://openflights.org/data.html
<script>
const vegaLiteSpecURL1 = "https://raw.githubusercontent.com/aaut0001/FIT3179_W10/main/visual.vg.json";
const container1 = document.getElementById("vega-chart1");
vegaEmbed(container1, vegaLiteSpecURL1)
.then((result) => {
const view = result.view;
})
.catch((error) => {
console.error("Error embedding Vega-Lite chart 1:", error);
});
const vegaLiteSpecURL2 = "https://raw.githubusercontent.com/aaut0001/FIT3179_W10/main/visual2.vg.json";
const container2 = document.getElementById("vega-chart2");
vegaEmbed(container2, vegaLiteSpecURL2)
.then((result) => {
const view = result.view;
})
.catch((error) => {
console.error("Error embedding Vega-Lite chart 2:", error);
});
const vegaLiteSpecURL3 = "https://raw.githubusercontent.com/aaut0001/FIT3179_W10/main/visual3.vg.json"
const container3 = document.getElementById("vega-chart3");
vegaEmbed(container3, vegaLiteSpecURL3)
.then((result) => {
const view = result.view;
})
.catch((error) => {
console.error("Error embedding Vega-Lite chart 3:", error);
});
const vegaLiteSpecURL4 = "https://raw.githubusercontent.com/aaut0001/FIT3179_W10/main/visual4.vg.json";
const container4 = document.getElementById("vega-chart4");
vegaEmbed(container4, vegaLiteSpecURL4)
.then((result) => {
const view = result.view;
})
.catch((error) => {
console.error("Error embedding Vega-Lite chart 4:", error);
});
</script>
</body>
</html>