UNPKG

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