[Docs] Add vizro-ai chart examples to docs

vizro-ai/changelog.d/20240507_115440_nadija_ratkusic_graca_vizro_ai_add_chart_examples.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-ai/docs/pages/tutorials/quickstart.md

@@ -74,7 +74,7 @@ vizro_ai.plot(df, "create a line graph for GDP per capita since 1950 for each co
 
     `INFO:httpx:HTTP Request: POST https://api.openai.com/v1/chat/completions "HTTP/1.1 401 Unauthorized"`
 
-    Make sure you have [set up access to a large language model](../user-guides/install/#set-up-access-to-a-large-language-model). If you are confident that you have specified your API key correctly and have sufficient credits associated with it, check your environment. Some developers export the environment explicitly to ensure the API key is available at runtime. Call the following in your terminal:
+    Make sure you have [set up access to a large language model](../user-guides/install.md/#set-up-access-to-a-large-language-model). If you are confident that you have specified your API key correctly and have sufficient credits associated with it, check your environment. Some developers export the environment explicitly to ensure the API key is available at runtime. Call the following in your terminal:
 
     `export OPENAI_API_KEY="sk-YOURKEY"`.
 

vizro-ai/docs/pages/user-guides/chart-examples.md

@@ -0,0 +1,92 @@
+# Explore VizroAI
+
+In this guide, we'll learn how to make more advanced charts with Plotly using data from [Plotly Express](https://plotly.com/python-api-reference/generated/plotly.express.data.html). The examples below use the OpenAI `"gpt-4-0613"` model as we are going to request specific updates to the layout of the charts, which are [more complex than the default GPT 3.5 model can handle](./customize-vizro-ai.md).
+
+### Create a polar bar chart
+
+A polar bar chart is a circular graph where each axis represents a different variable, typically used for displaying cyclical or directional data.
+It's suitable for quickly comparing multiple variables across different categories or directions. Let's make one using Vizro-AI.
+
+
+!!! example "Polar Bar Chart"
+
+    === "Code for the cell"
+        ```py
+        import vizro_ai
+        from vizro_ai import VizroAI
+        import plotly.express as px
+
+        from dotenv import load_dotenv
+        load_dotenv()
+
+        df = px.data.wind()
+
+        vizro_ai = VizroAI(model="gpt-4-0613")
+        vizro_ai.plot(df,
+                      """Describe wind frequency and direction using bar_polar chart.
+                         Increase the width and height of the figure.
+                         Improve layout by placing title to the left. Show legend""", explain=True)
+
+        ```
+    === "Resulting chart"
+        [![VizroAIChart1]][VizroAIChart1]
+
+    [VizroAIChart1]: ../../assets/user_guides/polar_bar_chart.png
+
+
+### Create a geographical map chart
+
+The next chart we'll look at is a geographical map chart to visualize spatial patterns in data, which often reveals insights not seen in other charts.
+
+!!! example "Map chart"
+
+    === "Code for the cell"
+        ```py
+        import vizro_ai
+        from vizro_ai import VizroAI
+        import plotly.express as px
+
+        from dotenv import load_dotenv
+        load_dotenv()
+
+        df = px.data.wind()
+
+        vizro_ai = VizroAI(model="gpt-4-0613")
+        vizro_ai.plot(df,
+                      """Visualize life expectancy over the years using map chart. Use life expectancy as the color dimension.
+                         Improve layout by using Arial font. Increase the width and height of the map area. Outline continents on the map.
+                         Show countries on the map.
+                         Increase the width and height of the figure.""", explain=True)
+
+        ```
+    === "Resulting chart"
+        [![VizroAIChart2]][VizroAIChart2]
+
+    [VizroAIChart2]: ../../assets/user_guides/map_chart.gif
+
+
+### Create a surface plot
+
+Let's explore how to generate a 3-dimensional surface plot with VizroAI.
+
+!!! example "Surface plot"
+
+    === "Code for the cell"
+        ```py
+        import vizro_ai
+        from vizro_ai import VizroAI
+        import plotly.express as px
+
+        from dotenv import load_dotenv
+        load_dotenv()
+
+        df = px.data.gapminder()
+
+        vizro_ai = VizroAI(model="gpt-4-0613")
+        vizro_ai.plot(df, "create a surface plot")
+
+        ```
+    === "Resulting chart"
+        [![VizroAIChart3]][VizroAIChart3]
+
+    [VizroAIChart3]: ../../assets/user_guides/surface_plot.gif

vizro-ai/mkdocs.yml

@@ -13,13 +13,15 @@ nav:
           - Advanced charts: pages/user-guides/create-advanced-charts.md
           - Different languages: pages/user-guides/use-different-languages.md
           - Vizro-AI charts in dashboards: pages/user-guides/add-generated-chart-usecase.md
+  - API Reference:
+      - VizroAI: pages/API-reference/vizro-ai.md
   - Explanation:
       - FAQs: pages/explanation/faq.md
       - Disclaimer: pages/explanation/disclaimer.md
       - Safeguard code execution: pages/explanation/safeguard.md
       - Safety in Vizro-AI: pages/explanation/safety-in-vizro-ai.md
-  - API Reference:
-      - VizroAI: pages/API-reference/vizro-ai.md
+  - Examples:
+      - Chart examples: pages/user-guides/chart-examples.md
   #- Contribute:
   #      - Contributing: pages/contribute/contributing.md
   - Vizro: