react-dash 0.4 — an unopinionated framework for building complex data visualizations

React Dash is an unopinionated toolbox that allows developers to build a wide variety of data visualizations quickly. In an increasingly data-rich world, many people are looking for the same things:

  • complex data visualized clearly
  • data visualizations that tell a story
  • a variety of visualization formats — charts, graphs, tables, metrics, text and images
  • robust and configurable mapping capabilities
  • the ability for users to filter and sort data down to sensible subunits

Enter react-dash, a highly composable system that allows us to configure custom data visualizations that can respond in unison to user prompts, and tell stories about complex sets of data.

React-dash is modular in just the right way — need some new visualization type or widget — no problem, just extend the appropriate component (our base component, say, or the choropleth map component) and add it to your settings file where the dashboard layout lives.

React-dash is built with current javascript technologies — es6 / ECMAScript 2015, babel and webpack.

Reusable components include:

  • Choropleth map (topojson / geosjson)
  • A variety of charts and graphs powered by NVD3
  • data-table
  • metric component

Other goodies include:

  • bootstrap’s responsive grid system
  • csv, google docs, cartodb backends
  • integration with dkan datastore api

In many ways, react-dash is not a tool for end-users. It is a library for developers. We wanted the tool to be flexible and to suit a variety of use cases and technologies. It is suitable for building standalone applications, or for building dynamic dashboard which can be embedded into popular existing frameworks (Drupal, Wordpress, Rails, etc.) It could serve as the view layer for a nodejs application or another MVC application. React-dash should be seen as a starting point, not an end-product.

The configuration is done using js / json. Here’s a trivial hello world application:

export var settings = {
title: 'Hello World',
components: [
{
type: 'Chart',
cardStyle: 'Chart',
header: 'My Pie Chart',
data: [[{x: 1, y: 40}, {x: 2, y: 40}, {x: 3, y: 20}]],
dataHandlers: ['NVD3.toPieChartSeries'],
settings: {
type: 'pieChart',
x: 'x',
y: 'y',
height: '600'
},
}
]
}

To contribute, submit issues, or peruse the code, check us out on github (and give us a star while you’re there!):

https://github.com/NuCivic/react-dash

Take a look at the docs:

http://react-dashboard.readthedocs.io/en/latest/

The best way to start using react-dash is to download the boilerplate project which includes the development server and an example project.

https://github.com/NuCivic/react-dash-boilerplate

Examples of sites built using the react-dash:

http://nucivic.github.io/react-dash

http://dev-ucr-dashboard.getnucivic.com/dashboard/12

http://dev-react-dashboard-demo.getnucivic.com/dashboard/19