-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
130 lines (112 loc) · 7.27 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
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en-gb">
<head>
<!-- meta tags and site info -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Data dashboard showing a visualisation of all the times I have moved house.">
<meta name="keywords" content="HTML, CSS, JavaScript, d3.js, dc.js, crossfilter.js, intro.js, google maps APIs">
<meta name="author" content="DawnM">
<link rel="icon" type="image/png" href="favicomatic/moves-favicon-32x32c.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicomatic/moves-favicon-16x16c.png" sizes="16x16" />
<!-- External CSS for Bootswatch Theme, charts, and intro.js -->
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css" />
<!-- My CSS -->
<link href="https://fonts.googleapis.com/css?family=Muli:400,600" rel="stylesheet"> <!-- Clearer font for chart labels, following user feedback -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- External Charting JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<!-- External Intro JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script>
<!-- My JavaScript -->
<script src="js/graphs.js"></script>
<script src="js/map.js"></script>
<title>Nomadic Numbers</title>
</head>
<body>
<nav class="desktop" id="sidebar">
<h1><a class="title" href="#top">Nomadic Numbers</a></h1>
<ul class="my-nav">
<li><a class="my-link text-white" href="#regional">Regional Charts</a></li>
<li><a class="my-link text-white" href="#lifestyles">Lifestyle Charts</a></li>
<li><a class="my-link text-white" href="#the-map">Journey Map</a></li>
</ul>
<div id="per-country-piechart1" data-intro="This is the main pie chart, showing that I have lived in 2 different countries. Each segment can be clicked to show or hide the data for that country. <br>All segments and bars depict the total years for that category." data-step="1" data-position="right"></div>
<button class="btn btn-lg chart-reset" onclick="location.reload();">Reset Charts!</button>
</nav>
<div class="white">
<nav class="mobile">
<div>
<ul class="my-nav">
<li><a class="my-link text-white" href="#regional">Regional Charts</a></li>
<li><a class="my-link text-white" href="#lifestyles">Lifestyle Charts</a></li>
<li><a class="my-link text-white" href="#the-map">Journey Map</a></li>
</ul>
<button class="btn btn-lg chart-reset" onclick="location.reload();">Reset Charts!</button>
</div>
<div class="centre-title">
<h1><a class="title" href="#top">Nomadic Numbers</a></h1>
<p>For a step-by-step guide please use a desktop browser</p>
</div>
<div class="" id="per-country-piechart2"></div>
</nav>
</div>
<main>
<!-- brief explanation of dashboard purpose, intro.js used for further detail -->
<div>
<div class="jumbotron border-warning mb-3 col-12">
<h2>40 homes in 36 years!</h2><a class="intro-btn btn float-right" href="javascript:void(0);" onclick="javascript:introJs().start();">Step-by-Step Guide</a>
<p class="quote">"Every day is a journey, and the journey itself is home." — Matsuo Basho</p>
<p>This dashboard illustrates details of the many stopping points along my life's journey. Click on any chart element to see the interactivity between all the charts.<br>I was only in Mozambique for 3 weeks, which is too short a time-period to be visible in the charts. However, it is an important part of my story, which is why it is represented on the <a class="inline-link" href="#the-map">journey map</a>.</p>
</div>
</div>
<!-- Regional Charts -->
<div class="flex-row flex-wrap" id="regional" data-intro="These pie charts illustrate the total number of provinces, towns, and suburbs I have lived in. <br>As there are so many moves, individual names are not visible. <br>However, the piecharts do give a visual comparison for the totals in each category. <br>The slices of these pies can also be clicked to show or hide their relevant data on the other charts." data-step="2" data-position="left">
<div class="card border-success m-3 p-2">
<h3 class="card-header">9 Provinces</h3>
<div class="charts" id="years-per-province"></div>
</div>
<div class="card border-success m-3 p-2">
<h3 class="card-header">19 Towns</h3>
<div class="charts" id="years-per-town"></div>
</div>
<div class="card border-success m-3 p-2">
<h3 class="card-header">34 Suburbs</h3>
<div class="charts" id="years-per-suburb"></div>
</div>
</div>
<!-- Age Group Charts -->
<div class="flex-row flex-wrap" id="lifestyles" data-intro="These bar charts show changes in who I lived with, or what industry I was working in, according to my age group. <br>They are affected by any pie slices that may have been clicked. <br>Additionally, a bar can be clicked, and the pies will show geographical data according to the age group represented by that bar." data-step="3" data-position="left">
<div class="card border-info m-3 p-2">
<h3 class="card-header">Living Arrangements</h3>
<div class="charts" id="living-arrangements"></div>
</div>
<div id="lifestyle-chart-2" class="card border-info m-3 p-2">
<h3 class="card-header">Industry Sectors</h3>
<div class="charts" id="industry-sectors"></div>
</div>
</div>
<!-- Large Map showing polygon lines as I moved from one location to the next -->
<div id="the-map" data-intro="The lines on this map run through a rainbow colour spectrum, starting with red at my very first home, and ending in purple at the latest. <br>It is focused on Southern Africa, as that is where my journey began. <br>It also shows the holiday in Mozambique mentioned at the top of the page. <br>If you zoom out or pan on the map, you will see how the lines show my travels to the UK as well." data-step="4" data-position="left">
<div class="card text-white bg-primary m-3 p-2">
<h3 class="card-header">My route so far...</h3>
<div class="map" id="routeMap"></div>
</div>
</div>
</main>
<div class="smartphone ">
<div class="smartphone-text">
<p>Thank you for popping by.</p>
<p>Please note that a data dashboard is best viewed on a large screen, in order to see many of the charts at one time.</p>
<p>You will need to switch to a large tablet or preferrably a desktop computer to view this website.</p>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxNqcerxDysyOonZhRzjVp49mBEEC7tQA&callback=initMap"></script>
</body>
</html>