Water and Webdev | Part III

Well it’s time for the final update of my journey creating a basic web app for exploring Chicago River water quality data.

After creating a Flask app with a Leaflet map and points of testing sites (Part I), I added a time series line graph that added new data series with map clicks (Part II). Those core components haven’t changed much, and I mostly spent the last month working on data management and style.

Data

I scooted my data over to a database using Flask-SQLAlchemy. This was not the most straightforward process ever, but with my mentor and nice internet people I made it through. My database is pretty simple with two tables — Sites (information for all the data collection sites) and Readings (the actual water quality data for each collection date). During the process I learned about command line interface (CLI). I wrote custom commands that take the filepath to either the sites or readings .csv as the argument, and parse out each field to enter into the database.

CLI command creation (∩｀-´)⊃━☆ﾟ.･｡ﾟ*

After I got my data into the database, my next challenge was getting it out. I had no trouble querying the data, but was stuck on how to get the result of my query back as a JSON. I ended up going with sberry’s solution, which puts the data into a dictionary and then serializes this dictionary to a JSON formatted string.

Style

I’m using Bootstrap for my app components. So far I added in a top navigation bar and side navigation bar, and placed the graph in the side bar. I also replaced the parameter buttons with a horizontal list, and added in site name tooltips to the map. My CSS file has also gained a few lines, and I learned that dark gray is lighter than gray (!) in the HTML color name scheme.

Current look! (The information section is a work in progress).

Next steps

I’ll spend the final weeks…

• figuring out hosting with heroku (I found this guide helpful so far)
• setting up data interpretation guides
• finalizing the layout for mobile and web

If there’s time, I’d like to have the map show the most recent data point with a color ramp to help interpret the value, instead of uniform symbols.

Check it out!

You can see the project (still considered a work in progress) here.