-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
107 lines (98 loc) · 5.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get the Lead Out Map</title>
<link href="https://api.mapbox.com/mapbox-assembly/v0.22.0/assembly.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<link href="style.css" rel="stylesheet" />
<link href="tabs.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="csv2geojson.js"></script>
<link href='https://unpkg.com/[email protected]/dist/MarkerCluster.css' rel='stylesheet' />
<script src='https://unpkg.com/[email protected]/dist/leaflet.markercluster.js'></script>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body class="prose">
<section id="top-section">
<!-- <div class="icon-credit">Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
-->
<div id="tabs-dropdown"></div>
<section class="data">
<div id="img">
<a target="_blank" href="https://calpirg.org/resources/caf/get-lead-out-back-school-toolkit">
<img class="logo" src="img/image.png" alt="logo for Get The Lead Out">
</a>
</div>
<div id="sub-panel">
<ul class="tabs group" id="main-tabs">
<li id="info-tab"><a class="active" href="#one">Info</a></li>
<li id="dashboard-tab"><a href="#two">Find My School</a></li>
</ul>
<div id="content">
<div id="one" class="scroll-auto">
<h4>Lead Levels in California Schools</h4>
<p>There is no safe level of lead, especially for children. Even small amounts can lower IQ. Damage from lead exposure is irreversible.</p>
<p>California community water systems were required by the state to test drinking water for lead at the schools they serve before Summer 2019. The results are now mostly in.</p>
<p>This map shows the median and highest lead levels detected at each site based on the <a target="_blank" href="https://www.waterboards.ca.gov/drinking_water/certlic/drinkingwater/leadsamplinginschools.html">latest publicly available data as of 9/3/2019</a>. It includes data through 7/5/2019.</p>
<p>Although there is no safe level of lead, the state is only required to share results when lead levels are above 5 PPB. Some schools did their own testing and have publicly shared results down to 1PPB on their own sites.</p>
<p><a target="_blank" href="https://www.aap.org/en-us/about-the-aap/aap-press-room/pages/With-No-Amount-of-Lead-Exposure-Safe-for-Children,-American-Academy-of-Pediatrics-Calls-For-Stricter-Regulations.aspx">The American Academy of Pediatrics</a> recommends no more than 1 PPB in drinking water for children and so CALPIRG urges schools to test down to 1 PPB and to get the lead out wherever it is found.</p>
<p>Take action with CALPIRG's "<a target="_blank" href="https://calpirg.org/feature/cap/get-lead-out-back-school-toolkit">Get The Lead Out:Back to School Toolkit</a>."</p>
</div>
<div id="two" style="display: none">
<div id="dashboard">
<select class="dropdown" id="countyDropdown" onchange="onChangeCountyDropdown()">
<option type="radio" value="">County</option>
</select>
<select class="dropdown" id="cityDropdown" onchange="onChangeCityDropdown();"></select>
<select class="dropdown" id="districtDropdown" onchange="onChangeDistrictDropdown();"></select>
<select class="dropdown" id="schoolDropdown" onchange="onChangeSchoolDropdown()"></select>
<div id="school-visualizer">
<img id="school-image" alt="school icon" style="display: none;">
<div id="school-lead-result" style="display: none;"></div>
<div id="median-school-lead-result" style="display: none;"></div>
<div id="max-school-lead-result" style="display: none;"></div>
<span id="school-name" style="display: none;"></span>
</div>
</div>
</div>
<div id="credits" style="display: none;">
<span class="block">Data wrangling: <a target="_blank" href="https://github.com/thesadie" class="color-blue-faint">Sadie Gill</a> @ Flowwest.</span>
<span class="block">Mapping, front-end, data viz: GeoSurge.</span>
</div>
</div>
</div>
</section>
<div id="map"></div>
</section>
<section id="key">
<span><span class="inline-block circle exempt" width=25vw ></span> Exempt</span>
<span><span class="inline-block circle untested"></span> Untested</span>
<span><span class="inline-block circle low"></span> Lead < 5 ppb</span>
<span ><span class="inline-block circle high"></span> Lead >= 5 ppb</span>
</section>
<section style="overflow-x:auto" id="table">
<table>
<thead>
<tr>
<th> Lead Level </th>
<th> School </th>
<th> District </th>
<th> Address <a class="button" id="download-table" target="_blank">Download</a></th>
</tr>
</thead>
<tbody id="table-body">
<tr><td>You must first make a selection of a county before viewing the data table.</td></tr>
</tbody>
</table>
</section>
<script src="utils.js"></script>
<script src="app.js"></script>
</body>
</html>