返回排行榜

vizzuhq/vizzu-lib

JavaScriptlib.vizzuhq.com

Library for animated data visualizations and data stories.

chartchartscharting-librarychartingdata-visualizationdata-analysisdashboardanimationdatavisualizationdatavizstorytellingjavascript
Star 增长趋势
Star
2k
Forks
86
周增长
Issues
1
5001k1.5k2k
2021年9月2023年4月2024年12月2026年7月
制品库npmnpm install vizzu-lib
README

Vizzu

Vizzu - Library for animated data visualizations and data stories.

Documentation · Examples · Code reference · Repository · Blog

npm version install size Tweet

Vizzu

About The Project

Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them. It can be used to create static charts but more importantly, it is designed for building animated data stories and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation.

Main features:

  • Designed with animation in focus;
  • Defaults based on data visualization guidelines;
  • Automatic data aggregation & data filtering;
  • HTML5 canvas rendering;
  • Written in C++ compiled to WebAssembly;
  • Dependency-free.

Installation

Install via npm:

npm install vizzu

Or use it from CDN:

<html>
 <head>
  <script type="module">
   import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
  </script>
 </head>
</html>

Usage

Create a placeholder element that will contain the rendered chart:

<html>
 <body>
  <div id="myVizzu" style="width:800px; height:480px;">
  </div>
 </body>
</html>

Create a simple bar chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';

let data = {
    series: [{
        name: 'Foo',
        values: ['Alice', 'Bob', 'Ted']
    }, {
        name: 'Bar',
        values: [15, 32, 12]
    }, {
        name: 'Baz',
        values: [5, 3, 2]
    }]
};

let chart = new Vizzu('myVizzu', {
    data
});
chart.animate({
    x: 'Foo',
    y: 'Bar'
});

Then turn it into a scatter plot:

chart.animate({
    color: 'Foo',
    x: 'Baz',
    geometry: 'circle'
});

Try it!

Example chart

FAQ

You can find answers to the most frequently asked questions about using the library in our FAQ.

Projects

List of external projects (extensions, bindings, templates, etc) for Vizzu: Projects.

Roadmap

We have a comprehensive list of features we plan to implement, on our Roadmap.

Contributing

We welcome contributions to the project, visit our contributing guide for further info.

Contact

License

Copyright © 2021-2025 Vizzu Inc.

Released under the Apache 2.0 License.

相关仓库
d3/d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

ShellISC Licensevisualizationdata-visualization
d3js.org
113.3k22.7k
chartjs/Chart.js

Simple HTML5 Charts using the <canvas> tag

JavaScriptnpmMIT Licensejavascriptchart
chartjs.org
67.6k11.9k
PhilJay/MPAndroidChart

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

JavaMavenOtherjavachart
philippjahoda.com
38.2k9k
helm/helm

The Kubernetes Package Manager

GoGo ModulesApache License 2.0cncfchart
helm.sh
30k7.7k
recharts/recharts

Redefined chart library built with React and D3

TypeScriptnpmMIT Licensereactcharting-library
recharts.github.io
27.4k2k
airbnb/visx

🐯 visx | visualization components

TypeScriptnpmMIT Licensevxreact
visx.airbnb.tech
21k767
qax-os/excelize

Go language library for reading and writing Microsoft Excel™ (XLAM / XLSM / XLSX / XLTM / XLTX) spreadsheets

GoGo ModulesBSD 3-Clause "New" or "Revised" Licensexlsxexcel
xuri.me/excelize
20.8k1.9k
nhn/tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

TypeScriptnpmMIT Licenseeditorwysiwyg
ui.toast.com/tui-editor
18k1.9k
dream-num/Luckysheet

Luckysheet upgraded to Univer

JavaScriptnpmMIT Licensespreadsheetjavascript
github.com/dream-num/univer/
16.7k2.6k
frappe/charts

Simple, responsive, modern SVG Charts with zero dependencies

JavaScriptnpmMIT Licensechartjavascript
frappe.io/charts/docs
15.1k750
webpack/webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

JavaScriptnpmMIT Licensewebpackwebpack-bundle-analyzer
12.7k508
webpack-contrib/webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

JavaScriptnpmMIT Licensewebpackwebpack-bundle-analyzer
12.6k489