Data Visualisation Dashboards with React, Plotly and Material UI

February 14, 2021
Using only open-source front end packages in React, efficient and visually appealing dashboards can be built into data solutions to streamline business insights.

Summary

Opsmorph has been developing data visualisation components that seamlessly integrate with cloud data lakes on Amazon Web Services to enable more efficient explorative data analysis. In this blog we share some tips on what are the important features of data visualisation dashboards and some of the tools we have been using to incorporate them.

Problem

Data analytics teams need to be able to quickly explore the data stored in cloud data lakes and databases and to communicate business insights to stakeholders in clear expressive ways. Quality dashboard design presents several challenges that can absorb a surprisingly large amount of development time. Disagreements amongst stakeholders can occur with regards to which information is most important, which data to use, where each insight should appear on the page, if it should appear at all, and which chart style best communicates the result. While commercial dashboard solutions offer the flexibility to easily reorganise and restyle data visualisations, they require licenses that can be expensive and such products cannot be easily incorporated into custom software for commercial use. When custom code is written for dashboards, changing layouts, changing data, and restyling can become tedious and time consuming. The more time the team spends on repetitive rewriting of code, the less time there is for exploring the insights in the data.

Solution

Incorporating a powerful open-source data visualisation package into your app provides a wide variety of customizable chart styles out of the box for free. One such example is React Plotly. Plotly is a package that is available in several programming languages. Combining a data visualisation package with a browser-based user interface to customize the plot configuration provides an efficient way for a data team to explore different visualisations without rewriting code. Material UI is a popular React package that incorporates the Material Design philosophy developed by Google to provide a first-class UI/UX with a modern look and feel making it ideal for building the plot configuration user interface. To provide flexible sizing and positioning of plots, the React Grid Layout package can be used to provide draggable components that can be resized and repositioned on the page without the need to rewrite code. The entire dashboard configuration can be saved as JSON in a database and then reloaded and edited later. The result provides a data visualisation solution that requires no code from the user, and which enables all stakeholders to get involved in dashboard design, explore different possibilities, and typically put a dashboard together in minutes.

Getting Started

Opsmorph have been developing such browser-based data visualisation components written in React. These components can be installed, customized, and integrated with customers in-house cloud software or embedded in the Software-as-a-Service solutions customers are developing for commercialisation.

Queries

Building a dashboard starts by querying data from the data lake. Multiple columns from multiple files can be used in a single dashboard and the queries can be saved.

Adding layers to plots

A single plot in the dashboard is built up of highly customizable data layers.

Adding colours to layers

The UI is easy to use with a modern look and feel.

Draggable dashboards

Data visualisations can be dragged to resize and reposition without rewriting code.

FAQs

What license are the data visualisation components available under?

When working on a project with Opsmorph to develop a data visualisation solution, the data visualisation components, and all underlying JavaScript packages, are provided under an MIT license meaning you are free to customize and commercialise as you choose.

What cloud providers are the data visualisation components available on?

The data visualisation components operate in any web browser. The dashboard configuration is currently built to be saved in Amazon Web Services and data queries currently integrate with cloud data lakes on Amazon Web Services.

What support is available for understanding how to use the data visualisation components?

During a development project, Opsmorph can embed our developers within your team and work with you to help you install, understand, and customize the components. Alternatively, the solution can be installed as is with instructions for use. Further reading and suggested online learning resources can be provided.

Is the data visualisation component provided only as is, or can it be customized?

The data visualisation components are highly customizable and can be expanded further. Our team of developers can work with you to plan a project to build a bespoke data visualisation solution that best meets your needs, whilst fast tracking the process by incorporating reusable components where applicable.

Contact Opsmorph

Whether you're a startup looking to accelerate development of your cloud platform, a research project looking to introduce machine learning, or an organisation of any size looking to make better use of your data, contact Opsmorph for a free consultation to see how we can help.

moc.hpromspo@ofni