Interactive (jsfiddle like) tutorial and the examples

[petervidos]

https://jupyterlite.github.io/demo/lab/index.html
https://blog.jupyter.org/jupyter-everywhere-f8151c2cc6e8

[veghdev]

@petervidos Could you please clarify the issue?
ipyvizzu works in jupyterLite, for example:

1. cell:

import micropip
await micropip.install("ipyvizzu")

from ipyvizzu import Chart, Data, Config

chart = Chart()
chart.scroll_into_view = False

data_cube = Data()

data_cube.add_dimension('Genres', [ 'Pop', 'Rock', 'Jazz', 'Metal'])
data_cube.add_dimension('Kinds', [ 'Hard', 'Smooth', 'Experimental' ])

data_cube.add_measure(
    'Popularity',
    [
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],
    ]
)

chart.animate(data_cube)

chart.animate(Config({
    "channels": {
        "y": {
            "set": ["Popularity", "Kinds"]
        }, 
        "x": {
            "set": "Genres"
        },
        "label": {
            "attach": "Popularity"
        }
    },
    "color": {
        "attach": "Kinds"
    },
    "title": "Stack"
}))

chart.animate(Config({
    "channels": {
        "y": {
            "attach": "Genres",
        },
        "x": {
            "set": None
        }
    }
}))

snapshot1 = chart.store()

2. cell:

chart.animate(snapshot1)

chart.animate(Config({"title": "Aggregate element"}))

chart.animate(Config({
    "channels": {
        "y": {
            "detach": "Genres",
        },
    }
}))

snapshot2 = chart.store()

[simzer]

I think Peter would like to see something like the js fiddles for the JS library examples with a tryit link.

[simzer]

Naas could support this doc site feature