-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·150 lines (128 loc) · 7.1 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Results by booth for the Australian 2013 Federal Election displayed as a heatmap by party">
<meta name="author" content="Peter Neish">
<title>Australian Election 2013 - Heatmap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="gmapstyle.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="title" title="back to beginning zoom level" data-toggle="tooltip" data-placement="bottom" data-container="body" href="#">Election Heatmap</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="moreinfo" data-toggle="modal" href="#moreinfo">About</a></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Party <b class="caret"></b></a>
<ul class="dropdown-menu partychange">
<li class="active"><a href="#" data-party="ALP">ALP</a></li>
<li><a href="#" data-party="AFN">Australia First Party (NSW) Incorporated</a></li>
<li><a href="#" data-party="AUC">Australian Christians</a></li>
<li><a href="#" data-party="AIN">Australian Independents</a></li>
<li><a href="#" data-party="ASXP">Australian Sex Party</a></li>
<li><a href="#" data-party="BTA">Bullet Train For Australia</a></li>
<li><a href="#" data-party="CDP">Christian Democratic Party</a></li>
<li><a href="#" data-party="CEC">Citizens Electoral Council</a></li>
<li><a href="#" data-party="CYA">Country Alliance</a></li>
<li><a href="#" data-party="DLP">DLP</a></li>
<li><a href="#" data-party="FFP">Family First</a></li>
<li><a href="#" data-party="GRN"> The Greens</a></</li>
<li><a href="#" data-party="KAP">Katter's Australian Party</a></</li>
<li><a href="#" data-party="LP">Liberal</a></li>
<li><a href="#" data-party="LNP">Liberal National Party</a></li>
<li><a href="#" data-party="ON">One Nation</a></li>
<li><a href="#" data-party="NP">The Nationals</a></li>
<li><a href="#" data-party="PUP">Palmer United Party</a></li>
<li><a href="#" data-party="RUA">Rise Up Australia</a></li>
<li><a href="#" data-party="SPA">Secular Party of Australia</a></li>
<li><a href="#" data-party="SPP">Stable Population Party</a></li>
<li><a href="#" data-party="SAL">Socialist Alliance</a></li>
</ul>
</li>
</ul>
<p id="partyinfo" class="navbar-text" data-toggle="tooltip" data-placement="bottom" data-container="body" title="use 'Select Party' to change the party shown">
showing: <span id="partylabel">ALP</span>
</p>
<img class="spinner" src="ajax-loader.gif">
<p class="navbar-text pull-right">Site by <a href="http://twitter.com/peterneish">@peterneish</a></p>
</div><!--/.navbar-collapse -->
</div><!--/.container -->
</div>
<!-- main content -->
<div>
<div class="container">
<div id="map-canvas"></div>
</div>
</div>
<div id="moreinfo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>About</h3>
</div>
<div class="modal-body">
<p>
This map displays votes for parties as a <a href="http://en.wikipedia.org/wiki/Heat_map">heat map</a>. It uses data at the resolution of the polling booth rather than electorate.
This means that you can zoom in to see how strong a vote was at an electorate. If you zoom
in far enough you can also click on individual booths to get exact percentages of first preferences for each candidate. You can change the party displayed by choosing 'Select Party' in the top menu. There may be a short delay while the map loads the first time you choose a party.
</p>
<h4>Limitations</h4>
<p>
Data is based on first preferences only. Because of the way heatmaps work, if booths are closer together the intensity increases, so to some extent the heat map is determined by the
layout of the booths. However, distinct patterns are discernible if you explore the data. Only parties that registered votes in at least 200 booths have been included.
</p>
<p>
Absentee voting at capital cities booths are mapped at the booth rather than in the electorate that the vote was for, so capital cities tend to show high results for every party.
</p>
<p>
Data is taken from the <a href="http://www.aec.gov.au/media/mediafeed/">Australian Electoral Commission</a> and was last updated 16th September 2013.
</p>
<p>
Written by <a href="http://twitter.com/peterneish">Peter Neish</a> and code is available at <a href="http://github.com/peterneish/booths">GitHub</a>.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div><!-- /moreinfo -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script src="js/markermanager.js"></script>
<script src="js/heatapp.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-238390-12', 'peterneish.github.io');
ga('send', 'pageview');
</script>
<noscript><img src="map.jpg">nothin to see here without javascript!</script>
</body>
</html>