UNPKG

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