Visualizing Weather Data as a PixieApp

How I used MapBox and The Weather Company data to create a regional weather forecast

--

Editor’s note: This article is part of an occasional series by the 2017 summer interns on the Watson Data Platform developer advocacy team, depicting projects they developed using Bluemix data services, Watson APIs, the IBM Data Science Experience, and more.

With FOSS4G (The International Conference for Free and Open Source Software for Geospatial) taking place in Boston this week, my final project as an intern on the IBM Watson Data Platform Developer Advocacy team focused on accessing and exposing geospatial and weather data in new ways.

Using a new open source library called PixieDust, I built a notebook which uses the Weather Company Data API to get weather forecast JSON data based on latitude and longitude, convert this JSON data into a pandas DataFrame, and create an interactive weather dashboard.

Why notebooks?

Throughout the summer I’ve been using Jupyter notebooks, which I didn’t know about before starting the internship. Notebooks act as a way to run live code and include explanations in markup so it can later be shared or understood. They are especially popular among data scientists because it supports the languages Scala, R, and Python, which data scientists use more than others.

PixieDust is an open source visualization library for developers of any data science experience. With just a few lines of code, PixieDust can enhance a notebook by creating charts that provide valuable data insights for business users. PixieDust can do a lot of things, but I’m going to focus here on PixieApps.

PixieApps are embedded apps which let non-programmers actively use notebooks, viewing their data in an almost website-like fashion. Developers can create these apps by using a combination of HTML, CSS, and JavaScript. Frameworks like Bootstrap and jQuery are already preloaded. Once built, a PixieApp transforms a static notebook into a polished interactive graphic app for business users.

In the case at hand, my PixieApp transforms data from the Weather Company into an interactive dashboard that’s accessible to everybody, even users without any programming experience.

How does it work?

For this PixieApp I used the Data Science Experience to create the notebook itself, but it also could have been created locally. I started by creating pandas DataFrames (a two-dimensional data structure), which were very important for the functionality of the app, using the Weather Company Data API.

Calling the Weather Company API to load the 10-day forecast

The PixieApp includes DataFrames for each of the following situations:

  • 10-day forecast for Boston (where I’m based)
  • 10-day forecast for each of the ten locations I selected in New England
  • Most recent forecast for each location
  • Most recent weather forecast for Boston

The 10-day forecast data frame for Boston was used to create the default chart that appears on the right when a user selects the weather variable of their choice, such as “Temperature.”

I did the same for the other nine locations in addition to Boston so that a user can select a location on the map (which is rendered using MapBox) and get the appropriate data back depending on the location they choose.

The most recent weather forecast for each location data frame was created to be able to get unsummarized data. If I had used the aforementioned DataFrame instead, the data displayed on the map when hovering over a location would’ve been added for each day, which is not what we wanted.

Recent forecast data frame

I used the most recent weather forecast for Boston in order to assign an icon representing the current weather. In the example below, you can see the sunshine icon to the left of the app description.

After creating the DataFrames I was able to use HTML and CSS to create a nice interactive interface (a PixieApp!) as shown below.

PixieApp showcase

Challenges

One obstacle I had was the lack of knowledge I had about creating the pandas DataFrames. I needed the DataFrames in order to create the charts and maps using PixieDust. If I had known pandas before starting this project, I probably could’ve made the data frames more efficiently.

Another challenge I had was that the PixieDust documentation wasn’t very complete due to the newness of the library. I found some documentation and examples that were helpful, but there were some tips and and workarounds not yet documented. However, I got help from David Taieb, the creator of PixieDust, to get things working.

These are all challenges I knew I would have going into the project and that is partly why I chose it — to be exposed to new things.

What I’ve Learned

Throughout the summer I’ve been using Jupyter notebooks, which were new to me. I can definitely see myself using them throughout my developer career if I were to delve into the data science realm of computer science. Notebooks are incredibly helpful when you want to print basic things out like you would in a command line interface. They can also be checkpointed as version control and shared to be run and viewed on any browser.

If you’d like to check out my notebook for this project and interact with the PixieApp yourself, you can find it here. My colleagues will also be sharing an updated version of this demo (and others) at the FOSS4G conference. Stop by and say hello!

The final project after some additional styling work by my team. Stop by FOSS4G for a live demo!

If you enjoyed this article, please ♡ it to recommend it to other Medium readers.

--

--