Intro

This is the tutorial of ipyvizzu - the Jupyter notebook integration of the free, open-source Javascript library Vizzu. You can create animated charts, data stories, and interactive explorers with it. This is an excellent place to start using ipyVizzu, as it walks you through the installation of the library, introduces the logic it employs and the different settings to control how your animated charts look and behave.

Installation

ipyvizzu requires the IPython, jsonschema and pandas packages. However you can use it only in Jupyter Notebook therefore notebook project has to be installed.

pip install ipyvizzu
pip install notebook

[Optional] Using locally installed Vizzu

ipyvizzu downloads Vizzu from jsDelivr CDN by default, but a local copy of it can be used like this:

npm install vizzu@~0.5.0

To use the locally installed Vizzu, you have to set the Vizzu Javascript file's location in the constructor of the Chart class.

from ipyvizzu import Chart

chart = Chart(vizzu="./node_modules/vizzu/dist/vizzu.min.js")

The basic logic of Vizzu

The foundation of a Vizzu chart used in ipyvizzu is the animation. The animation contains states describing the chart's configuration, such as the data series, coordinate system, labels, titles, etc. A static chart is the result of a single animation state. When there are more states, ipyvizzu automatically transitions between these. The animate method initiates the animation into a new state by describing the new chart and how Vizzu should transition to it. The return value of the animate method is a promise that will be resolved after the animation is completed. Using this logic you can create a promise chain of animation from state to state.

The animate method has two parameters in total. The first parameter sets the chart, and the (optional) second determines how Vizzu should animate to that state.

The first parameter has the following three properties:

data - this is where you add the data that you want to put on the charts. config - this is where you can add or remove series on the channels and set the general settings of the chart like the chart title, the geometry, the alignment etc. style - this is where you can set how your chart looks.

Next chapter: Adding data ----- Back to the Table of contents