Orientation, split & polar

Now that you are familiar with the basic logic and operation of Vizzu, let's dive in with some more advanced features that you can use to create animated data stories and show the data from different perspectives.

Switching orientation means that you put a measure from one axis to the other to see the data from a different perspective. This is once again a state you should only use temporarily.

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": "Switch the orientation = arrange by other axis",
        }
    )
)

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

snapshot1 = chart.store()

By turning the split parameter on, you can see stacked elements side-by-side, which enables the comparison of the components.

In [2]:
chart.animate(snapshot1)

chart.animate(Config({"title": "Split stacked values = show side-by-side"}))

chart.animate(Config({"split": True}))

snapshot2 = chart.store()

Merging the components by turning the split parameter off.

In [3]:
chart.animate(snapshot2)

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

chart.animate(Config({"split": False}))

snapshot3 = chart.store()

We aggregate the data by removing the Genres dimension from the x-axis.

In [4]:
chart.animate(snapshot3)

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

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

snapshot4 = chart.store()

Switching from cartesian coordinates to polar. When doing so, it is worth setting the axis range on the axis with the dimension so that the viewers can easily compare the values shown. If you want to return to the default cartesian coordinates, just set the coordSystem parameter to ‘cartesian’.

Note: The range of the x-axis is automatically set to max:133% as this is the standard way to show radial charts.

In [5]:
chart.animate(snapshot4)

chart.animate(Config({"title": "Polar coordinates"}))

chart.animate(
    Config(
        {
            "channels": {
                "y": {
                    "range": {
                        "min": "-30%",
                    },
                },
            },
            "coordSystem": "polar",
        }
    )
)

Next chapter: Filtering & adding new records ----- Previous chapter: Aggregate/drill-down ----- Back to the Table of contents