Skip to Content

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.

Screenshot 1 - Main page.jpg

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

Screenshot 1 - Main page filtered by decade.jpg

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.

Screenshot 1 - Main page filtered by bottom 10 years.jpg

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

Screenshot 1 - Main page - 1963 min temperature.jpg

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.

screenshot - 2nd page start.jpg

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.

screenshot - 2nd page march min temp rain 1981.jpg

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.

screenshot - 2nd page march min temp rain 1981 popup.jpg

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.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply