In this article, I will describe a text based dashboard for geodesign projects that I set about building. I like to work on side projects and this is one.
I too have been guilty of building crappy dashboards. It has been some what of a hobby for me to rectify this and over the past few years I read a lot of material on this. At this time, all I can do is recommend some amazing books:
- Information Visualisation: Perception for Design by Colin Ware
- Show me the Numbers by Stephen Few
- The functional art: A introduction to information graphics and visualization by Alberto Cairo
Of course there are others and I intend to write more about books that I have researched at a later time.
With that out of the way, I wanted to share a side project that uses the Geodeisgn Hub API. Meet Geodesign Hub Dashboard, a text based status dashboard for projects created on Geodesign Hub. Essentially, once you enter your API token and the project ID (Geodesign Hub works on projects) you can see a text based “dashboard” of all the project data.
I have been thinking about dashboards for some time now. During my time at UCL CASA, there were a number of researchers building city dashboards. Most notably the London dashboard. It tells you at a glance what is going on in London in near real time. This idea has been replicated in many cities e.g. Dublin, Edmonton etc. This kind of a real time feed is quite useful in administration and getting information quickly. One thing that I do not like however, is that in these dashboards is the overuse of charts and text. So I went back to the basics and decided to make a text only dashboard in the spirit of old fashioned stock tickers as shown below. Using only text and colors is very challenging and fun at the same time. Geodesign is a emerging field and by avoiding the use of charts etc. I am hoping to establish key data that are required to be monitored in a study.
What it does
Once you enter your API Token and Project ID, it queries the Geodesign Hub API to show you the project name and description, the systems, the diagrams added under each system in a grid, the change teams and the participants in the project with a link to their profile. This is shown below:
I thought this was good enough for a start. With this information, you can see at a glance most of the data in the project: the systems and the improvement ideas and also the change teams who will build a design based on these diagrams. In addition, the IDs of diagrams are displayed so it is easy to download the geometries via the API. I found this to be quite useful while developing plugins.
How I built it
This plugin utilizes the Geodesign Hub API more specifically the GET methods to get all data from the project. I then created a Node app using Express, Request and Async node modules. On the front end, I use the DataTables to build the grid, Humane JS for notifications and of course JQuery. There is one call that posts the credentials to the server that then asynchronously makes call to the API and returns once the calls have been resolved. I then packaged it up and deployed it on Heroku and to the Github repository. It is open sourced and MIT Licensed.
Technology: I learned quite a bit building this in Node. My original idea was to build a desktop app, I looked up some libraries in Python e.g Kivy, using Electron etc. however I thought a small node app might be handier. I think I can always package it as a cross platform desktop app anyway. I also found out that there were no major changes required to the API to make a app like this and it worked quite nicely.
Geodesign: I wanted to start with a very basic text based dashboard for a geodesign project administrator. One that gives a overview of the design project as it progresses. I have been able to identify key pieces of information that are necessary for this: diagrams, systems, change teams and members. I intended to add information about the generated design as well but decided to hold off since it was too much for the moment.
This type of dashboard should help in administering a project. We do a number of workshops every month and I plan to use this dashboard to the next time and also ask other administrators for their opinion and feedback. It is faster than loading all diagram data and geometries.
Technically, I intend to add more information (text only) to this. I have decided to not use maps etc. at the moment. There are a number of technical improvements that can be made: better async handling, building a Geodesign Hub node API module etc. but that is for later.
If you are interested in getting involved, contributing or providing feedback or just have more questions, please feel free to reach out. My email address is on the contact page and also am on Twitter.