DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on

chi-beach-water-quality

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)