Building an app with 100 years of weather data (part 1)

[jeroenvandera]

following up on a discussion about cascading filters and replacement path variables i wanted to try it out in an app.

What better to use than 100 years of weather data?

In this first part i will describe how the app works and what kind of navigations are possible. In the 2nd part i will describe how i built some of the parts to get the desired functionality.

In the main page you see one graph of the temperature per calendar month over 100 years. On the right side i already selected

the minimum temperature. I also could have chosen the average (mean) or max temperature.

When i click on the Decades on the left the listbox will show the years within that decade and the graph will only show the temperatures of that decade

Seems i picked a particular cold decade.but i want to pick the coldest years and now i click on the button Bottom 10 years.

In the listbox the bottom 10 years for average temperature will show.

1963 is amongh the bottom 10 years. Let's filter on that year.

now i've selected one year a new graph show. It's the rain amount per day for the selected year. for 1963 we see

that the minimum temperatures were far below zero in January, February and March. That's for the Netherlands quite uncommon.

I thought i had everything covered in this app at this point. But when i showed this to my manager his first respons was. How can i select a particular month and compare the years?

Well you can't with this version. And so i continued.

with a swipe you can go to the 2nd screen. Here you can select one month and see how the years compare to each other.

the top graph shows again the average (mean), Max or Min temperature. but now there is a new bubble graph that shows the rain duration vs the rain amount

I filter on march and choose (again) the min temperature.

But in the data in the bubble chart i now see an outlier where apparently there was much more rain than usual for march.

hovering over the data point i see that it's the year 1981.

Clicking on the data point shows a popup with the detailed day-to-day data of that month in 1981.

so the app got a bit bigger than i first imagined. But it was a good way to learn all about the inner workings.

It shows how you can build an app with broad information and design interactive elements that allow you to

drill down to the most detailed level.

In the 2nd installment i will show how i built parts of the app.