[vidipeti]

I work in a small team in Budapest, Hungary, and this library is our first product, currently in public beta.

It works similarly to other charting libs, but when users create a set of charts, Vizzu will automatically animate between them. Thus, we think it is suitable for storytelling and building interactive data explorers.

The library is dependency-free, written in C++ and compiled to WebAssembly. It has automatic data aggregation and filtering capabilities, and we set the defaults used based on dataviz guidelines.

A short summary of how we built Vizzu: First, we created an engine that provides a standard interface for several chart types. Then we looked at the parameter space of this engine and made each parameter interpolable, turning our engine into a generic chart morpher that can continuously interpolate between any charts that can be described on its interface. After that, we analyzed these transitions and came up with rules that make them self-explanatory and easy to follow for the viewers, and finally, we embedded these rules into the engine.

We've been working on Vizzu for quite some time and decided to go open-source because we want to make it easy for others to try it and build whatever they want while helping us figure out how the animation capability can be put to good use.

We created a step-by-step tutorial and examples that you can start playing with in JSFiddle by clicking on the "Edit" button on each example's page.

Tutorial: https://lib.vizzuhq.com/0.3.0/

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

All suggestions and criticism are very welcome.

[gavinray]

Just went through the examples -- I thought it was really neat!

Often times I want/need to display data in more than one format. Usually I just take up a bunch of page space by putting multiple charts.

Here's an example showing what I mean from actual project:

https://github.com/hasura/graphql-bench/raw/master/app/hasur...

If there was a solid and comprehensive charting library that could "tween" between the chart formats, only taking up the space of 1 chart, that would be a neat solution!

Have you found certain pairs/combinations of charts that expose hidden relationships when you display them by animating the data points between them?

[vidipeti]

Thanks! :) This tweening and space saving is what we built Vizzu for! Do you think you could give it a try?

Regarding the combinations: it really depends on the data and the relationship you're looking for. We hope to make experimenting with such pairs or even series of charts easier with our lib.

Here are a couple of examples that worked well for us in certain settings: https://lib.vizzuhq.com/0.3.0/#example-1.1.12 https://lib.vizzuhq.com/0.3.0/#example-1.1.15 https://lib.vizzuhq.com/0.3.0/#example-1.1.3

[breck]

> made each parameter interpolable, turning our engine into a generic chart morpher that can continuously interpolate between any charts that can be described on its interface. After that, we analyzed these transitions and came up with rules that make them self-explanatory and easy to follow for the viewers, and finally, we embedded these rules into the engine.

Clever! An interesting approach. Lots of data vis lib builders (myself included) have added half-baked chart type transitions, but always as a tertiary concern. It usually comes out not so impressive. Your examples look lovely.

It seems like you are betting that there is demand for animated chart types if done much better, and so your focus on that as a first concern may lead you to some new primitives that others have missed.

Years ago I made a similar run but not as sophisticated, eventually dropping animations and building my own static charting lib (and then even dropping that, and making my focus the Studio/Language). I gave up on animations for 3 reasons:

1) The most immediate was during dev time staring at animating charts all day started to give me migraines. May have just been a coincidence, but there were definitely patterns of animation that you don't encounter in nature ever, so I wasn't sure if it was visually healthy.

2) Microsoft's SandDance (https://microsoft.github.io/SandDance/app/) blew me away. I was working from a similar first principle: always show all the data particles and higher level shapes (like bars/circles/etc) are just particles aggregating together. Mine was 2-D only though and much slower.

3) I figured if SandDance wasn't gaining too much traction, as amazing as it is, perhaps there wasn't so much demand for that approach. Maybe you'll discover something different.

Are there certain scenarios where you think your animations will allow telling a better story? Your example page is nice, but I don't see examples of the animations adding value to a story. Or do you think that animations are helpful mostly during EDA, and not at story telling time?

In my iterations I eventually realized making the data pipelines orthogonal to the visualization was the better architecture (basically copying dplyr in Javascript). This seems to be the way most of the JS data vis world is heading now, with Arquero and Observable heading that way. Is that possible with your lib, or do transforms have to be tightly coupled because of the animation component?

[vidipeti]

Thanks! We do think that Vizzu works really well for storytelling but you're absolutely right that more examples would be necessary on the site. Here are a couple of examples that we built with a previous version of our tool: https://vimeo.com/showcase/8920560

Using dplyr with Vizzu seems possible - at least at first sight we actually do very similar transformations of the data .

[nsonha]

> Microsoft's SandDance

Thanks for telling us about this. Do you know what approach/libary do they use?

Is this just the matter of tagging the elements generated by a normal chart library, then, independently "magic move" (to borrow keynote terminology) them into places? I'm impressed with the number of elements and frame rate.

[breck]

They wrote a great paper explaining their "Unit Visualization" concept/approach: https://www.microsoft.com/en-us/research/wp-content/uploads/...

IIRC their engine used to be their own in house WebGL code, but according to their GitHub ( https://github.com/Microsoft/SandDance) they are now using Deck.gl (https://deck.gl/) for rendering and Vega for chart logic. I do think it's not designed to be used as a library though but a complete studio like environment.