1 | <p align="center">
|
2 | <a href="https://github.com/vizzuhq/vizzu-lib">
|
3 | <img src="https://vizzuhq.github.io/vizzu-lib-doc/readme/logo-bg-white.svg" alt="Vizzu" />
|
4 | </a>
|
5 | <p align="center">Library for animated data visualizations and data stories.</p>
|
6 | <p align="center">
|
7 | <a href="https://lib.vizzuhq.com/0.3.0/">Tutorial & Examples</a>
|
8 | · <a href="https://lib.vizzuhq.com/0.3.0/reference">Reference</a>
|
9 | · <a href="https://github.com/vizzuhq/vizzu-lib">Repository</a>
|
10 | </p>
|
11 | </p>
|
12 |
|
13 | # About The Project
|
14 |
|
15 | Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine
|
16 | that generates many types of charts and seamlessly animates between them.
|
17 | It can be used to create static charts but more importantly it is designed for building animated data stories
|
18 | and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can
|
19 | easily follow due to the animation.
|
20 |
|
21 | Main features:
|
22 | - Designed with animation in focus;
|
23 | - Defaults based on data visualization guidelines;
|
24 | - Automatic data aggregation & data filtering;
|
25 | - HTML5 canvas rendering;
|
26 | - Written in C++ compiled to WebAssembly;
|
27 | - Dependency-free.
|
28 |
|
29 | # Installation
|
30 |
|
31 | Install via [npm](https://www.npmjs.com/package/vizzu):
|
32 |
|
33 | npm install vizzu
|
34 |
|
35 | Or use it from CDN:
|
36 |
|
37 | ```html
|
38 | <script type="module">
|
39 | import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.1/dist/vizzu.min.js';
|
40 | </script>
|
41 | ```
|
42 |
|
43 | # Usage
|
44 |
|
45 | Create a placeholder element that will contain the rendered chart:
|
46 |
|
47 | ```html
|
48 | <div id="myVizzu" style="width:800px; height:480px;"></div>
|
49 | ```
|
50 |
|
51 | Create a simple bar chart:
|
52 |
|
53 | ```javascript
|
54 | import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.1/dist/vizzu.min.js';
|
55 |
|
56 | let data = {
|
57 | series: [
|
58 | { name: 'Foo', values: ['Alice', 'Bob', 'Ted'] },
|
59 | { name: 'Bar', values: [15, 32, 12] },
|
60 | { name: 'Baz', values: [5, 3, 2] }
|
61 | ]
|
62 | };
|
63 |
|
64 | let chart = new Vizzu('myVizzu', { data });
|
65 | ```
|
66 |
|
67 | ```javascript
|
68 | chart.animate({
|
69 | x: 'Foo',
|
70 | y: 'Bar'
|
71 | });
|
72 | ```
|
73 |
|
74 | Then turn it into a scatter plot:
|
75 |
|
76 | ```javascript
|
77 | chart.animate({
|
78 | color: 'Foo',
|
79 | x: 'Baz',
|
80 | geometry: 'circle'
|
81 | });
|
82 | ```
|
83 | [Try it!](https://jsfiddle.net/VizzuHQ/dk7b86vc/29/)
|
84 |
|
85 | ![Example chart](https://vizzuhq.github.io/vizzu-lib-doc/readme/example.gif)
|
86 |
|
87 | # Contributing
|
88 |
|
89 | We welcome contributions to the project, visit our [Contributing](CONTRIBUTING.md) page for further info.
|
90 |
|
91 | # Contact
|
92 |
|
93 | * Join our Slack: [vizzu-community.slack.com](https://join.slack.com/t/vizzu-community/shared_invite/zt-w2nqhq44-2CCWL4o7qn2Ns1EFSf9kEg)
|
94 | * Drop us a line at hello@vizzuhq.com
|
95 | * Follow us on twitter: [https://twitter.com/VizzuHQ](https://twitter.com/VizzuHQ)
|
96 |
|
97 | # License
|
98 |
|
99 | Copyright © 2021 [Vizzu Kft.](https://vizzuhq.com).
|
100 |
|
101 | Released under the [Apache 2.0 License](LICENSE).
|