Music formats (Year by Year)

import pandas as pd
from ipyvizzu import Chart, Data, Config, Style, DisplayTarget

df = pd.read_csv(
    "https://ipyvizzu.vizzuhq.com/0.17/showcases/musicformats/musicformats.csv",
    dtype={"Year": str},
)
data = Data()
data.add_df(df, units={"Revenue": "m$"})

config = {
    "channels": {
        "y": {
            "set": ["Format"],
        },
        "x": {"set": ["Revenue"]},
        "label": {"set": ["Revenue"]},
        "color": {"set": ["Format"]},
    },
    "sort": "byValue",
}

style = Style(
    {
        "plot": {
            "paddingLeft": 100,
            "paddingTop": 25,
            "yAxis": {
                "color": "#ffffff00",
                "label": {"paddingRight": 10},
            },
            "xAxis": {
                "title": {"color": "#ffffff00"},
                "label": {
                    "color": "#ffffff00",
                    "numberFormat": "grouped",
                },
            },
            "marker": {
                "colorPalette": "#b74c20FF #c47f58FF #1c9761FF"
                + " #ea4549FF #875792FF #3562b6FF"
                + " #ee7c34FF #efae3aFF"
            },
        },
    }
)

chart = Chart(display=DisplayTarget.END)

chart.animate(data, style)

for year in range(1973, 2021):
    config["title"] = f"Music Revenue by Format - Year by Year {year}"
    chart.animate(
        Data.filter(f"parseInt(record.Year) == {year}"),
        Config(config),
        duration=0.2,
        x={"easing": "linear", "delay": 0},
        y={"delay": 0},
        show={"delay": 0},
        hide={"delay": 0},
        title={"duration": 0, "delay": 0},
    )

chart.animate(
    Config(
        {
            "channels": {
                "x": {"attach": ["Year"]},
                "label": {"set": None},
            }
        }
    ),
    duration=0.3,
)

chart.animate(
    Data.filter("record.Year == '2020' || record.Year == '1972'"),
    Config({"title": "Lets see the total of the last 47 years"}),
    duration=2,
)

chart.animate(Config({"sort": "none"}), delay=0, duration=2)

for year in reversed(range(1973, 2020)):
    chart.animate(
        Data.filter(
            f"parseInt(record.Year) >= {year} || record.Year == '1972'"
        ),
        Config({"split": True}),
        Style({"plot.xAxis.interlacing.color": "#ffffff"}),
        duration=0.005,
    )

chart.animate(
    Data.filter("record.Year != '1972'"),
    Config({"split": False}),
    duration=1.5,
)

chart.animate(
    Config({"channels": {"x": {"detach": ["Year"]}}}), duration=0
)

chart.animate(
    Config({"channels": {"label": {"set": ["Revenue"]}}}),
    duration=0.1,
)

chart.animate(
    Config(
        {
            "channels": {
                "x": {"attach": ["Year"]},
                "label": {"detach": ["Revenue"]},
            }
        }
    ),
    duration=1,
)

chart.animate(
    Config(
        {
            "channels": {
                "x": {"set": ["Year"]},
                "y": {
                    "set": ["Revenue", "Format"],
                    "range": {"min": None, "max": None},
                },
                "color": {"set": ["Format"]},
            },
            "title": "Music Revenue by Format in the USA 1973 - 2020",
            "split": True,
        }
    ),
    Style(
        {
            "plot": {
                "paddingLeft": 7.5,
                "paddingTop": 25,
                "xAxis": {
                    "label": {
                        "fontSize": 9,
                        "angle": 2.0,
                        "color": "#8e8e8e",
                    }
                },
                "yAxis": {
                    "interlacing": {"color": "#ffffff00"},
                    "title": {"color": "#ffffff00"},
                    "label": {"color": "#ffffff00"},
                },
            }
        }
    ),
    duration=2,
)

chart.animate(Config({"geometry": "area"}), duration=1)

chart.animate(
    Config(
        {
            "channels": {
                "x": {"set": ["Year"]},
                "y": {"range": {"max": "110%"}},
            },
            "align": "center",
            "split": False,
        }
    ),
    Style({"plot.marker.borderWidth": 1}),
    duration=1,
)