-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (81 loc) · 4.49 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Visualzing Charles River Pollution</title>
<meta name="description" content="Scrollama Demo: Fixed CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="scroll.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section id='intro'>
<h1 class='intro__hed'>Visualizing Charles River Pollution</h1>
<p class='intro__overline'>
Made by Dan Katz and Jack O'Shea
</p>
<br/>
<p class='intro_text'>
The Charles River runs 80 miles from Hopkinton, Massachusetts to the New Charles River Dam, where it flows into Boston Harbor. The stretch of river from Watertown to Boston Harbor, known as the
Lower Basin of the Charles, is a well-known Boston landmark, widely recognized for its recreational
and aesthetic value to the communities that surround it.
</p><br/>
<p class='intro_text'>
Though the Charles River is a relatively small river, with a watershed encompassing 308 square miles and parts of 35 cities and towns, it is home to approximately one million people, making it one of the most densely populated watersheds in New England. The River itself meanders through 23 communities with diverse character, from the more rural upper watershed in Hopkinton and Milford, to the urban lower watershed communities of Boston and Cambridge.</p><br/>
<p style="text-align: right;">— <a style="color: black" href="http://www.crwa.org/">Charles River Watershed Association</a></p><br/>
</p>
<br/>
<br/>
<div>
<p>
In 1995, the EPA launched the Clean Charles Initiative, with the goal of making the river safe for fishing and swimming. The data collected by the Charles River Watershed Association at their monitoring sites along the river is used by the EPA to assign the Charles River Lower Basin an annual grade.
</p>
<br/>
<canvas id="gradeChart" width="400" height="300"></canvas>
<br/><br/><br/>
<p>
E. coli are used as a water quality indicator for the Charles River. Most strains of E. coli are not harmful to humans, but the presence of E. coli can indicate the presence of other bacteria and viruses that are potentially harmful to human health. (Source: New Hampshire Department of Environmental Services)</p>
</br/>
<p>The Massachusetts Department of Environmental Protection (MassDEP) sets two E. coli standards to indicate levels of health risk in freshwaters. MassDEP recommends not swimming or fishing when the mean of bacteria counts exceed 126/100ml, and not boating on days when the mean of counts rise above 630/100ml. (Source: Charles River Watershed Association)</p>
<br/>
<canvas id="perSwimBoatChart" width="300" height="300"></canvas>
<br/><br/><br/>
<p>CRWA’s monitoring program maintains 35 regular sites along the Charles River. The sites are distributed fairly evenly along the length of the River, with a higher concentration of sites around the heavily urbanized areas in Boston and the surrounding cities. Scroll down to see E. coli data for each site.</p>
</div>
</section>
<div style="padding-left: 0.25rem; font-family: monospace">
<p>Current Status (as of 11/21/17):</p>
<span style="color: DodgerBlue">☐ Swimmable</span><br/>
<span style="color: #e59400">☐ Boatable</span><br/>
<span style="color: OrangeRed">☐ Neither</span><br/>
<span style="color: gray">☐ No Data</span><br/>
</div>
<section id='scroll'>
<div class='scroll__graphic sticky'>
<div class="chart" style="width: 400px; height: 300px;">
<canvas id="ecoliChart"></canvas>
</div>
</div>
<div class='scroll__text'>
</div>
</section>
<section id='outro'>
<br/>
<br/>
<div style="padding-left: 1rem">
<h3>Want to get involved in cleaning up the Charles River? <a href="http://www.crwa.org/citizen-scientist-application">Click Here</a></h3>
<br/>
<h3>All data is courtesty of the Charles River Watershed Association</h3>
</div>
</section>
<div class='debug'>
</div>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://unpkg.com/scrollama'></script>
<script src='scroll.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
<script src='charts.js'></script>
</body>
</html>