Vizzu is a free, open-source Javascript/C++ library for animated data visualizations and data stories.

Overview

Vizzu

Library for animated data visualizations and data stories.

Tutorial & Examples · Reference · Repository

install size

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:

import Vizzu from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js'; ">
<script type="module">
import Vizzu from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js';
script>

Usage

Create a placeholder element that will contain the rendered chart:

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

Create a simple bar chart:

import Vizzu from 'https://cdn.jsdelivr.net/npm/[email protected]/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

Contributing

We welcome contributions to the project, visit our Contributing page for further info.

Contact

License

Copyright © 2021 Vizzu Kft..

Released under the Apache 2.0 License.

Issues
  • Problems with loading the Web Assembly module when using code bundlers (Vite, Webpack)

    Problems with loading the Web Assembly module when using code bundlers (Vite, Webpack)

    I'm playing around in a react project created with create-react-app (which uses webpack for bundling) and between how Vizzu is trying to locate its WASM and how webpack bundles it, I can't figure out an elegant way to get it to work.

    I realize this is not an issue with Vizzu per se, but wanted to highlight it, as it will be important for the adoption.

    Details as I understand them right now. The vizzu js module tries to import its own wasm module based on its own import path. image

    In my case this resolves to http://localhost:3000/node_modules/vizzu/dist/cvizzu.wasm image

    This file path is not recognized by the local dev server (as it only bundles .js/.ts files by default) Since the path is not recognized it serves the main webpage I'm trying to develop to test the module. image

    The wasm parser naturally fails to parse this and I get an empty page. image

    I know that there is a way to update the webpack config in order to serve the wasm file on this exact path, which is a half-decent solution but I don't (yet) know how to do it. I'll add details here once I have them

    opened by korompaiistvan 30
  • How do we skip displaying values on the X axis?

    How do we skip displaying values on the X axis?

    Hi,

    my X axis contains more than 700 values (dates), which overlaps and looks like a big gray box.

    image

    How do I skip values, or override how this is displayed?

    thanks

    enhancement 
    opened by mathieujobin 7
  • Example code in logo animation

    Example code in logo animation

    Hi all!

    Awesome project! I'm looking for the example code which made the logo gif. Is it shareable?

    Atm i'm trying to concat the animations from 1 -> 2 in examples wihout success

    https://lib.vizzuhq.com/0.3.0/#example-1.1.0 image

    https://lib.vizzuhq.com/0.3.0/#example-1.1.1 image

    can anyone guide/help me? https://jsfiddle.net/crashlaker/7L3yg1bk/

    regards, C.

    ps: perhaps we could only do this with the same dataset

    opened by CrashLaker 3
  • Types for colorPalette seem wrong

    Types for colorPalette seem wrong

    The types for color palettes are a little odd.

    type Color = `#${number}`
    	|`rgb(${number},${number},${number})`
    	|`rgba(${number},${number},${number},${number})`;
    
    type ColorPalette = Color 
    	| `${Color} ${Color}` 
    	| `${Color} ${Color} ${Color}`
    	| `${Color} ${Color} ${Color} ${Color}`
    	| `${Color} ${Color} ${Color} ${Color} ${Color}`;
    

    This makes sense, but in the docs, and in many CSS hex codes, they aren't just numbers.

    In the docs, the examples give #9355e8FF #123456FF #BDAF10FF as a valid option, but this throws a TS error because there are numbers and letters.

    Changing the color template string to #1 #11 #1 fixes the TS error, but is not actually valid.

    Possible Solution

    type Color = `#${number | string}`
    	|`rgb(${number},${number},${number})`
    	|`rgba(${number},${number},${number},${number})`;
    

    This solves my use case, but I'm not sure if there was some logic around needing to be a number?

    opened by christopher-caldwell 3
  • Most basic interaction example

    Most basic interaction example

    Is there an example of user interaction, i.e. I click a button, chart gets updated (for example with a different filter value)? I assume this could be achieved by registering a handler via chart.on() but the tutorial does not seem to have an example of this.

    opened by jchrom 2
  • Uncaught TypeError: this.tooltip is undefined

    Uncaught TypeError: this.tooltip is undefined

    Perhaps I am doing something silly, but trying to recreate the tutorial line by line, I get this error when trying to add a tooltip.

    code
    import Vizzu from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js";
    
    let data = {
      series: [
      {
        name: 'Genres',
        type: 'dimension',
        values: [
        'Pop', 'Rock', 'Jazz', 'Metal',
        'Pop', 'Rock', 'Jazz', 'Metal',
        'Pop', 'Rock', 'Jazz', 'Metal'
        ]
      },
      {
        name: 'Types',
        type: 'dimension',
        values: [
        'Hard', 'Hard', 'Hard', 'Hard',
        'Smooth', 'Smooth', 'Smooth', 'Smooth',
        'Experimental', 'Experimental', 'Experimental', 'Experimental'
        ]
      },
      {
        name: 'Popularity',
        type: 'measure',
        values: [ 114, 96, 78, 52, 56, 36, 174, 121, 127, 83, 94, 58 ]
      }
      ]
    };
    
    let chart = new Vizzu('vizzu-tooltip')
    
    chart.animate({ data });
    
    chart.animate({
      config: {
        channels: {
          x: { set: ['Genres'] },
          y: { set: ['Popularity'] }
        }
      }
    })
    
    chart.feature('tooltip',true)
    

    I am on [email protected], using npm live-server.

    opened by jchrom 2
  • Numbers on label run to zero on removal

    Numbers on label run to zero on removal

    Upon removing a series from label, the numbers run to zero while fading out. See below gif labelrundown

    Is this intended? My expectation would be a simple fadeout.

    opened by korompaiistvan 2
  • Vizzu overwrites config object

    Vizzu overwrites config object

    This is a strange one, I'm not even sure it's a bug or just unexpected for me.

    In my WIP application, I'm keeping track of the config object I'm passing to Vizzu because I use it to render pieces of the UI. This state object extends the AppState interface from the below definition:

    import { Data, Config } from "vizzu/dist/vizzu";
    type FullConfig = NoOptional<Config.Chart>;
    interface AppState {
      chartConfig: FullConfig;
      dataset: Data.TableBySeries;
    }  
    

    in my app I pass this to Vizzu every single time it gets modified by my app

    // whenever state.chartConfig is changed by the app
    chart.animate({
      config: state.chartConfig,
    });  
    

    in another place I attempt to render UI elements based on the state object, and so I loop through the key-value pairs of state.chartConfig.channels. a simplified snippet for this would be e.g.:

    const colorSeries = state.chartConfig.channels.color
    colorSeries.map(series => // render the ui)  
    

    However, after the first UI change, I get the following error:

    TypeError: selected.map is not a function
    

    Looking at my state object, it's because the channels no longer hold string arrays, they have been replaced by objects image

    I believe this is done because JavaScript passes objects by reference and not by value, so this line in the lib mutates my original object, instead of creating a copy for its own internal use.

    This can be solved in two places in my view.

    1. Either the lib takes a deep copy of the config object before mutating it
    2. I pass a deep copy to the animate method instead of the actual object

    I think option 1 would give the better developer experience.

    opened by korompaiistvan 2
  • 1st README example does not pass TypeScript compiler

    1st README example does not pass TypeScript compiler

    In the first example, the series of Foo, Bar and Baz fails to compile for TS.

    Here is a screenshot of the error after copy / pasting.

    Screen Shot 2021-10-17 at 1 00 43 AM

    It's complaining that type is required on each entry, but is not present in the example.

    I am not sure if the following is correct, but it passes TS

    import Vizzu, { AnimTarget } from 'vizzu'
    
    let data: AnimTarget['data'] = {
        series: [
          { name: 'Foo', values: ['Alice', 'Bob', 'Ted'], type: 'dimension' },
          { name: 'Bar', values: [15, 32, 12], type: 'measure' },
          { name: 'Baz', values: [5, 3, 2], type: 'measure' }
        ]
      }
    
    let chart = new Vizzu('myVizzu', { data })
    

    If type is not actually required, perhaps make it so in the types. If it is, could you add it to the example?

    opened by christopher-caldwell 2
  • TypeScript types not configured correctly

    TypeScript types not configured correctly

    In the distributed package.json, the key for TS types is missing, thus leading to TS complaining it cannot find them.

    // package.json
    {
      "name": "vizzu",
       ...
      "types": "dist/vizzu.d.ts",
      ... 
    }
    

    They are being included, but not referenced. Doing the above in my node_modules directory solved the issue

    opened by christopher-caldwell 2
  • chart.config: wrong tooltip value in the object

    chart.config: wrong tooltip value in the object

    If I log the actual config console.log(chart.config) the tooltip value will be wrong (18446744073709551615)

    ... "title": "Stack", "tooltip": "18446744073709551615", "channels": { ...

    opened by veghdev 1
  • Vizzu breaks when used with Terser drop_console

    Vizzu breaks when used with Terser drop_console

    If Vizzu is deployed to production with console.log statements dropped, via Terser, the chart is not rendered and an exception is thrown.

    If Terser is disabled, the chart library works fine.

    opened by tmbenhura 2
  • Axis labels issue when using align:stretch option

    Axis labels issue when using align:stretch option

    It seems that the axis label number format adapts to the next animation phase instead of the actual one. Example: https://jsfiddle.net/VizzuHQ/qtdgejsk/

    opened by petervidos 0
Releases(v0.4.7)
  • v0.4.7(Mar 18, 2022)

  • v0.4.6(Mar 12, 2022)

  • v0.4.5(Mar 11, 2022)

  • v0.4.4(Mar 10, 2022)

    Fixed

    • Error messages are easier to understand when methods are called on the uninitialized library.
    • API throws exceptions instead of logging on to the console.

    Added

    • Mouse event data now contain relative coordinates of the cursor within the plot area. The coordinates go from 0 to 1, where 0,0 is the bottom left corner, and 1,1 is the top right corner of the plot.
    • Mouse wheel event introduced.

    Full Changelog: https://github.com/vizzuhq/vizzu-lib/compare/v0.4.3...v0.4.4

    Source code(tar.gz)
    Source code(zip)
    vizzu-0.4.4.tgz(175.74 KB)
  • v0.4.3(Jan 31, 2022)

    Fixed

    • When the interlacing color was set to transparent, the axis title was not shown.

    Added

    • 3-digit hex code CSS color format is now supported.
    • Vizzu logo links to the Vizzu lib website.

    Full Changelog: https://github.com/vizzuhq/vizzu-lib/compare/v0.4.2...v0.4.3

    Source code(tar.gz)
    Source code(zip)
    vizzu-0.4.3.tgz(175.04 KB)
  • v0.4.2(Dec 22, 2021)

  • v0.4.0(Dec 21, 2021)

    Fixed

    • Marker label values are interpolated only if the measure is not changed on the label channel.

    Added

    • animate() method returns an animation control object. Using this result object you can play, pause, stop, seek or reverse the animations. This makes animation control easier and more logical. Also, it enables the chaining of animation control methods. Example: https://lib.vizzuhq.com/0.4/#chapter-0.15

    • CSS properties can be used to style vizzu charts E.g. --vizzu-plot-marker-colorPalette: #9355e8FF #123456FF #BDAF10FF; instead of {style: {plot: {marker: {colorPalette: '#9355e8FF #123456FF #BDAF10FF'}}} This comes in handy if you have multiple charts on the same page, if you need to apply a design scheme for charts on different pages or if you just want to give your vizzu charts a different look for users using dark mode in their browser. Please note: If you use CSS, don't change the set parameters later on via the style property.

    • maxFractionDigits style parameter added to labels showing numbers. This sets the maximum number of fractional digits used when showing numbers on the chart. The default value is 3.

    • Package size reduction. From 602 KB to 426 KB

    Known bugs

    • animate({ style: null }) fails. Fixed in 0.4.1.

    Full Changelog: https://github.com/vizzuhq/vizzu-lib/compare/v0.3.3...v0.4.0

    Source code(tar.gz)
    Source code(zip)
    vizzu-0.4.0.tgz(174.61 KB)
  • v0.3.3(Oct 18, 2021)

  • v0.3.2(Oct 16, 2021)

    Fixed

    • Color range legend labels show min/max of color range instead of data min/max.
    • Logo bottom padding fixed.

    Added

    • Parts of markers outside of plot area are getting clipped. This behaviour can be controlled by style.plot.overflow parameter.
    • channel title parameter has "auto" value by default. "null" will switch the title off.

    Full Changelog: https://github.com/vizzuhq/vizzu-lib/compare/v0.3.1...v0.3.2

    Source code(tar.gz)
    Source code(zip)
    vizzu-0.3.2.tgz(181.89 KB)
  • v0.3.1(Sep 25, 2021)

  • v0.3.0(Sep 23, 2021)

Owner
Vizzu
Vizzu
A minimal Direct3D 12 example that draws an animated triangle, written entirely in C-style C++, and all taking place inside a single function.

A minimal Direct3D 12 example that draws an animated triangle, written entirely in C-style C++, and all taking place inside a single function.

Taoufik Rida Bouftass 7 May 3, 2022
A completely free, open-source, 2D game engine built on proven torque technology.

Torque2D 4.0 Early Access 1 MIT Licensed Open Source version of Torque2D from GarageGames. Maintained by the Torque Game Engines team and contribution

Torque Game Engines 500 Jun 27, 2022
A library in Javascript to create graphs in the browser similar to Unreal Blueprints.

A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.

Javi Agenjo 3k Jun 22, 2022
A set of open c++ game development tools that are lightweight, easy-to-integrate and free to use. Currently hosting a magicavoxel .vox full scene loader.

open game tools Open game tools is a set of unencumbered, free, lightweight, easy-to-integrate tools for use in game development. So far it contains:

null 265 Jun 27, 2022
Alpha Plot is a free application for Scientific Data Analysis and Visualization for Windows, Linux and Mac OS X

Alpha Plot is a free application for Scientific Data Analysis and Visualization for Windows, Linux and Mac OS X (probably BSD also). Web Link Website

Arun Narayanankutty 150 Jun 14, 2022
StereoKit is an easy-to-use open source mixed reality library for building HoloLens and VR applications with C# and OpenXR!

StereoKit is an easy-to-use open source mixed reality library for building HoloLens and VR applications with C# and OpenXR! Inspired by libraries like XNA and Processing, StereoKit is meant to be fun to use and easy to develop with, yet still quite capable of creating professional and business ready software.

Nick Klingensmith 410 Jun 24, 2022
OpenCorr is an open source C++ library for development of 2D, 3D/stereo, and volumetric digital image correlation

OpenCorr OpenCorr is an open source C++ library for development of 2D, 3D/stereo, and volumetric digital image correlation. It aims to provide a devel

Zhenyu Jiang 43 Jun 22, 2022
Open source Altium Database Library with over 147,000 high quality components and full 3d models.

Open source Altium Database Library with over 147,000 high quality components and full 3d models.

Mark 1.2k Jun 20, 2022
An Open-Source subdivision surface library.

OpenSubdiv OpenSubdiv is a set of open source libraries that implement high performance subdivision surface (subdiv) evaluation on massively parallel

Pixar Animation Studios 2.6k Jun 25, 2022
Open 3D Engine (O3DE) is an Apache 2.0-licensed multi-platform AAA Open 3D Engine

Open 3D Engine (O3DE) is an Apache 2.0-licensed multi-platform 3D engine that enables developers and content creators to build AAA games, cinema-quality 3D worlds, and high-fidelity simulations without any fees or commercial obligations.

O3DE 4.9k Jun 29, 2022
The official Open-Asset-Importer-Library Repository. Loads 40+ 3D-file-formats into one unified and clean data structure.

Open Asset Import Library (assimp) A library to import and export various 3d-model-formats including scene-post-processing to generate missing render

Open Asset Import Library 7.9k Jun 24, 2022
appleseed is an open source, physically-based global illumination rendering engine primarily designed for animation and visual effects.

appleseed is an open source, physically-based global illumination rendering engine primarily designed for animation and visual effects.

appleseedhq 1.9k Jul 1, 2022
Dear ImGui is a bloat-free graphical user interface library for C++

dear imgui (This library is available under a free and permissive license, but needs financial support to sustain its continued improvements. In addit

Douglas McCloskey 6 Oct 27, 2020
An open-source implementation of Autodesk's FBX

SmallFBX An open-source implementation of Autodesk's FBX that is capable of import & export mesh, blend shape, skin, and animations. Mainly intended t

Seiya Ishibashi 40 Jun 16, 2022
The open-source tool for creating of 3D models

The open-source tool for creating of 3D models

3D geoinformation research group at TU Delft 396 Jun 25, 2022
Cocos2d-x is a suite of open-source, cross-platform, game-development tools used by millions of developers all over the world.

Cocos2d-x is a suite of open-source, cross-platform, game-development tools used by millions of developers all over the world.

cocos2d 16.2k Jul 3, 2022
Tesseract Open Source OCR Engine (main repository)

Tesseract OCR Table of Contents Tesseract OCR About Brief history Installing Tesseract Running Tesseract For developers Support License Dependencies L

null 45.7k Jun 28, 2022
Open-Source Vulkan C++ API

Vulkan-Hpp: C++ Bindings for Vulkan The goal of the Vulkan-Hpp is to provide header only C++ bindings for the Vulkan C API to improve the developers V

The Khronos Group 2.3k Jun 23, 2022
ZBar Bar Code Reader is an open source software suite for reading bar codes from various sources

ZBar Bar Code Reader is an open source software suite for reading bar codes from various sources

null 2.3k Jun 21, 2022