Sorting

Vizzu provides multiple options to sort data. By default, the data is sorted by the order it is added to Vizzu. This is why we suggest to add temporal data such as dates in chronological order - from oldest to newest.

You can also sort the elements by value, which will provide you with an ascending order.

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 to ascending order...",
        }
    )
)

chart.animate(
    Config(
        {
            "sort": "byValue",
        }
    )
)

snapshot1 = chart.store()

If you want descending order instead, you have to set the reverse parameter to true. When used without setting the sorting to byValue, the elements will be in the opposite order than they are in the data set added to Vizzu.

In [2]:
chart.animate(snapshot1)

chart.animate(Config({"title": "...or descending order."}))

chart.animate(
    Config(
        {
            "reverse": True,
        }
    )
)

snapshot2 = chart.store()

This is how to switch back to the default sorting.

In [3]:
chart.animate(snapshot2)

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

chart.animate(
    Config(
        {
            "sort": "none",
            "reverse": False,
        }
    )
)

snapshot3 = chart.store()

When you have more than one dimension on a channel, their order determines how the elements are grouped.

In [4]:
chart.animate(snapshot3)

chart.animate(Config({"title": "With two discretes on one axis..."}))

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

snapshot4 = chart.store()

When switching the order of dimensions on the x-axis Vizzu will rearrange the elements according to this new logic.

In [5]:
chart.animate(snapshot4)

chart.animate(Config({"title": "...grouping is determined by their order."}))

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

Next chapter: Align & range ----- Previous chapter: Group/stack ----- Back to the Table of contents