-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (88 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 2 | Mackenzie Yandell</title>
<!-- Import Vega & Vega-Lite (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Import pure.css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css"
integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
</head>
<body>
<header>
<img src="https://www.thesportsdb.com/images/media/team/badge/lark6k1661780848.png" alt="Logo" class="header-logo">
<div class="header-text">
<h1>Australian Soccer</h1>
<h2>The Nation's Most Played Sport</h2>
</div>
</header>
<main>
<section class="content">
<div class="pure-g">
<div class="pure-u-1-2 highlight-box">
<h3>Participation in Soccer by the Numbers</h3>
<p>As is to be expected we can see a noticeable drop off in nearly all the main streams of soccer due to the effects of the covid pandemic shown by the white dot.
Except both Social and Futsal have grown, this may suggest a growing support of the game outside of more serious competetion.</p>
<div id="vis2" class="vis-container"></div>
</div>
<div class="pure-u-1-2 highlight-box">
<h3>Participation by Gender</h3>
<p>Soccer has always been a male dominated sport but with the increasing popularity of the Matildas (big up Sam Kerr) the sport has grown in popularity among women.
Leading the recovery in popularity post Covid and returning soccer to it's previous popularity</p>
<div id="vis3" class="vis-container"></div>
</div>
</div>
</section>
<section class="content">
<h6>Participation By State</h6>
<div class="pure-g map-section">
<div class="pure-u-1-5 text-box">
<h4>Continued Growth</h4>
<h5>Outside of the noticeable setback of covid in 2020 soccer has continued to grow with all states other than New South Wales (NSW) have continued to grow beyond their pre-covid numbers.
This is a promising sign for the future of the sport in Australia and again shows the growing popularity of the sport across the country not just in the traditional soccer states (such as NSW).</h5>
</div>
<div class="pure-u-3-5 map-box">
<div id="vis1" class="vis-container_map"></div>
</div>
</div>
</section>
<section class="content">
<div class="pure-g">
<div class="pure-u-1-2 highlight-box">
<h3>A-League Attendance</h3>
<p>The growth seen in participation is interestingly contrasted by a decrease in support for the A-league Australias soccer league, with attendance peaking around 2012-2013.</p>
<div id="vis4" class="vis-container"></div>
</div>
<div class="pure-u-1-2 highlight-box">
<h3>Per club attendance</h3>
<p>As seen in the total attendance graph the total turnout has been decreasing with many teams seeing a lower turnout year on year, even still the viewership is still largely consolidated in the major cities</p>
<div id="vis5" class="vis-container"></div>
</div>
</div>
</section>
<script type="text/javascript">
var specVis1 = "js/map.vg.json";
var specVis2 = "js/participation.vg.json";
var specVis3 = "js/participation_pi.vg.json";
var specVis4 = "js/attendance.vg.json";
var specVis5 = "js/my_sanky.vg.json";
vegaEmbed('#vis1', specVis1, { "actions": false });
vegaEmbed('#vis2', specVis2, { "actions": false }).then(function (result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
vegaEmbed('#vis3', specVis3, { "actions": false });
vegaEmbed('#vis4', specVis4, { "actions": false });
vegaEmbed('#vis5', specVis5, { "actions": false });
</script>
</main>
</body>
</html>