I am interested in environmental health so I made a website to display the water quality of chicago beaches.
I got real time water quality data here
I am working on implementing the soda-ruby gem and an access token for the socrata API for improved throttling limits.
My app.rb file:
require 'sinatra'
require 'http'
require 'json'
require 'date'
get '/' do
erb :about
end
get '/about' do
erb :about
end
get '/prediction' do
today = Date.today
url = "https://data.cityofchicago.org/resource/xvsz-3xcj.json?date=#{today}"
response = HTTP.get(url)
data = JSON.parse(response.body.to_s)
if data.empty? # If today's data is not available, get yesterday's data
yesterday = today - 1
url = "https://data.cityofchicago.org/resource/xvsz-3xcj.json?date=#{yesterday}"
response = HTTP.get(url)
data = JSON.parse(response.body.to_s)
end
@beaches = data.sort_by { |beach| beach["predicted_level"].to_f }
erb :beach_prediction
end
about.erb
<p>
Click <a href="/prediction" >here</a> to begin!
</p>
<p>
Use this tool to get a list of Chicago beaches sorted by current water quality samples based on Predicted E. coli level in Colony Forming Units (CFU) per 100 ml of water. <a href="https://dev.socrata.com/foundry/data.cityofchicago.org/xvsz-3xcj" target="_blank">Data Source</a>
</p>
<p>
“The maximum E. coli level allowed – 235 colony-forming units per 100 milliliters (cfu/100mL) – is based on guidelines established by the U.S. Environmental Protection Agency for recreational waters”
</p>
<p>
<a href="https://dph.illinois.gov/topics-services/environmental-health-protection/swimming-facilities.html#:~:text=Bathing%20Beaches&text=Admin.,Protection%20Agency%20for%20recreational%20waters" target="_blank">Swimming facilities. Illinois Department of Public Health. (2023).</a>
</p>
<p>
If the prediction page is not working we have exceeded the number of requests. I am working on implementing the Socrata Open Data API with an access token to improve throttling limits.
</p>
beach_prediction.erb:
<h1>Chicago Beach Water Quality</h1>
<p>This table displays current samples based on Predicted E. coli level in CFU per 100 ml of water. Value are sorted from lowest to highest concentrations with the cleanest beaches listed first.</p>
<p>
Do not swim if levels exceed 235 cfu!
</p>
<table>
<thead>
<tr>
<th>Beach Name</th>
<th>cfu/100mL</th>
</tr>
</thead>
<tbody>
<% @beaches.each do |beach| %>
<tr>
<td><%= beach["beach_name"] %></td>
<td><%= beach["predicted_level"] %></td>
</tr>
<% end %>
</tbody>
</table>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
layout.erb
<!DOCTYPE html>
<html>
<head>
<title>Sinatra Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('/images/beach.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.navbar {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding: 10px;
}
.navbar a {
padding: 14px 16px;
color: white;
text-decoration: none;
}
.navbar a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="navbar">
<a href="/prediction">Beach Water Quality</a>
<a href="/about">About</a>
</div>
<%= yield %>
</body>
</html>
Top comments (0)