ipyvizzu - Jupyter notebook integration of Vizzu

Vizzu

ipyvizzu - Jupyter notebook integration of Vizzu.

Tutorial · Examples · Repository

PyPI version CI check

About The Project

ipyvizzu is the Jupyter Notebook integration of Vizzu. ipyvizzu enables data scientists and analysts to utilize animation for storytelling with data using Python.

Similar to Vizzu, which is a free, open-source Javascript/C++ library, ipyvizzu also utilizes a generic dataviz engine that generates many types of charts and seamlessly animates between them. It is designed for building animated data stories as it enables showing different perspectives of the data that the viewers can easily follow.

Main features:

  • Designed with animation in focus;
  • Defaults based on data visualization guidelines;
  • Works with Pandas dataframe, also JSON and inline data input is available;
  • Auto scrolling to keep the actual chart in position while executing multiple cells.

Installation

ipyvizzu requires IPython 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

You can also use ipyvizzu by locally installing Vizzu, you can find more info about this in the documentation

Usage

ipyvizzu only works in Jupiter Notebook environment. A notebook cell may contain the following code snippet resulting in the animation below.

import pandas as pd
from ipyvizzu import Chart, Data, Config

data_frame = pd.read_csv('titanic.csv')
data = Data()
data.add_data_frame(data_frame)

chart = Chart(width="640px", height="360px")

chart.animate(data)

chart.animate(Config({"x": "Count", "y": "Sex", "label": "Count","title":"Passengers of the Titanic"}))
chart.animate(Config({"x": ["Count","Survived"], "label": ["Count","Survived"], "color": "Survived"}))
chart.animate(Config({"x": "Count", "y": ["Sex","Survived"]}))

ipyvizzu

Visit our documentation site for more details and a step-by-step tutorial into ipyvizzu, or check out the example gallery.

Tools Support

ipyvizzu can also be used within Google Colab, Deepnote and Kaggle Notebooks! Check out the demo links below 👇

  • Open in Collab

  • View in Deepnote

  • Open in Kaggle

  • Open in Mercury

Contributing

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

Contact

License

Copyright © 2022 Vizzu Kft..

Released under the Apache 2.0 License.

Comments
  • change doc online version

    change doc online version

    I have a question about the online version of the documentation.

    If I change something in a ipynb file in doc/examples, after that I need to run make doc and commit changed htmls if I want to update the site too? (In that case I do not understand clearly what pages-build-deployment workflow do.)

  • ipyvizzu.Chart.animation: allow distinct animations

    ipyvizzu.Chart.animation: allow distinct animations

    All Animation has a main key (Data => "data", Config => "config") therefore it is quite straightforward to merge different animation in one Chart.animate call. Therefore Chart.animate can allow multiple animations until they do not override any data.

    The *animations and **config can be merged with this strategy, too and the *args and **kwargs calls will lokk similar:

    Chart().animate(config={...}, data={...})

    Chart().animate(Config(...), Data(...))

  • Refactor ipyvizzu.Chart.animate() to handle animoptions

    Refactor ipyvizzu.Chart.animate() to handle animoptions

    ipyvizzu.Chart.animate() can not handle animoptions (like delay, duration etc.).

    The JS API accepts the following arguments: animate({ data, config, style }, animoptions) animate(config, animoptions) animate({ data, config, style }) animate(config)

    ipyvizzu's behavior do not need to be the same like the JS API, so it can be pythonic, but the functions have to work. (animoptions is a js object like a python dict, or in js api it can be a single string if only want to change the duration so '500ms' instead of {duration: '500ms'})

    I think possible solutions in ipyvizzu are:

    I. kwargs only be animoptions style, data and config only be Style, Data, Config classes in args (it is a further problem with this, Style(None) needs to work to reset previous style modifications, but now it is working only in kwargs style=None)

    II. create az animOptions class, and handle it differently in _merge_animations()

    III. any other idea

  • docs: examples generator scripts

    docs: examples generator scripts

    Usage:

    cd tools/example-generator
    npm intall
    pip install -r requirements.txt
    ./run.sh
    

    Sparse clones/checks out the vizzu-lib repo to the current folder. Generates ipynb files for each example file found in the vizzu-lib repo test/integration/test_cases/web_content/sample_static/*.mjs, test/integration/test_cases/web_content/templates/*.mjs into docs/examples/static, docs/examples/animated folders

  • No scroll in case of user scroll

    No scroll in case of user scroll

    If the notebook is running and the user scrolls, then auto scrolling should switch off for that run. It is inconvenient for the user that they couldn't scroll during running.

    Something like this would be the solution:

    global scope:

    let inhibitScroll = false;
    document.addEventListener('scroll', function(e) {
      inhibitScroll = true;
    });
    

    cell:

    if (!inhibitScroll) myVizzu.scrollIntoView(...);
    

    I don't how to set inhibitScroll back to false after running, but next run should do autoscrolling again.

  • ipyvizzu.Chart.animation: allow animoptions, kwargs can only be animo…

    ipyvizzu.Chart.animation: allow animoptions, kwargs can only be animo…

    …ptions

    • [x] refactor Chart.animate

    • [x] fix unit tests

    • [x] add unit tests to anim options

    • [x] fix examples

    • [x] add examples to anim options

    • [x] load data in the examples

  • Generate ipynb from python and markdown assets

    Generate ipynb from python and markdown assets

    The notebooks (ipynb) inculdes the markdown and code cells as list of lines. Editing the notebook is error prone therefore we should read the cells from separate assets.

    A notebook

    {                                                                                                                                                                                                                      
      "cells": [                                                                                 
        {                                                                                         
           "cell_type": "markdown",                                                              
           "id": "e582c95b",                                                                     
           "metadata": {},                                                                       
           "source": [                                                                           
              "## Aggregate/drill-down\n",                                                         
              "\n",                                                                                
              "These features basically mean that you add or remove an additional dimension to/from an axis or another channel. As you can see below, there are some important things to keep in mind when you use them.\n",
              "\n",                                                                                
              "Let’s stack together the elements by putting the Genres dimension from the x-axis to the y-axis. At the end of this phase, there are chart elements with the same color stacked on top of each other, which is something you would want to avoid. "
          ]                                                                                     
        }
      ]
    }
    

    would be split into a json and markdown/python files

    {                                                                                                                                                                                                                      
      "cells": [                                                                                 
        {                                                                                         
          "cell_type": "markdown",                                                              
          "id": "e582c95b",                                                                     
          "metadata": {},                                                                       
          "source": {"@readlines": "aggregate.md"}
        }
      ]                                                                                     
    }
    
    ## Aggregate/drill-down
    
    These features basically mean that you add or remove an additional dimension to/from an axis or another channel. As you can see below, there are some important things to keep in mind when you use them.
    
    Let’s stack together the elements by putting the Genres dimension from the x-axis to the y-axis. At the end of this phase, there are chart elements with the same color stacked on top of each other, which is something you would want to avoid.
    

    The {"@readlines": "aggregate.md"} would be handle by a simple python script with the json.load object_hook. And the Makefile would genearte ipynb from the json template:

    #!/usr/bin/env python3
    """
    Replace `{"@readlines": "referred/file"}` object from the `json_file` with the
    list of lines read from the referred file. The path of the referred file is
    relative to the `json_file`.
    """
    
    import argparse
    import json
    import sys
    import pathlib
    
    
    def main():
        args = _parse_args()
        reader = Reader(args.json_file.parent)
    
        with args.json_file.open() as fp:
            obj = json.load(fp, object_hook=reader.object_hook)
    
        json.dump(obj, fp=sys.stdout, indent=4, sort_keys=True)
    
    
    def _parse_args():
        parser = argparse.ArgumentParser(
            description="Read files as list of lines into json", epilog=__doc__
        )
        parser.add_argument("json_file", type=pathlib.Path)
    
        return parser.parse_args()
    
    
    class Reader:
        def __init__(self, source_dir):
            self._source_dir = source_dir
    
        def object_hook(self, obj):
            if len(obj) != 1:
                return obj
    
            try:
                path = obj["@readlines"]
            except KeyError:
                return obj
    
            file_name = self._source_dir / path
    
            with file_name.open() as fp:
                return fp.readlines()
    
    
    if __name__ == "__main__":
        exit(main())
    
  • put readme into documentation and setup domains.

    put readme into documentation and setup domains.

    Please put all content from the readme to the github pages index page (https://vizzuhq.github.io/ipyvizzu/index.html). Including a link to the github repo. See vizzu-lib for reference, where the repo readme is the same as the lib.vizzuhq.com index page. 2. Please create an ipyvizzu.vizzuhq.com subdomain and direct it to the ipyvizzu project's github pages site. 3. We have the ipyvizzu.com domain now, please redirect it to ipyvizzu.vizzuhq.com

  • Added demo links for other notebooks in Readme.md

    Added demo links for other notebooks in Readme.md

    I have made the below changes as suggested in the issue #128 👇

    1. Demo links of other notebooks which supports ipyvizzu
    2. Added the demo links inside the Tools Support section in Readme.md file.

    Finally, I would like to thank @simzer for replying back on the issue. 😀 Also, I'm open for feedback on this PR.

  • Doesn't work in databrick notebook

    Doesn't work in databrick notebook

    Example: https://databricks-prod-cloudfront.cloud.databricks.com/public/4027ec902e239c93eaaa8714f173bcfc/2804273370363137/1363672035823085/1736236844723331/latest.html

  • Does not work in Deepnote

    Does not work in Deepnote

    https://deepnote.com

    The problem seems to be, that this environment creates separate HTML documents for each cell including them into the notebook using iframe, also creates separate js files for all script tag inside a cell.

  • Databricks support

    Databricks support

    ipyvizzu does not work in Databricks. No python or JS console error, but the HTML code supposed to be generated by Ipyvizzu does not present in the cell output. Maybe implementing repr_html() would solve this issue?

  • Make it easy to use Ipyvizzu with Panel

    Make it easy to use Ipyvizzu with Panel

    Panel is a powerful framework for #dataapps in #python. It would be really nice if it was easy to use Ipyvizzu with Panel.

    As a first step I created an example of how this can be done. See https://discourse.holoviz.org/t/animated-charts-and-story-telling-with-ipyvizzu/3622 for the details.

    works-with-ipyvizzu

    I've made a small tweet about it here https://twitter.com/MarcSkovMadsen/status/1518219138266804224?s=20&t=qKrkT52SeEvRLp74fHpE6g. I've shared it on LinkedIn here https://www.linkedin.com/posts/marcskovmadsen_dataapp-python-dataapp-activity-6923988516120985600-qJ_C?utm_source=linkedin_share&utm_medium=member_desktop_web.

    To make it easy would probably either include some documentation on the ipyvizzu side and/ or a custom Panel pane that users can wrap the Ipyvizzu chart in to get it rendered.

    This issue is mostly for info at the current state such that your community knows it can be done.

  • mode.com support

    mode.com support

    Mode.com notebook won't show output div for the display_javascript call. The vizzu div should be created manually using display_html when show() called.

Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js

pivottablejs: the Python module Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js Installation pip install pivot

May 8, 2022
IPython/Jupyter notebook module for Vega and Vega-Lite
IPython/Jupyter notebook module for Vega and Vega-Lite

IPython Vega IPython/Jupyter notebook module for Vega 5, and Vega-Lite 4. Notebooks with embedded visualizations can be viewed on GitHub and nbviewer.

Feb 12, 2021
Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js

pivottablejs: the Python module Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js Installation pip install pivot

Feb 11, 2021
Render Jupyter notebook in the terminal
Render Jupyter notebook in the terminal

jut - JUpyter notebook Terminal viewer. The command line tool view the IPython/Jupyter notebook in the terminal. Install pip install jut Usage $jut --

Apr 20, 2022
Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.
Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

Visual Python is a GUI-based Python code generator, developed on the Jupyter Notebook environment as an extension.

May 17, 2022
Plotting library for IPython/Jupyter notebooks
Plotting library for IPython/Jupyter notebooks

bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

May 17, 2022
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

May 17, 2022
An interactive GUI for WhiteboxTools in a Jupyter-based environment
An interactive GUI for WhiteboxTools in a Jupyter-based environment

whiteboxgui An interactive GUI for WhiteboxTools in a Jupyter-based environment GitHub repo: https://github.com/giswqs/whiteboxgui Documentation: http

May 13, 2022
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

Feb 13, 2021
Plotting library for IPython/Jupyter notebooks
Plotting library for IPython/Jupyter notebooks

bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

May 17, 2022
A Jupyter - Three.js bridge
A Jupyter - Three.js bridge

pythreejs A Python / ThreeJS bridge utilizing the Jupyter widget infrastructure. Getting Started Installation Using pip: pip install pythreejs And the

May 22, 2022
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

Feb 18, 2021
Plotting library for IPython/Jupyter notebooks
Plotting library for IPython/Jupyter notebooks

bqplot 2-D plotting library for Project Jupyter Introduction bqplot is a 2-D visualization system for Jupyter, based on the constructs of the Grammar

Feb 18, 2021
A Jupyter - Three.js bridge
A Jupyter - Three.js bridge

pythreejs A Python / ThreeJS bridge utilizing the Jupyter widget infrastructure. Getting Started Installation Using pip: pip install pythreejs And the

Feb 17, 2021
A Jupyter - Leaflet.js bridge
A Jupyter - Leaflet.js bridge

ipyleaflet A Jupyter / Leaflet bridge enabling interactive maps in the Jupyter notebook. Usage Selecting a basemap for a leaflet map: Loading a geojso

May 19, 2022
Draw datasets from within Jupyter.
Draw datasets from within Jupyter.

drawdata This small python app allows you to draw a dataset in a jupyter notebook. This should be very useful when teaching machine learning algorithm

May 11, 2022
High performance, editable, stylable datagrids in jupyter and jupyterlab
High performance, editable, stylable datagrids in jupyter and jupyterlab

An ipywidgets wrapper of regular-table for Jupyter. Examples Two Billion Rows Notebook Click Events Notebook Edit Events Notebook Styling Notebook Pan

May 16, 2022
An interactive dashboard for visualisation, integration and classification of data using Active Learning.
An interactive dashboard for visualisation, integration and classification of data using Active Learning.

AstronomicAL An interactive dashboard for visualisation, integration and classification of data using Active Learning. AstronomicAL is a human-in-the-

May 18, 2022
Bcc2telegraf: An integration that sends ebpf-based bcc histogram metrics to telegraf daemon

bcc2telegraf bcc2telegraf is an integration that sends ebpf-based bcc histogram

Feb 17, 2022