-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (75 loc) · 4.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dang Khanh Toan Nguyen & Tuan Hung Nguyen">
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="//d3js.org/d3.v7.min.js"></script>
<title>Migration Visualisation</title>
</head>
<body>
<nav class="navbar bg-dark p-0 container-fluid d-flex justify-content-center align-items-center">
<ul class="navbar-nav d-flex flex-row justify-content-center flex-fill">
<li class="nav-item w-25 text-center">
<a class="nav-link active bg-success text-light" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item w-25 text-center">
<a class="nav-link text-light" href="choropleth.html">Overseas Migration</a>
<li class="nav-item w-25 text-center">
<a class="nav-link text-light" href="sankey.html">Internal Migration</a>
</li>
<li class="nav-item w-25 text-center">
<a class="nav-link text-light" href="bubble.html">Global comparison</a>
</li>
</ul>
</nav>
<header>
<section>
<h1>Migration In Australia</h1>
</section>
</header>
<div class = "container-fluid" style="padding: 25px 25%;">
<h3 class="container-fluid text-center">About Us</h3>
<p>The goal of this project is to visualize Australia's immigration status, including the country's net overseas migration from 2005 to 2022, which is broken down by visa type, internal migration within Australian states, and the comparison of the number of immigrants coming between Australia and other countries.</p>
<p>For this project, three visualizations have been created. The first visualization shows the total number of arrivals to Australia and is broken down by group type of visa using a choropleth map and a pie chart. The second visualization shows the internal migration between Australian states using a Sankey chart. The final visualization is a bubble chart that shows the comparison of Australia's immigration rates with those of other countries using various statistics.</p>
<p>We hope that our audience will learn new facts regarding the migration pattern in Australia through the visualizations. If you have any comments or recommendations regarding this website, we invite you to get in touch with us.</p>
<section class="container">
<h2 class="container-fluid text-center">Visualizations</h2>
<div class="d-flex flex-row justify-content-center flex-fill">
<div class="card m-2 text-center text-dark">
<img class="card-img-top" src="style/icon1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Choropleth Map + Pie Chart</h5>
<a href="choropleth.html" class="card-link stretched-link"></a>
</div>
</div>
<div class="card m-2 text-center text-dark">
<img class="card-img-top" src="style/icon2.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Sankey Chart</h5>
<a href="sankey.html" class="card-link stretched-link"></a>
</div>
</div>
<div class="card m-2 text-center text-dark">
<img class="card-img-top" src="style/icon3.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Bubble Chart</h5>
<a href="bubble.html" class="card-link stretched-link"></a>
</div>
</div>
</div>
</div>
</section>
<footer class="container">
<ul class="nav justify-content-center border-bottom">
<li class="nav-item"><span class="nav-link px-2">Dang Khanh Toan Nguyen (SID: 103797499)</span></li>
<li class="nav-item"><span class="nav-link px-2"> Tuan Hung Nguyen (SID: 104048305)</span></li>
</ul>
<p class="text-center text-muted">COS30045 Data Visualisation | Semester 1 2023 | Swinburne University of Technology</p>
</footer>
</html>