Skip to content

JupyterLite

Features

The features of ipyvizzu that are available in JupyterLite are marked with a green check.

  • Change the url of Vizzu (vizzu)
  • Change the width of the Chart (width)
  • Change the height of the Chart (height)
  • Use scroll into view (scroll_into_view=True)

Display features:

  • Display all animations after _repr_html_ method called (display=DisplayTarget.MANUAL)
  • Display all animations after show method called (display=DisplayTarget.MANUAL)
  • Automatically display all animations after the first cell (display=DisplayTarget.BEGIN)
  • Automatically display all animations after the currently running cell (display=DisplayTarget.ACTUAL)
  • Automatically display all animations after the last running cell (display=DisplayTarget.END)
  • Rerun any cell without rerun the first cell (display!=DisplayTarget.MANUAL)

Check Chart settings chapter for more details.

Installation

Place the following code into a notebook cell in order to install ipyvizzu (visit Installation chapter for more options and details).

import micropip await micropip.install("ipyvizzu")

Sample

Try ipyvizzu in JupyterLite with the following sample.

# import pandas, js, asyncio, StringIO and ipyvizzu import pandas as pd import js, asyncio from io import StringIO from ipyvizzu import Chart, Data, Config, Style, DisplayTarget # initialize Chart chart = Chart( width="640px", height="360px" ) # or Chart(width="640px", height="360px", display=DisplayTarget.ACTUAL) # chart = Chart(width="640px", height="360px", display=DisplayTarget.BEGIN) # chart = Chart(width="640px", height="360px", display=DisplayTarget.END) # chart = Chart(width="640px", height="360px", display=DisplayTarget.MANUAL) # add data to Chart # download data from # "https://ipyvizzu.vizzuhq.com/0.18/showcases/titanic/titanic.csv" # and place it in your JupyterLite workspace DB_NAME = "JupyterLite Storage" async def get_contents(path): """use the IndexedDB API to acess JupyterLite's in-browser storage for documentation purposes, the full names of the JS API objects are used. see https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest """ queue = asyncio.Queue(1) IDBOpenDBRequest = js.self.indexedDB.open(DB_NAME) IDBOpenDBRequest.onsuccess = IDBOpenDBRequest.onerror = ( queue.put_nowait ) await queue.get() if IDBOpenDBRequest.result is None: return None IDBTransaction = IDBOpenDBRequest.result.transaction( "files", "readonly" ) IDBObjectStore = IDBTransaction.objectStore("files") IDBRequest = IDBObjectStore.get(path, "key") IDBRequest.onsuccess = IDBRequest.onerror = queue.put_nowait await queue.get() return IDBRequest.result.to_py() if IDBRequest.result else None data = Data() data_csv = await get_contents("titanic.csv") df = pd.read_csv(StringIO(data_csv["content"])) data.add_df(df) chart.animate(data) # add config to Chart 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"]})) # add style to Chart chart.animate(Style({"title": {"fontSize": 35}})) # display Chart with show or _repr_html_ method (display=DisplayTarget.MANUAL) # chart.show() # chart

Check the Tutorial for more info.