Mapping Pollutants with Leaflet.js
Written by Jessica Kane, July 21, 2016
There are plenty of of ways to visualize data, but mapping data is one of the most powerful ways to make it immediately mean something to the viewer. Creating maps that make data meaningful is satisfying for some of the same reasons I like doing the dishes. This might seem like a weird comparison, but bear with me, I’m a weird gal… what can I say?
Start and End
The thing I like most about doing the dishes is being able to SEE the progress and accomplishment. The starting point is simply a kitchen with dirty dishes, pots, pans, and food all over and unorganized. The ending point is a clean looking and well organized kitchen. Similarly with visualizing and mapping data, you start with something that doesn’t have much meaning at first glance and work to bring order and clarity to it. There’s something satisfying about starting with this:
and ending with this:
Pretty big difference, right? You can tell a lot about the data from just a glance at the map, let alone exploring the interactive features that display additional information. With that in mind, I’ll go through a high-level, introductory overview of the four (more or less) pieces that got us from a spreadsheet to an interactive web map. I plan on diving into more detail in future blog posts, so leave a comment if there is something in particular you’d like to hear more about.
NOTE: I put this map together quickly for the sake of demonstration. There is plenty of code clean-up and additional styling that could be done of the legend, pop-ups, etc. What do you like to see in an interactive web map? Let me know in the comments!
1. Data and GeoJSON
When mapping data, you have to start with the data (of course!). I started with data from the Canadian National Pollutant Release Inventory (NPRI) in a .csv (comma separated values) file. In the screenshot above I had opened the .csv file in Microsfot Excel, but .csv files can also be opened in a text editor which will display a series of values separated by commas in a series of rows:
.csv files are more versatile because they can be opened by a variety of applications while .xls files can only be opened by certain applications like Microsoft Excel.
2. HTML and CSS
- HTML (Hypertext Markup Language) provides the content of the page.
- CSS (Cascading Style Sheets) controls what that content looks like including layout, colors, backgrounds, font styles, etc.
Mapping Data: the Results
By pulling all of these different pieces together, you can make your data clean, clear and concise to a customer, investor or stakeholder. At the end of the day, you wouldn’t invite a client or your boss to see your dirty kitchen, so why would you show them your messy and unorganized data?
Make sure to explore the possibilities on the interactive map here and let me know if you have any fun data to map!
- Welcoming Douglas to our Team
- Python for Quick and Easy GIS Data Manipulation
- Updates from the Line 45 Team
- Fetch and Combine CSV Files from the Web
- Resources for Water, Wastewater and Stormwater Utilities