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.
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
ipyvizzu downloads Vizzu from jsDelivr CDN by default, but a local copy of it can be used like this:
npm install vizzu@~0.6.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 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