Data visualizations with ReactJS
Tapio NurminenAugust 11th, 2017In 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 GitHub.
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, ReactCategories
- Categories
Archives
- October 2020 (1)
- April 2020 (1)
- October 2019 (1)
- March 2019 (1)
- October 2018 (1)
- February 2018 (1)
- August 2017 (1)
- December 2016 (1)
- June 2016 (1)
- February 2016 (1)
- December 2015 (1)
- September 2015 (1)
- July 2015 (1)
- March 2015 (1)
- December 2014 (1)
- September 2014 (1)
- August 2014 (1)
- May 2014 (1)
- April 2014 (1)
- January 2014 (1)
- November 2013 (1)
- September 2013 (1)
- August 2013 (1)
- May 2013 (2)
- March 2013 (1)
- February 2013 (1)
- June 2012 (1)
- April 2012 (1)
- March 2012 (1)
- February 2012 (1)
- January 2012 (1)
- November 2011 (1)
- October 2011 (1)
- September 2011 (1)
- August 2011 (1)
- July 2011 (1)
- June 2011 (1)
- April 2011 (1)
- March 2011 (3)
- January 2011 (1)
- December 2010 (1)
- November 2010 (2)
- October 2010 (1)
- September 2010 (1)
- August 2010 (1)
Latest comments
Tapio Nurminen on Vuoden 2013 kuntakartta SVG-muodossa
Kartta on vapaasti hyödynnettävissä, mutta lisenssiehdot kannattaa varmistaa Kuntaliitolta.
Arvi Leino on Vuoden 2013 kuntakartta SVG-muodossa
Kartalle on latauslinkki. Onko kartta vapaasti hyödynnettävissä esim. CC By 4.0 käyttöluvalla? ht...