UNPKG

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