UNPKG

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