Data Visualization with DKAN and DKAN Dash

Published in

DKAN Blog

4 min readAug 14, 2017

DKAN Dash is a module for creating multi-faceted data visualizations based on datasets in DKAN, the Drupal-based open-source open data portal. Fundamentally it is a wrapper around the React Dash library.

Some of the features include:

Charting and Graphing with D3 (via NVD3)
Choropleth Maps
User filters to interact with data
Custom layouts with Bootstrap responsive grid
Metric and Goal components for visually compelling presentations of simple statistics
Integration with DKAN datasets and the Drupal content system
Lots more!

First off… Native DKAN Data Visualization

Out of the box, DKAN makes it simple to preview and download raw data (data resources) that are associated with Datasets:

But we want to make the data meaningful at a glance, and DKAN gives a number of ways to do this.

DKAN exposes a UI which allows us to query data and and present it using a variety of visualization types. We can map data using a Choropleth / or heat map, or visualize data using NVD3-provided charts or graphs We can also create data stories that put multiple data visualizations onto a page using a configurable panels-style layout:

We want to give users the ability to generate robust visualizations. We also want to use our data to create immersive experiences for site visitors. Visitors should be able to explore the data in an intuitive and visually pleasing way.

We are trying to approximate some element of the real world and the real world is complex. A city or a municipality may want to model crime data and, perhaps, it’s relationship to job data, or environmental factors. A state-level organization may need to present a variety of data about the physicians in its state. There are many ways that data can be used, and want DKAN and our tools to do as many of them as possible. We call this domain specific logic and we want to use the most powerful tools available to us to model this logic.

Introducing DKAN Dash

We built DKAN Dash to accomplish these goals. DKAN Dash and its supporting ecosystem are a development framework that allows for highly customizable data visualizations while minimizing boilerplate code and unnecessary repetition.

While the previously mentioned visualization tools are targeted at tech-savvy non-programmers and site administrators, DKAN Dash is a tool that has been fine-tuned to the needs of developers — Javascript developers in particular, although if you can write JSON you can go far.

Under the hood DKAN Dash consists of a number of major components:

React Dash

React Dash is an open-source library that underpins the basic functionality of DKAN Dash: charting, mapping, metrics, filtering and data handling. If you’ve worked with JavaScript then you already know: it’s libraries all the way down! We use Bootstrap to easily handle responsive layouts, D3 and NVD3 as charting engines, as well as a host of smaller libraries.

The definitive features of React Dash are:

configuration-based architecture allows an entire dashboard to be created using a declarative configuration object (a JSON file with a well-documented schema)
handler functions (data handlers and state handlers) provide middle-ware layers to manipulate data at key points of data life-cycle (when data is loaded and updated, when components are updated, etc)
re-usable components allow for rapid development, reduce repetition and improve code quality

Datastore API

The Datastore API uses a simple POST interface to return filtered data from Dataset resources in DKAN.

DKAN Dash Javascript Application

The JS app is a thin wrapper around the React Dash library. It provides an interface to Drupal’s global JavaScript object, and provides a model layer that can convert defined queries (in the settings file) and user-applied filters into valid queries against the DKAN Datastore API, which are then used the populate the dashboard.

Drupal Module

The Drupal module provides a Dashboard content type where dashboard settings are stored as JSON. The module also provides basic Drupal routing, permissions, etc. When the dashboard page is visited, the DKAN Dash Javascript application is embedded in the page and passed the configuration settings from the entity.

The modules also provides a browser-based JSON editor to make modifying dashboard configurations easier:

Custom Implementation Module

In addition to the settings object, which is stored in the database, the DKAN Dash Javascript app can load custom handling functions, css, and other code from a custom, project-specific module. While most of any DKAN Dash implementation lives in the configuration object, the ability to add custom code here allows developers to preprocess their data for consumption by the dashboard components. An example can be seen here.