Data visualizations with ReactJS

Tapio Nurminen

August 11th, 2017

In the past two years, we developed interactive visualization tools in the CAP (Collaborative Analytics Platform) project. The project came to an end in late 2016. We have now created and published a demo, intertwining the different components developed in the project. We main tool that we used was the ReactJS library.

The main purpose of ITEA‘s CAP project was to integrate efforts from several institutions and companies to build a platform for Big Data management. Each partner would contribute with ideas and implementations from their own use cases into a more general approach that could benefit other partners.

Our contribution, along with our partners who provided us with APIs to the data, was the development of visual data analytics tools. Our work was funded by Tekes.

During the project, we developed visual analytics tools as single page applications (SPA) in JavaScript. These applications consist of dashboards with a series of tables, charts, maps, and visualizations to allow interactive data filtering.

OK, just show me the demo!

Click here to view the online demo of the different widgets that we created.

The source code for the demo is available on Bitbucket.

From AngularJS to ReactJS

During the development, we experimented with different frameworks for web applications, visualization techniques, and client-side data handling.

Our initial choice for the development was the AngularJS framework. As we progressed, however, we first combined it with ReactJS and eventually dropped Angular altogether. With React, we were able to create components for different visual features like maps and charts. It also allowed us to integrate other libraries like Freezer-js for application state management, Crossfilter for data handling, dc.js for rendering charts, and Leaflet for the maps.

As a result of our development, we learned methods for handling chart interactions through the application’s state management. We also learned to integrate individual React components to create connected data visualizations.

Tags: data visualization, JavaScript, React