Filtering & adding new records

Filtering enables you to zoom in or out within a chart, allowing the viewer to focus on certain selected elements, or get more context. You can also add new records to the data on the chart which makes it easy to work with real-time sources.

Note: Currently Data.filter() and Data().set_filter() only accept JavaScript expression as string. Data fields can be accessed via record object, see the examples below.

We add two items from the Genres dimension - using the || operator - to the filter, so the chart elements that belong to the other two items will vanish from the chart.

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

chart = Chart()

data = Data()
data.add_dimension("Genres", ["Pop", "Rock", "Jazz", "Metal"])
data.add_dimension("Kinds", ["Hard", "Smooth", "Experimental"])
        [114, 96, 78, 52],
        [56, 36, 174, 121],
        [127, 83, 94, 58],

            "channels": {
                "y": {"set": ["Popularity", "Kinds"]},
                "x": {"set": "Genres"},
                "label": {"attach": "Popularity"},
            "color": {"attach": "Kinds"},
            "title": "Filter by one dimension",

filter1 = Data.filter("record['Genres'] == 'Pop' || record['Genres'] == 'Metal'")


snapshot1 =

Now we add a cross-filter that includes items from both the Genres and the Kinds dimensions. This way we override the filter from the previous state. If we weren't update the filter, Vizzu would use it in subsequent states.

In [2]:

chart.animate(Config({"title": "Filter by two dimensions"}))

filter2 = Data.filter(
    "(record['Genres'] == 'Pop' || record['Genres'] == 'Metal') && record['Kinds'] == 'Smooth'"


snapshot2 =

Switching the filter off to get back to the original view.

In [3]:

chart.animate(Config({"title": "Filter off"}))


snapshot3 =

Here we add another record to the data set and update the chart accordingly.

In [4]:

chart.animate(Config({"title": "Adding new records"}))

data2 = Data()
records = [["Soul", "Hard", 91], ["Soul", "Smooth", 57], ["Soul", "Experimental", 115]]


Note: combining this option with the store function makes it easy to update previously configured states with fresh data since this function saves the config and style parameters of the chart into a variable but not the data.

Next chapter: Without coordinates & noop channel ----- Previous chapter: Orientation, split & polar ----- Back to the Table of contents