Data Visualisation Libraries to Enhance Your Custom Analytics

The world of data visualisation is constantly evolving. If you’re reading this, it’s likely for one of two reasons: You need a visualisation library for your project, or you’re curious about what’s changed since 2020 in terms of visualisation libraries. Either way, welcome aboard!

To begin with, it’s recommended to become familiar with React and JS in general (if not, you should start with those; they’ll definitely help you before you get involved in the vis libraries or actually any topic related to JS). This article will also not be another post recommending D3 or React-vis or any of the usual suspects. 

Instead, we’ll investigate the newest, cutting-edge libraries available today, and give you a code snippet to play around with for a sunburst visualisation. 

Plotly: Open source visualisations for your analytic apps

This library is so much more than an open source visualisation library. It is actually a platform that helps you build analytic apps with graphs. Given that users of all kinds are expecting (and demanding) data and analytics in their apps, this kind of functionality has gone from “nice to have” to “need to have.”

So, why Plotly? For starters, it’s really versatile and has a great community! You can install it on the cloud (AWS and Azure), plus there’s a free version (our favorite) and enterprise versions (cloud and on-premises). Once you’ve picked the version that’s right for you, you can start experimenting. The robust user community will have your back, answering any questions you may have (even the questions you never thought of!).

Visx (by Airbnb): Simple architecture, tons of options

This library from Airbnb is a collection of low-level visualisation primitives for React. Visx is a super-small library that even someone with minimal technical skills can use to build amazing visualisations. Whatever you want to do with Visx (state management, animation library, etc.), chances are it will work; this could be the only library you ever need.

It’s that level of flexibility that earned Visx a spot on this list. You can use it for just about any project at your company, and you can trust that it will stand the test of time because of its very simple architecture.

Nivo: Easy copy-and-paste functionality 

This library is just delightful, built around D3 in its core, and offering a gorgeous and easy-to-use web app, in which you can choose the different graphs you want to display. Nivo’s UI is a unique selling point: Users can see the best examples of Nivo’s functionality, select what they need, and use it via copy-and-pasting code.

Nivo is separated into components that are ready to be dropped right into your project with options for SVG, Canvas, plain HTML, APIs, and even server-side rendering. Whereas most libraries usually offer only two or three ways of rendering your visuals, this library gives you more flexibility, meaning you can deploy visuals the way you want to see them and the way you want to arrange your code. This means more people can adopt this open source library, which will hopefully lead to continual improvements throughout its lifetime.

Here’s a code sample you can play around with to create a sunburst visualisation:

import { ResponsiveSunburst } from '@nivo/sunburst'

// make sure parent container has a defined height when using

// responsive component, otherwise height will be 0 and

// no chart will be rendered.

// website examples showcase many properties,

// you'll often use just a few of them.

const MyResponsiveSunburst = ({ data /* see data tab */ }) => (

<ResponsiveSunburst

data={data}

margin={{ top: 40, right: 20, bottom: 20, left: 20 }}

id="name"

value="loc"

cornerRadius={2}

borderWidth={1}

borderColor="white"

colors={{ scheme: 'nivo' }}

childColor={{ from: 'color' }}

animate={false}

motionConfig="gentle"

isInteractive={true}

/>

)

Victory: Robust, flexible visuals for Android or iOS

This is a great library built and supported by Formidable (creators of Spectacle, another good library for presentations, built using React). Victory is fantastic for modular charting and mobile applications.

So why else did we choose this one? Did we mention that Victory was built by Formidable? That alone should be enough, but Victory is robust, flexible, and you can deploy it on Android or iOS via the same APIs. Plus, the documentation is great. (Who doesn’t love detailed documentation?)

Go forth and create!

We hope you enjoyed this rundown of the libraries that, in our opinion, deserve your attention and are future-proof. (Well, we’ll see about that!)

Now it’s your turn! Try them yourself and see which one is best for you and your unique project. Users of all kinds are demanding analytics in their apps and experiences. Powerful, beautiful visualisations help convey intelligence from your data in ways that will resonate with your audience, drive adoption, increase stickiness, and more.

Go forth and build something amazing.