https://lib.vizzuhq.com/

                                Vizzu

     Library for animated data visualizations and data stories.

            Tutorial & Examples * Reference * Repository

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 can be used to create static
charts but more importantly 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.

Main features:

  * Designed with animation in focus;
  * Defaults based on data visualization guidelines;
  * Automatic data aggregation & data filtering;
  * HTML5 canvas rendering;
  * Written in C++ compiled to WebAssembly;
  * Dependency-free.

Installation

Install via npm:

npm install vizzu

Or use it from CDN:

<script type="module">
import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.1/dist/vizzu.min.js';
</script>

Usage

Create a placeholder element that will contain the rendered chart:

<div id="myVizzu" style="width:800px; height:480px;"></div>

Create a simple bar chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.1/dist/vizzu.min.js';

let data = {
  series: [
    { name: 'Foo', values: ['Alice', 'Bob', 'Ted'] },
    { name: 'Bar', values: [15, 32, 12] },
    { name: 'Baz', values: [5, 3, 2] }
  ]
};

let chart = new Vizzu('myVizzu', { data });

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

Then turn it into a scatter plot:

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

Try it!

Example chart

Contributing

We welcome contributions to the project, visit our Contributing page
for further info.

Contact

  * Join our Slack: vizzu-community.slack.com
  * Drop us a line at hello@vizzuhq.com
  * Follow us on twitter: https://twitter.com/VizzuHQ

License

Copyright (c) 2021 Vizzu Kft..

Released under the Apache 2.0 License.