Card based data visualisation

The problem

Too many data visualisation implementations overwhelm the user by showing all sorts of maps and charts which look great but do not always ‘tell a story’.

The idea

I have been developing an interesting alternative to the Tableau style of data viz.

The idea is that each insight is delivered by completely self contained cards.

Cards have a type, a context and an composite key, for example in a data viz environment for retail, a card displaying the store visitor figures for March 2018 would have a type of ‘StoreVisitorNumbersCard’, a context of ‘Store’ and a composite key of the storeId and March 2018.

I use a combination of relational database approaches and “No SQL” using postgres’s jsonb capabilities.

All decisions regarding which cards and displayed to who, on which page are handed over to the database backend, ensuring the front end is lean and simple.

Import scripts generate card definitions from source data, which could be generated nightly.

This approach means that each card is populated with a single, consistent API. The screencast above only uses 2 api routes — api/heapmap and api/card

The card approach has allowed me to create applications rapidly, with this decoupled architecture allowing me to introduce new cards with no risk of any other parts of the system being negatively affected.

The real power of this consistent card based approach comes when combining it with React’s composition paradigm. I can inject in new behaviour and functionality to a particular card based on the context that the card is visible in.

For example in the NYPD example above a card that highlights a particularly crime ridden part of New York can have a button injected into the card that allows the map to be zoomed to that part of town.

If that card is to be visible on another screen where zooming to a map doesnt make sense, then a different piece of functionality could be introduced — instead of the zoom to map functionality, a button that allows that user to email that card to their colleague could be injected in in addition or instead of the map zoom.

As each card is completely self contained, it opens up opportunities such as sharing guest urls with that particular card insight, a dashboard of cards pinterest style and more.

Cards can contain anything. I have created cards containing crossfilter, maps, geojson, custom SVG charts or just a simple button which performs an action.

Looks good?

I am looking to develop this idea further. If you are involved in any kind of data viz background and looking to reimagine how you display your data, get in touch via graham@asthecrowflies.co.uk and let’s talk.