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.

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

data = Data()

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

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

chart = Chart()
chart.animate(data)
chart.animate(Config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({"color": {"set": ["Genres"]}}))
chart.animate(Config({
    "channels": {
        "y": {
            "attach": ["Genres"],
        },
        "x": {
            "set": None
        }
    }
}))

chart.show()

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]:
from ipyvizzu import Chart, Data, Config

data = Data()

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

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

chart = Chart()
chart.animate(data)
chart.animate(Config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({"color": {"set": ["Genres"]}}))
chart.animate(Config({
    "channels": {
        "y": {
            "attach": ["Genres"],
        },
        "x": {
            "set": None
        }
    }
}))
chart.animate(Config({
    "channels": {
        "y": {
            "detach": ["Genres"],
        },
    }
}))

chart.show()

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]:
from ipyvizzu import Chart, Data, Config

data = Data()

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

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

chart = Chart()
chart.animate(data)
chart.animate(Config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({"color": {"set": ["Genres"]}}))
chart.animate(Config({
    "channels": {
        "y": {
            "attach": ["Genres"],
        },
        "x": {
            "set": None
        }
    }
}))
chart.animate(Config({
    "channels": {
        "y": {
            "detach": ["Genres"],
        },
    }
}))
chart.animate(Config({
    "channels": {
        "y": {
            "attach": ["Genres"],
        },
    }
}))

chart.show()

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

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

data = Data()

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

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

chart = Chart()
chart.animate(data)
chart.animate(Config({"channels": {"y": {"set": "Popularity"}, "x": {"set": "Genres"}}}))
chart.animate(Config({"channels": {"label": {"attach": ["Popularity"]}}}))
chart.animate(Config({"color": {"set": ["Genres"]}}))
chart.animate(Config({
    "channels": {
        "y": {
            "attach": ["Genres"],
        },
        "x": {
            "set": None,
        }
    }
}))
chart.animate(Config({
    "channels": {
        "y": {
            "detach": ["Genres"],
        },
    }
}))
chart.animate(Config({
    "channels": {
        "y": {
            "attach": ["Genres"],
        },
    }
}))
chart.animate(Config({
    "channels": {
        "y": {
            "detach": ["Genres"],
        },
        "x": {
            "set": ["Genres"],
        }
    }
}))

chart.show()
In [ ]: