diff --git a/vizro-ai/docs/assets/tutorials/chart/advanced_chart_1.png b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_1.png new file mode 100644 index 000000000..0fc6b0033 Binary files /dev/null and b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_1.png differ diff --git a/vizro-ai/docs/assets/tutorials/chart/advanced_chart_2.png b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_2.png new file mode 100644 index 000000000..833c6d6a9 Binary files /dev/null and b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_2.png differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_advanced_chart.gif b/vizro-ai/docs/assets/tutorials/chart/animated_advanced_chart.gif new file mode 100644 index 000000000..2fa89d821 Binary files /dev/null and b/vizro-ai/docs/assets/tutorials/chart/animated_advanced_chart.gif differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_1.png b/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_1.png deleted file mode 100644 index 9c96881c8..000000000 Binary files a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_1.png and /dev/null differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_2.png b/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_2.png deleted file mode 100644 index 4637880c3..000000000 Binary files a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_2.png and /dev/null differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_3.png b/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_3.png deleted file mode 100644 index d784fb677..000000000 Binary files a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_3.png and /dev/null differ diff --git a/vizro-ai/docs/assets/user_guides/map_chart.gif b/vizro-ai/docs/assets/user_guides/map_chart.gif index d44569475..33731a5e3 100644 Binary files a/vizro-ai/docs/assets/user_guides/map_chart.gif and b/vizro-ai/docs/assets/user_guides/map_chart.gif differ diff --git a/vizro-ai/docs/assets/user_guides/surface_plot.gif b/vizro-ai/docs/assets/user_guides/surface_plot.gif index 9611b1218..7041dd42e 100644 Binary files a/vizro-ai/docs/assets/user_guides/surface_plot.gif and b/vizro-ai/docs/assets/user_guides/surface_plot.gif differ diff --git a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md index 537d5c1db..2f0adbd2d 100644 --- a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md +++ b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md @@ -1,7 +1,7 @@ # How to create advanced charts Now, let's explore more advanced visualizations and use Vizro-AI for enhanced formatting. -We'll create an animated bar chart illustrating the population development of each continent over time. Run the code below and look at the result. +We'll create an animated bar chart illustrating the GDP per Capita of each continent over time. Run the code below and look at the result. !!! example "Vizro-AI animated chart" @@ -13,15 +13,15 @@ We'll create an animated bar chart illustrating the population development of ea df = px.data.gapminder() vizro_ai = VizroAI() - fig = vizro_ai.plot(df, "Visualize GDP per capita over the years for each country using map chart. Show countries on the map.") + fig = vizro_ai.plot(df, "Visualize GDP per capita over the years for each country using map chart.") fig.show() ``` === "Result" [![AnimatedChart1]][AnimatedChart1] - [AnimatedChart1]: ../../assets/tutorials/chart/animated_bar_chart_1.png + [AnimatedChart1]: ../../assets/tutorials/chart/advanced_chart_1.png -Having unveiled our animated map chart showcasing GDP per capita development per country, it's clear that map area is small, and it is very difficult to differentiate countries. +Having unveiled our animated map chart showcasing GDP per Capita development per country, it's clear that map area is small, and it is very difficult to differentiate countries. Next, we will try to tweak our prompt to improve the overall layout. !!! example "Vizro-AI animated chart" @@ -35,14 +35,14 @@ Next, we will try to tweak our prompt to improve the overall layout. vizro_ai = VizroAI() fig = vizro_ai.plot(df, - """Visualize GDP per capita over the years for each country using animated map chart. + """Visualize GDP per capita over the years for each country using animated map chart. Show countries on the map. Increase the width and height of the figure.""") fig.show() ``` === "Result" [![AnimatedChart2]][AnimatedChart2] - [AnimatedChart2]: ../../assets/tutorials/chart/animated_bar_chart_2.png + [AnimatedChart2]: ../../assets/tutorials/chart/advanced_chart_2.png By incorporating the directive `Increase the width and height of the figure.` and `Show countries on the map.` we've successfully refined our animation and are now able to better interpret our result. @@ -60,7 +60,7 @@ Upon closer inspection, the title is too long and the color palette used does no vizro_ai = VizroAI() fig = vizro_ai.plot(df, - """Visualize GDP per capita over the years for each country using animated map chart. + """Visualize GDP per capita over the years for each country using animated map chart. Show countries on the map. Increase the width and height of the figure. Set title to be: `GDP per Capita over the years`. Use `Blues` as color sequence. """) fig.show() @@ -68,10 +68,8 @@ Upon closer inspection, the title is too long and the color palette used does no === "Result" [![AnimatedChart3]][AnimatedChart3] - [AnimatedChart3]: ../../assets/tutorials/chart/animated_bar_chart_3.png + [AnimatedChart3]: ../../assets/tutorials/chart/animated_advanced_chart.gif Congratulations! You've now gained insights into harnessing the power of a LLM and Vizro-AI for crafting advanced charts and improving formatting. Don't forget, enabling `explain=True` is a good way of learning more about how a chart can be further improved and formatted. Advanced charts are well-suited for [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard applications. You can create a chart using `vizro-ai` to plug into your `vizro` dashboard in seconds! - -![chart-into-dashboard](../../assets/tutorials/chart_into_dashboard.gif)