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.

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": ["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()

By taking the Genres off of the y-axis, only one chart element remains for every color, and Vizzu automatically calculates and shows the aggregate value of the elements.

Note: Instead of taking the unwanted dimension down from the chart, Genres could have been added to the lightness channel to differentiate the chart elements.

In [2]:
chart.animate(snapshot1)

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

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

snapshot2 = chart.store()

To drill-down, the same dimension is put back on the y-axis, which results in a state that we suggest you to only use temporarily when in transition.

In [3]:
chart.animate(snapshot2)

chart.animate(Config({"title": "Drill-down"}))

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

snapshot3 = chart.store()

We group the elements by putting once again the Genres dimension on the x-axis.

In [4]:
chart.animate(snapshot3)

chart.animate(Config({"title": "Group"}))

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

Next chapter: Orientation, split & polar ----- Previous chapter: Align & range ----- Back to the Table of contents