!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_data_frame(data_frame)
#You can find our default Style and Config settings here: https://docs.google.com/spreadsheets/d/1KSxFGnU-oaWVUvo-EZIvhKWyeCTwssimSaBYccxGw0c/edit#gid=2051760508
#And the style reference table for Vizzu jslib on this link: https://lib.vizzuhq.com/0.3.0/reference/modules/Styles.html
# Set the style of the charts in the story
style = Style(
{
"backgroundColor": "#FFFFFFFF",
"fontFamily": "Roboto, sans-serif",
"fontSize": "10px",
"legend": {
"label": {
"color": "#999999FF",
"fontSize": "1em",
"textAlign": "left"
},
"title": {
"color": "#999999FF",
"fontSize": "1.166667em",
"textAlign": "left"
}
},
"plot": {
"marker": {
"colorGradient": "#4171CDFF 0, #8536C7FF 0.25, #C33E7FFF 0.5, #E9974EFF 0.75, #F3F239FF 1",
"colorPalette": "#4171CDFF #03AE71FF #F4941BFF #F4C204FF #D49664FF #F25456FF #9E67ABFF #BCA604FF #846E1CFF #FC763CFF #B462ACFF #F492FCFF #BC4A94FF #9C7EF4FF #9C52B4FF #6CA2FCFF #5C6EBCFF #7C868CFF #AC968CFF #4C7450FF #AC7A4CFF #7CAE54FF #4C7450FF #9C1A6CFF #AC3E94FF #B41204FF",
},
"yAxis": {
"color": "#CCCCCCFF",
"label": {
"color": "#999999FF",
"fontSize": "1em"
},
"title": {
"color": "#999999FF",
"fontSize": "1.166667em"
},
},
"xAxis": {
"label": {
"color": "#999999FF",
"fontSize": "1em"
},
"title": {
"color": "#999999FF",
"fontSize": "1.166667em"
},
},
},
"title": {
"color": "#494949FF",
"fontSize": "2.166667em",
"textAlign": "center"
},
"tooltip": {
"arrowSize": "8",
"color": "#191919FF",
"backgroundColor": "#FFFFFFFF",
"borderColor": "#D8D8D8FF",
"fontSize": "12px"
},
"logo": {
'filter' : 'color(#D8D8D8FF)',
},
}
)
chart = Chart(width="100%", height="480px", display="manual")
chart.animate(data,style)
chart.animate(
data.filter("""record.Year == '01' || record.Year == '02' || record.Year == '03' || record.Year == '04'|| record.Year == '05'"""),
Config.stackedColumn({"x": "Year", "y": "Value 2 (+)", "stackedBy": "Joy factors", "title": "Stacked Column Chart"})
)
chart.feature("tooltip", True)
chart.show()
chart2 = Chart(width="100%", height="480px", display="manual")
chart2.animate(data,style)
chart2.animate(
Config.splittedColumn({"x": "Year", "y": "Value 2 (+)", "splittedBy": "Joy factors", "title": "Splitted Column Chart"})
)
chart2.feature("tooltip", True)
chart2.show()
chart3 = Chart(width="100%", height="480px", display="manual")
chart3.animate(data,style)
chart3.animate(
Config.stackedArea({"x": "Year", "y": "Value 2 (+)", "stackedBy": "Joy factors", "title": "Stacked Area Chart"})
)
chart3.feature("tooltip", True)
chart3.show()
chart4 = Chart(width="100%", height="480px", display="manual")
chart4.animate(data, style)
chart4.animate(
Config.stackedBubble({"size": "Value 2 (+)", "color": "Joy factors", "stackedBy": "Year", "title": "Stacked Bubble Chart"})
)
chart4.feature("tooltip", True)
chart4.show()
chart5 = Chart(width="100%", height="480px", display="manual")
chart5.animate(data, style)
chart5.animate(
Config.pie({"angle": "Value 2 (+)", "by": "Joy factors", "title": "Pie Chart"})
)
chart5.feature("tooltip", True)
chart5.show()
chart6 = Chart(width="100%", height="480px", display="manual")
chart6.animate(data, style)
chart6.animate(
Data.filter("""record.Year == '01' || record.Year == '02' || record.Year == '03' || record.Year == '04'|| record.Year == '05'"""),
Config.stackedTreemap({"size": "Value 2 (+)", "color": "Year", "title": "Stacked Treemap", "dividedBy": "Country_code"})
)
chart6.feature("tooltip", True)
chart6.show()
chart7 = Chart(width="100%", height="480px", display="manual")
chart7.animate(data, style)
chart7.animate(
Data.filter(None),
Config.heatmap({"x": "Year", "y": "Country_code", "lightness": "Value 3 (+)", "title": "Heatmap (lightness)"}),
Style({"plot": {"marker": {"rectangleSpacing": 0}}})
)
chart7.feature("tooltip", True)
chart7.show()
chart8 = Chart(width="100%", height="480px", display="manual")
chart8.animate(data, style)
chart8.animate(
Config({"x": "Year", "y": "Country_code", "color": "Value 3 (+)", "title": "Heatmap (color gradient)"}),
Style({"plot": {"marker": {"rectangleSpacing": 0}}}),
)
chart8.feature("tooltip", True)
chart8.show()
story = Story(data, style)
story.set_size("100%", "480px")
slide1 = Slide(
Step(
data.filter("""record.Year == '01' || record.Year == '02' || record.Year == '03' || record.Year == '04'|| record.Year == '05'"""),
Config.stackedColumn({"x": "Year", "y": "Value 2 (+)", "stackedBy": "Joy factors", "title": "Stacked Column Chart"})
)
)
story.add_slide(slide1)
slide2 = Slide(
Step(
data.filter(None),
Config.splittedColumn({"x": "Year", "y": "Value 2 (+)", "splittedBy": "Joy factors", "title": "Splitted Column Chart"})
)
)
story.add_slide(slide2)
slide3 = Slide(
Step(
Config.stackedArea({"x": "Year", "y": "Value 2 (+)", "stackedBy": "Joy factors", "title": "Stacked Area Chart"})
)
)
story.add_slide(slide3)
slide4 = Slide(
Step(
Config.stackedBubble({"size": "Value 2 (+)", "color": "Joy factors", "stackedBy": "Year", "title": "Stacked Bubble Chart"})
)
)
story.add_slide(slide4)
slide5 = Slide(
Step(
Config.pie({"angle": "Value 2 (+)", "by": "Joy factors", "title": "Pie Chart"})
)
)
story.add_slide(slide5)
slide6 = Slide(
Step(
Data.filter("""record.Year == '01' || record.Year == '02' || record.Year == '03' || record.Year == '04'|| record.Year == '05'"""),
Config.stackedTreemap({"size": "Value 2 (+)", "color": "Year", "title": "Stacked Treemap", "dividedBy": "Country_code"})
)
)
story.add_slide(slide6)
slide7 = Slide(
Step(
Data.filter(None),
Config.heatmap({"x": "Year", "y": "Country_code", "lightness": "Value 3 (+)", "title": "Heatmap (lightness)"}),
Style({"plot": {"marker": {"rectangleSpacing": 0}}})
)
)
story.add_slide(slide7)
slide8 = Slide(
Step(
Config({"x": "Year", "y": "Country_code", "color": "Value 3 (+)", "title": "Heatmap (color gradient)"}),
)
)
story.add_slide(slide8)
story.set_feature("tooltip", True)
story.play()