Vizzu: Open Source Library For Animated Data Visualizations and Data Stories

Hello, Hackernoon community!

After four years of coding and navigating the rough waters of bootstrapping a startup and finding the right path forward, our small team of Vizzu is at the best place it can be: We finally have our first product: an open-source Javascript library. (I admit, I might be biased here as an open-source enthusiast.)

I’m happy to say a few words about why we think Vizzu is unique among the dataviz libraries and why we hope that you will love to use it as much as we do.

About the project:

Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them. It is designed for building animated data stories, and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation.

Here is a small snippet from the readme to give a little taste of the API. After you set your data of three data series named ‘Foo’, ‘Bar’, ‘Baz’, creating a bar chart is as simple as this:

chart.animate({
  x: 'Foo',
  y: 'Bar'
});

Then you can transform it into a scatterplot by moving the category to the color scale, adding a measure to the x-axis, and switching the geometry to circle.

chart.animate({
  color: 'Foo',
  x: 'Baz', 
  geometry: 'circle' 
});

We created some animated examples and sample stories to show you how Vizzu works in more detail. There’s an Edit button on each of these examples’ page that will take you to a JSFiddle so that you can start playing with them right away.

Examples: https://lib.vizzuhq.com/0.4/#examples-1.1

Stories: https://lib.vizzuhq.com/0.4/#examples-1.2

There’s also a step-by-step tutorial that helps you get acquainted with all the available options: https://lib.vizzuhq.com/0.4/#chapter-0.0

More details in the GitHub repo: https://github.com/vizzuhq/vizzu-lib

So what is so special about Vizzu?

If you built animated data visualizations in the past, you had a big decision to make: You could go for a low-level library, most likely D3, which you could use to create stunning, highly customized animated charts, for the price of putting a lot of code and effort into your project. Or you could choose one of the high-level charting libraries, create static charts with considerably less code, and then animate a growing number (pun intended) of aspects of your chart.

High-level charting libraries are easier to use because they implement the rules of data visualization (axes, legends, etc.) and provide a high-level interface over this ruleset. Sometimes with a separate interface for each chart type, other times using the abstract interface of the Grammar of Graphics by Leland Wilkinson, like the Vega library or the Layered grammar of graphics from Hadley Wickham used in ggplot2.

We set out to build a dataviz tool, which offers you a third path. We think that the missing link for making animation a first-class citizen is to extend the data visualization ruleset into the time dimension, by working towards the Grammar of Animation.

We created our engine that provides a standard interface for several chart types as the first step. Then we looked at the parameter space of this engine and made each parameter interpolable, turning our engine into a generic chart morpher, which can continuously interpolate between any chart types described on its interface.

The second step on this road was to analyze these transitions and develop rules that make them self-explanatory and easy to follow for the viewers. Finally, we built these rules into our engine to guide you through the scarcely charted sea of animated data visualizations.

We still have a lot to do, but we believe we are at a significant milestone. We built this tool for the Javascript community to smoothly build animated data visualizations, create data stories, interactive reports, and the likes, and embed them in their websites and products. Check out the examples and the tutorial, and decide for yourself if Vizzu brings something new to the online charting world. We would also welcome contributors to create more examples and templates and further extend Vizzu’s capabilities. One of them already made the initial version for the Jupyter notebook, which you can use with Python!

If you want to keep an eye on what’s going on with us, make sure to follow us on Twitter: http://twitter.com/VizzuHQ.