-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·96 lines (67 loc) · 3.59 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
<!DOCTYPE html>
<html>
<head>
<!-- Character Encoding-->
<meta charset="utf-8">
<!-- IE compatability-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile Responsiveness to Viewport-->
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
<!-- Favicon-->
<link rel="shortcut icon" href="./Data/Pictures/favicon.png">
<!-- Style sheet-->
<link rel="stylesheet" href="style/styleIndex.css">
<!-- Page Title-->
<title>Global & EU Trade Visualisation</title>
<!-- p5.js Library -->
<script src="lib/p5.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Sketch File -->
<script src="sketch/sketchIndex.js"></script>
<!-- Constructor Functions -->
<script src="class/preloadData.js"></script>
<!-- Initial Styling-->
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="index">
<!-- Title and Flag-->
<img src="Data/Pictures/Europe.png">
<div id="index-title">
<h1>Global and European Union Trade Visualisation</h1>
</div>
<!-- Drop Down-->
<div id="selector">
<select id="file-select"></select>
</div>
<!-- Button to map vis-->
<div id="index-button" class="nicebox">
<a href="main.html" id="main-button" class="button">Go to Map</a>
</div>
</div>
<!-- Footer and abstract modal-->
<footer class="footer">
<div id=on-screen-abstract>
<a id="myBtn" class="footer-links">Abstract</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2>Abstract</h2>
<p id=abstract-content>This project visualizes global trade data from Eurostat on imports and exports of goods and services within the EU28 member states, along with other key international trade countries. Using Google Maps API and the data from Eurostat, a graphical representation of the data will show as a range of colours determining which countries contribute to certain key areas of EU trade. <br><br>The trade data is accompanied with national accounts (GDP, tax of goods etc.) as well as graphical representation of various other trade data. Interactions with the datasets and the API have been built with HTML, CSS, and JavaScript (jQuery, p5.js). Graphical representations use the JavaScript libraries, c3.js, and d3.js.</p>
</div>
</div>
</div>
<div id=on-screen>
<p>The Global and European Union Trade Visualisation by <a href="https://www.jonathantang.co.uk" class="footer-links">Jonathan Tang</a> and <a href=https://github.com/TristanThomson class="footer-links">Tristan Thomson</a> is licensed under a <a href="https://creativecommons.org/licenses/by-sa/3.0/" class="footer-links">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. Permissions beyond the scope of this license may be available <a href="https://www.gold.ac.uk/info-law/copyright/" class="footer-links">here</a>.</p>
</div>
</footer>
</body>
</html>