!pip install ipyvizzu
!pip install ipyvizzu-story
import pandas as pd
from ipyvizzu import Chart, Data, Config, Style
from ipyvizzustory import Story, Slide, Step
# Create data object, read csv to data frame and add data frame to data object.
data = Data()
data_frame = pd.read_csv('https://ipyvizzu.vizzuhq.com/latest/assets/data/chart_types_eu.csv', dtype={"Year": str, "Timeseries": str})
data.add_df(data_frame),
style = Style({})
#, units = {"Value 2 (+)": "points"}
#story.add_plugin("marker-dropshadow")
chart = Chart(width="100%", height="480px", display="manual")
chart.animate(data, style)
chart.animate(
data.filter("""(record.Country == 'Austria' ||
record.Country == 'Belgium' ||
record.Country == 'Denmark' ||
record.Country == 'Germany') &&
(record.Year >=15)"""),
Style({
"plot": {
"paddingLeft": "6em",
},
"legend": {
"paddingRight": "-2em",
}
})
)
#1
#chart.animate(
# Config({"x": None, "y": None, "color": "Country", "lightness": "Value 3 (+)", "size": "Value 2 (+)", "label": "Country_code", "noop": None, "geometry": "circle"}),
# Style({ "plot": {"marker": {"colorPalette": None} } })
#)
#2
#chart.animate(
# Config({"x": "Value 3 (+)", "y": "Value 2 (+)", "color": "Joy factors", "lightness": None, "size": None, "label": "Country_code", "noop": "Country", "geometry": "circle"}),
# Style({ "plot": {"marker": {"colorPalette": "#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF"} } })
#)
#3
chart.animate(
Config({
"x": "Country",
"y": ["Joy factors", "Value 2 (+)"],
"color": "Joy factors",
"lightness": None,
"size": None,
"label": "Value 2 (+)",
"noop": None,
"geometry": "rectangle",
"title": "Joy Factors by Countries",
"subtitle": "Measured in four European countries",
"caption": "Regarding the happiness factor, Austria comes in first place."
}),
Style({ "plot": {"marker": {"colorPalette": "#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF"} } })
)
#4
chart.animate(
#data.filter("""(record.Joy factors == 'Happiness')"""),
Config({
"subtitle": None,
"caption": None
})
)
chart.plugin("marker-dropshadow")
chart.animate(
data.filter("""(record.Country == 'Austria' ||
record.Country == 'Belgium' ||
record.Country == 'Denmark' ||
record.Country == 'Germany') &&
(record.Year >=15) && (record["Joy factors"] == "Happiness")"""),
Config({
"title": "Happiness by Countries"
}),
delay=8
)
chart.animate(
Style(
{
"plot": {
"marker": {
"shadowColor": '#60000060',
"shadowBlur": 9,
"shadowOffsetX": 3,
"shadowOffsetY": 3
}
}
}
),
delay=8,
)
chart.feature("tooltip", True)
chart.show()
story = Story(data, style)
story.set_size("100%", "480px")
filter1 = """(record.Country == 'Austria' || record.Country == 'Belgium' || record.Country == 'Cyprus' || record.Country == 'Denmark' || record.Country == 'Greece' || record.Country == 'Germany') && (record.Year >=15)"""
slide1 = Slide(
Step(
Data.filter(filter1),
Config({"x": None, "y": None, "color": "Country", "lightness": "Value 3 (+)", "size": "Value 2 (+)", "label": "Country_code", "noop": None, "geometry": "circle"}),
Style({ "plot": {"marker": {"colorPalette": None} } })
)
)
story.add_slide(slide1)
slide2 = Slide(
Step(
data.filter("""(record.Country == 'Austria' ||
record.Country == 'Belgium' ||
record.Country == 'Denmark' ||
record.Country == 'Germany') &&
(record.Year >=15)"""),
Config({"x": "Value 3 (+)", "y": "Value 2 (+)", "color": "Joy factors", "lightness": None, "size": None, "label": "Country_code", "noop": "Country", "geometry": "circle", "title": "Joy Factors by Countries"
}),
Style({ "plot": {
"marker": {"colorPalette": "#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF"},
"paddingLeft": "6em" },
"legend": { "paddingRight": "-2em"}
})
)
)
story.add_slide(slide2)
slide3 = Slide(
Step(
data.filter("""(record.Country == 'Austria' ||
record.Country == 'Belgium' ||
record.Country == 'Denmark' ||
record.Country == 'Germany') &&
(record.Year >=15)"""),
Config({"x": "Country", "y": ["Joy factors", "Value 2 (+)"], "color": "Joy factors", "lightness": None, "size": None, "label": "Value 2 (+)", "noop": None, "geometry": "rectangle",
#"title": "Joy Factors by Countries",
#"subtitle": "Measured in four European countries",
#"caption": "Regarding the happiness factor, Austria comes in first place."
}),
Style({
"plot": {
"paddingLeft": "6em",
},
"legend": {
"paddingRight": "-2em",
}
})
)
)
story.add_slide(slide3)
slide4 = Slide(
Step(
data.filter("""(record.Country == 'Austria' ||
record.Country == 'Belgium' ||
record.Country == 'Denmark' ||
record.Country == 'Germany') &&
(record.Year >=15) && (record["Joy factors"] == "Happiness")"""),
Config({"x": "Country", "y": ["Joy factors", "Value 2 (+)"], "color": "Joy factors", "lightness": None, "size": None, "label": "Value 2 (+)", "noop": None, "geometry": "rectangle",
"title": "Happiness by Countries",
'subtitle': None,
'caption': None}),
)
)
story.add_slide(slide4)
story.set_feature("tooltip", True)
story.play()
chart = Chart(width="100%", height="480px", display="manual")
chart.animate(data, style)
chart.animate(
data.filter("""(record.Country == 'Austria' ||
record.Country == 'Belgium' ||
record.Country == 'Cyprus' ||
record.Country == 'Denmark' ||
record.Country == 'Greece' ||
record.Country == 'Germany') &&
(record.Year >=15)"""),
Style({
"plot": {
"paddingLeft": "6em",
},
"legend": {
"paddingRight": "-2em",
}
})
)
#1
chart.animate(
Config({"x": None, "y": None, "color": "Country", "lightness": "Value 3 (+)", "size": "Value 2 (+)", "label": "Country_code", "noop": None, "geometry": "circle"}),
Style({ "plot": {"marker": {"colorPalette": None} } })
)
#2
chart.animate(
Config({"x": "Value 3 (+)", "y": "Value 2 (+)", "color": "Joy factors", "lightness": None, "size": None, "label": "Country_code", "noop": "Country", "geometry": "circle"}),
Style({ "plot": {"marker": {"colorPalette": "#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF"} } })
)
#chart.plugin("marker-dropshadow")
#3
chart.animate(
Config({
"x": "Country",
"y": ["Joy factors", "Value 2 (+)"],
"color": "Joy factors",
"lightness": None,
"size": None,
"label": "Value 2 (+)",
"noop": None,
"geometry": "rectangle",
"title": "Joy Factors by Countries"}),
Style({ "plot": {"marker": {"colorPalette": "#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF"} } })
)
chart.feature("tooltip", True)
chart.show()