A text based geodesign dashboard

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.

Disclosure

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:

Of course there are others and I intend to write more about books that I have researched at a later time.

Introduction

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.

Dashboard main
Dashboard main screen

Inspiration

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.

ticker
The original text based dashboard (source)

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:

Populated1
Project details and diagram information
Screen Shot 2016-06-01 at 10.18.46
Change teams and project users

 

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.

Challenges

I have limited experience with node.js. I have been using Javascript and I consider myself to be a bit beyond beginner at this point. Node seems to have almost infinite libraries to do do this kind of stuff, I had to familiarize my self with some of the ecosystem. Using JavaScript on node is a learning experience. I extensively use Promises on the browser and even with that it was challenging to figure out how Promises can be implemented on a node server. Git and Heroku deployment was relatively straightforward.

Lessons

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.

Whats next?

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.

Get involved

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.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s