add gifs to examples

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,18 +60,16 @@ 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()
         ```
     === "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)