Group/stack

When you add dimensions to the channels, there is a simple rule to keep in mind in the current beta phase of Vizzu. The following example also shows how to group and stack elements of a bar chart.

The rule: When you add a dimension (Type) to a channel (x-axis) with only dimensions on it, Vizzu will fade between the states, as shown here. Thus, you get a grouped bar chart, but the connection between the original state and this one will be unclear for the viewer because of the fading.

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"}, "x": {"set": "Genres"}},
            "title": "The wrong way means no animation",
        }
    )
)

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

snapshot1 = chart.store()

Let’s get back to the original state by removing the extra dimension - Vizzu will also simply fade between these states.

In [2]:
chart.animate(snapshot1)

chart.animate(Config({"title": "Let's get back to where we were"}))

chart.animate(
    Config(
        {
            "channels": {
                "x": {"detach": "Kinds"},
                "color": {"set": None},
            }
        }
    )
)

snapshot2 = chart.store()

The right way is to add the new dimension to the same channel where the measure is: the y-axis. However, since doing only this would result in multiple column chart elements with the same color stacked on top of each other, we also add the same dimension (Type) to the color channel.

In [3]:
chart.animate(snapshot2)

chart.animate(
    Config({"title": "The right way: add to the same channel where the measure is"})
)

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

snapshot3 = chart.store()

By detaching this newly added dimension from the y-axis and attaching it to the x-axis, you get to the same grouped bar chart as in the first step but in a way that is easy to follow for the viewer.

In [4]:
chart.animate(snapshot3)

chart.animate(
    Config({"title": "...then you can add it to another channel = group elements..."})
)

chart.animate(
    Config(
        {
            "channels": {
                "y": {"detach": "Kinds"},
                "x": {"attach": "Kinds"},
            }
        }
    )
)

snapshot4 = chart.store()

To stack a grouped chart, you just have to do the same thing the other way around: detach the dimension from the x-axis and attach it to the y-axis.

In [5]:
chart.animate(snapshot4)

chart.animate(
    Config({"title": "...doing it the other way is how you stack your chart"})
)

chart.animate(
    Config(
        {
            "channels": {
                "y": {"attach": "Kinds"},
                "x": {"detach": "Kinds"},
            }
        }
    )
)

Next chapter: Sorting ----- Previous chapter: Channels & legend ----- Back to the Table of contents