Maven Train Challenge, let's try dash/plotly

[Github: https://github.com/tigi/maven-rail-challenge]

The project description for this Maven Challenge was to create an exploratory dashboard for National Rail based on very detailed information regarding transactions, train performance, revenue and some other data.

My plan: do it in dash/plotly and see how well it goes plus what you miss from PowerBI. Working with Dash means programming in Python and creating an app.

Some assumptions on the data:

• I'm not sure that 1 transaction = 1 person, the word person is never mentioned.
• I assumed that two transactions with the same arrival and departure city, with exact the same departure date/time were actually two transactions taking the same train. Thus, when this trip is delayed, that should be counted as 1 ride, 1 delay.

Datacleaning

I did the basic datacleaning in PowerBI. I also used Power BI to unpivot some columns into 0/1.

Dataimport

Dataimport was done in python, I created a library with import functions to create the most relevant dataframes.

Development

Development in dash means

1. deciding how your screen should look in general (this design is based on bootstrap which means you work with rows & columns, at least when you do not want to put all elements after another). I used the CYBORG theme, still like dark. A complicating factor, at least for me is that I'm used to think mobile first and Dash theoretically makes it easy to create a responsive app. Theoretically, designing for all screen sizes in one run is never easy and more than putting all elements below each other or leaving a few out.
2. since this is about data visualisation you think about how information should be presented, how many visuals and the where/what. I decided to keep it simple, some datacards , a table (ag grid), a map (leaflet), a heatmap and a barchart. The map is a kill your darlings visual, unless somebody misses basic topografical information it's of no use. But it updates the selected routes and that was a hurray moment. The heatmap is somewhere down under because it did not obey to the responsive width rules, under no condition. In normal life something you have to fix, I moved it to the bottom.
3. Interaction design/programming: for every filter you add, you have to create a function to grab the selected filter, process the filter (filter dataframe, create new output like new content datacard and put it on the screen) and make it work together with other filters. Adding the code and testing was by far the most work. It is always nice to use somebody elses submission to test your results.

I spent a lot of time getting the right version of the data in the right place. It took quite some effort to create a datacard which shows a sparkline when no month is selected and previous month data when a month is selected.

In Dash every idea you have is a do it yourself thing, thus the experiment ends now since there is not enough time to make this app as I envision it in my brain. On the positive, I see what it should be in my brain. And I publish this not even half-finished thing because what it does (not much), it does quite good.

Some examples of questions when you mix "mobile first" into thinking about the design:

• will the table adjust to different screensizes?

• which table columns should be visible on a mobile, is there a mechanism to show/hide some columns with styling.

• if I create a button which opens/closes the section route details, should I add some aggregated information about routes which is always visible?

• should I show all cards on a mobile and than go into details (all cards in one row) or should I group subjects (card + detail detail visual) in columns which means on a small screen groups will be shown after another but not all summary information will be available on the first screen.

I did not finish this app to be very responsive. That would have meant addinng all bootstrap classes to make it really work well. I just added some styling to make the buttons in the topbar appear where I wanted them to be. The theme with all bootstrap classes makes it easy to add flexbox or cssgrid behaviour to elements.

Conclusion

Power BI solves a lot of "functionality" for you, you really start thinking about, when you have to do it yourself.

I could have saved myself some work by thinking more about data and filtering before I started building. Now it was the testing that showed the problems in datahandling.

It's a lot of work developing in Plotly/Dash but also very rewarding. More "Yes" moments. And I learnt a lot. I'm now ready to proceed my Maven Pandas course to learn stuff I should have known before I started this challenge and forgot :-)