-
Notifications
You must be signed in to change notification settings - Fork 0
/
geo.html
183 lines (175 loc) · 6.16 KB
/
geo.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tatanka - Project Data Viz</title>
<link
type="image/png"
sizes="32x32"
rel="icon"
href="./iimages/favicon.ico"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- <script src="https://d3js.org/d3.v4.js"></script> -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./css/style.css" />
<script src="https://unpkg.com/svg-pan-zoom-container"></script>
</head>
<body>
<div class="dashboard">
<aside class="search-wrap" id="includeNavbar"></aside>
<header class="menu-wrap" id="includeSidebar"></header>
<main class="content-wrap">
<header class="w3-container" id="geoTitle">
<h1><b>Geo Analysis</b></h1>
</header>
<br />
<div class="content">
<h2><b>Geo Distribution of the best-selling Music Artists</b></h2>
<h4>
This map demonstrates the
<span style="color: #817ab8"><b>number</b></span> of best-selling
music artists for each country. <br />
The increasing of the intensity of purple scale color follows the
increasing of the number of music artists. <br />
It is possible to zoom on the map.
</h4>
<div class="map-container" id="geoChart3Div">
<div
data-zoom-on-wheel="zoom-amount: 0.002; min-scale: 1; max-scale: 4; scaling-property: 'width/height'"
data-pan-on-drag
class="map-container"
id="geoChart1Div"
>
<svg
id="geoChart3"
width="1200"
height="800"
viewBox="0 0 1200 800"
></svg>
</div>
<svg id="geoLegend3" viewBox="0 0 900 100"></svg>
</div>
<br />
<hr />
<br />
<h2>
<b>Geo Distribution of the best-Selling Music Artists' Sales ($)</b>
</h2>
<h4>
The first map shows the total amount of music
<span style="color: #55b467"> <b>sales</b> </span> earned by each
country, thanks to their best-selling music artists. <br />
The increasing of the intensity of green scale color follows the
increasing of the sales amount. <br />
It is possible to zoom on the map.
</h4>
<div class="map-container" id="geoChart1Div">
<div
data-zoom-on-wheel="zoom-amount: 0.002; min-scale: 1; max-scale: 4; scaling-property: 'width/height'"
data-pan-on-drag
class="map-container"
id="geoChart1Div"
>
<svg
id="geoChart1"
width="1200"
height="800"
viewBox="0 0 1200 800"
></svg>
</div>
<svg id="geoLegend1" viewBox="0 0 900 100"></svg>
</div>
<br />
<hr />
<br />
<h2>
<b
>Geo Distribution of the best-Selling Music Artists' TCU
(units)</b
>
</h2>
<h4>
The last map, displays the total amount of music units (<span
style="color: #2876b6"
>
<b>TCU</b></span
>) sold by best-selling music artists of each country. <br />
The increasing of the intensity of blue scale color follows the
increasing of the TCU. <br />
It is possible to zoom on the map.
</h4>
<div class="map-container" id="geoChart2Div">
<div
data-zoom-on-wheel="zoom-amount: 0.002; min-scale: 1; max-scale: 4; scaling-property: 'width/height'"
data-pan-on-drag
class="map-container"
id="geoChart1Div"
>
<svg
id="geoChart2"
width="1200"
height="800"
viewBox="0 0 1200 800"
></svg>
</div>
<svg id="geoLegend2" viewBox="0 0 900 100"></svg>
</div>
<br />
<hr />
<br />
</div>
<footer id="includeFooter"></footer>
</main>
</div>
<script>
$(function () {
$("#includeSidebar").load("./components/sidebar.html");
});
$(function () {
$("#includeNavbar").load("./components/navbar.html");
});
$(function () {
$("#includeFooter").load("./components/footer.html");
});
</script>
<script src="./js/utils/mapLegend.js" crossorigin="anonymous"></script>
<script src="./js/geoAnalysis/geoChart1.js"></script>
<script src="./js/geoAnalysis/geoChart2.js"></script>
<script src="./js/geoAnalysis/geoChart3.js"></script>
</body>
</html>