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



<p>I’ll assume you’re familiar with React and JS in general (if not, I recommend you start with those; they’ll definitely help you before you get involved in vis libraries or actually any topic related to JS). This 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.</p>



<h2 class="wp-block-heading">Plotly: Open source visualizations for your analytic apps</h2>



<p>This library is so much more than an open source visualization library. It is actually a platform that helps you build <a href="https://www.sisense.com/blog/data-and-analytics-the-foundation-of-successful-apps/" target="_blank" rel="noreferrer noopener">analytic apps</a> 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.”</p>



<p>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 (my 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!).</p>



<p><strong>Data visualizations are a vital part of embedded analytics. Dig into this guide on data visualizations to understand why!</strong></p>



<a class="action-btn " href="https://www.sisense.com/whitepapers/everything-you-need-for-clear-and-efficient-data-visualization/" target="_blank" rel="noopener noreferrer">Get the Guide!</a>



<h2 class="wp-block-heading">Visx (by Airbnb): Simple architecture, tons of options</h2>



<p>This library from Airbnb is a collection of low-level visualization primitives for React. Visx is a super-small library that even someone with minimal technical skills can use to build amazing visualizations. 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.</p>



<p>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.</p>



<h2 class="wp-block-heading">Nivo: Easy copy-and-paste functionality&nbsp;</h2>



<p>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.</p>



<p>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.</p>



<p>Here’s a code sample you can play around with to create a sunburst visualization:</p>



<pre class="wp-block-code"><code>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 */ }) =&gt; (
&lt;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}
/&gt;
)
</code></pre>



<h2 class="wp-block-heading">Victory: Robust, flexible visuals for Android or iOS</h2>



<p>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.</p>



<p>So why else did I choose this one? Did I 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?)</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/victory-769x391.gif" alt="victory.gif" class="wp-image-119853"/></figure>



<h2 class="wp-block-heading">Go forth and create!</h2>



<p>Whew, that was fun! I hope you enjoyed this rundown of the libraries that, in my opinion, deserve your attention and are future-proof. (Well, I mean, we’ll see about that!)</p>



<p>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. Whatever your company does, your users want to understand their data. Powerful, beautiful visualizations help convey intelligence from your data in ways that will resonate with your audience, drive adoption, increase stickiness, and more.</p>



<p>Go forth and build something amazing. And keep checking back here for more game-changing visualization libraries you’ll love.</p>



<p><strong>Data visualizations are a vital part of embedded analytics. Dig into this guide on data visualizations to understand why!</strong></p>



<a class="action-btn " href="https://www.sisense.com/whitepapers/everything-you-need-for-clear-and-efficient-data-visualization/" target="_blank" rel="noopener noreferrer">Get the Guide!</a>



<p><em><strong>Lio Fleishman</strong>&nbsp;is the Partnership Solutions Engineer at Sisense and is passionate about JavaScript and front-end engineering tools. He is obsessed with making the way engineers do their jobs easier and better every day.</em></p>


Data Visualization Libraries to Enhance Your Custom Analytics

LinkedIn

Twitter

GitHub

curve-image-unique-image-unique

curve

3-dark-2-image-unique-image-unique

3 DARK 2

Get the latest in analytics right in your inbox.

Article