-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (122 loc) · 6.62 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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!-- Add your site or application content here -->
<div class="container-fluid">
<div class="jumbotron-fluid">
<h1>What's With All This Rubbish?</h1>
<h4>Fly tipping (illegal dumping) and formal sanctions in London</h4>
</div>
</div>
<div class="row align-content-top">
<div class="flex-row mr-2">
<div id="map-container" class="flex-column flex-fill p-0 pr-2"></div>
</div>
<div class="d-inline-block align-items-center align-content-top" id="sidebar">
<div id="info-panel" class="d-inline col-md-2">
<div class="card border-dark flex-grow-0 ml-3 mr-3 mt-0 align-self-top info-card mb-2" id="info-card-total">
<div class="card-header p-1">
<p class="lead info-header mb-1" id="info-header-total">Fly Tipping In London</p>
</div>
<div class="card-body info-body p-1" id="info-body-total">
Fly tipping, also called illegal dumping, occurs when rubbish, trash, or other refuse is
disposed of improperly in a public environment. Fly tipping is typically driven by household waste
and bulk items, left in surreptitious locations by householders or unlicensed waste collectors.
</div>
</div>
<div class="card-group ml-3 mr-3 flex-grow">
<div id="radio-buttons" class="card border-dark mr-3 float-left d-inline-block mb-2">
<div class="card-header p-1">
<p class="lead mb-0">Select Data to Display</p>
</div>
<input type="radio" name="attr" value="Total Incidents" checked>
<label for="total">Total Incidents</label><br>
<input type="radio" name="attr" value="Change from Five Years Ago">
<label for="change-five">Change from Five Years Ago</label><br>
<input type="radio" name="attr" value="Total Actions Taken">
<label for="actions">Actions Taken</label><br>
<input type="radio" name="attr" value="Warning Letters">
<label for="letters">Warning Letters</label><br>
<input type="radio" name="attr" value="Fixed Penalty Notices">
<label for="penalty">Fixed Penalty Notices</label><br>
<input type="radio" name="attr" value="Statutory Notices">
<label for="statutory">Statutory Notices</label><br>
<input type="radio" name="attr" value="Formal Cautions">
<label for="cautions">Formal Cautions</label><br>
<input type="radio" name="attr" value="Prosecutions">
<label for="prosecutions">Prosecutions</label><br>
</div>
<div id="myCarousel" class="card float-right mb-2 ml-4 carousel slide align-items-end" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 card-img-top" src="img/brent-tipping.jpg" alt="First slide" id="first">
<span class="card-text"><em>40% of fly tipping incidents in the UK occur on roadways or streets, making these
locations the #1 destination for illegal dumping.</em></span>
</div>
<div class="carousel-item">
<img class="d-block w-100 card-img-top" src="img/stanton-flytipping.jpg" alt="Second slide" id="second">
<span class="card-text"><em>in 2018/19, 65% of fly tipping incidents involved household waste. The most common size category
in that time was equivalent to a small van load.</em></span>
</div>
<div class="carousel-item">
<img class="d-block w-100 card-img-top" src="img/enfield-dumping.jpg" alt="Third slide" id="third">
<span class="card-text"><em>Fly tipping fines and penalties generated around £1.1m in revenue in 2019/20.
this is only a fraction of the costs incurred due to fly tipping.</em></span>
</div>
<div class="carousel-item">
<img class="d-block w-100 card-img-top" src="img/london-tipping.jpg" alt="Fourth slide" id="fourth">
<span class="card-text"><em>Many Councils offer waste disposal services for large items and other high-volume
needs. Check with your Council before you put it on the street!</em></span>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="container-fluid flex-grow p-0">
<div id="chart-box" class="d-flex align-items-center flex-column mt-auto mb-0"></div>
</div>
</div>
</div>
</div>
<!-- SCRIPT LINKS -->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/colorbrewer.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/simple-statistics.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://d3js.org/d3-geo.v2.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v3.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
</body>
</html>