Without coordinates & noop channel

Certain chart types have neither measures nor dimensions on the axes such as treemaps and bubble charts. This is a case when the noop channel comes in handy for grouping and stacking elements in these kinds of charts.

To get to a treemap, we have to detach all dimensions and the measure from the axes and put two of them on the size channel, whereas the other dimension is still on the color channel. Since the same dimensions are used in both cases Vizzu will be able to animate between these states.

Note: The data used in this tutorial is available here. You can read more about the available types of data in the Adding data chapter.

In [1]:
from ipyvizzu import Chart, Data, Config

chart = Chart()

data = Data.from_json("./music_data.json")

chart.animate(data)

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

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

snapshot1 = chart.store()

Getting from a treemap to a bubble chart is simply by changing the geometry to circle. This bubble chart is stacked by the Type dimension that is on the size channel - this is why the bubbles are in separate, small groups.

In [2]:
chart.animate(snapshot1)

chart.animate(Config({"title": "Bubble chart - stacked"}))

chart.animate(
    Config(
        {
            "geometry": "circle",
        }
    )
)

snapshot2 = chart.store()

In order to show all bubbles as one group, we use the noop (no operations) channel for the Genres dimension. The noop channel enables us to have a dimension on the chart, that doesn’t affect any parameter of the elements, only their count.

In [3]:
chart.animate(snapshot2)

chart.animate(Config({"title": "Bubble chart - grouped - using the noop channel"}))

chart.animate(
    Config({"channels": {"size": {"detach": "Genres"}, "noop": {"set": "Genres"}}})
)

Next chapter: Color palette & fonts ----- Previous chapter: Filtering & adding new records ----- Back to the Table of contents