update examples and quickstart

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

@@ -4,7 +4,7 @@ It is a step-by-step guide to help you experiment and create your initial Vizro
 
 ## Let's get started!
 ### 1. Install vizro-ai and its dependencies
-If you haven't already installed `vizro-ai` package, follow the [installation guide](../user_guides/install.md)
+If you haven't already installed `vizro_ai` package, follow the [installation guide](../user_guides/install.md)
 to do so inside a virtual environment.
 
 ??? tip "Beginners/Code novices"
@@ -60,22 +60,27 @@ By passing your prepared data and your written visualization request to this met
     === "Code for the cell"
         ```py
         from vizro_ai import VizroAI
-        import plotly.express as px
+        import vizro.plotly.express as px
 
         from dotenv import load_dotenv
         load_dotenv()
 
         df = px.data.gapminder()
         vizro_ai = VizroAI()
-        vizro_ai.plot(df, "describe the composition of gdp in continent, and add horizontal line for avg gdp")
+        vizro_ai.plot(df, "describe the composition of gdp in continent and color by continent, and add a horizontal line for avg gdp")
         ```
     === "Result"
         [![BarChart]][BarChart]
 
     [BarChart]: ../../assets/tutorials/chart/GDP_Composition_Bar.png
 
-You can also pass `explain=True` to `plot()` method which will provide
-additional insights in addition to the rendered chart.
+The created chart is interactive, and you can hover over the data for additional information.
+
+### 5. Get an explanation with your chart
+
+By passing `explain=True` to the `plot()` method will provide additional insights in addition to the rendered chart.
+
+Let's create another example and read through the additional information.
 
 !!! example "Specify  `explain=True`"
     === "Code for the cell"
@@ -87,7 +92,7 @@ additional insights in addition to the rendered chart.
 
     [GeoDistribution]: ../../assets/tutorials/chart/GeoDistribution.png
 
-### 5. Explore further
+### 6. Explore further
 
 Now, you have created your first charts with Vizro-AI and are ready to explore the documentation further.
 

vizro-ai/docs/pages/user_guides/run_vizro_ai.md

@@ -12,7 +12,7 @@ To run Vizro-AI in jupyter, create a new cell and execute the code below to rend
 !!! example "Bar chart"
     === "Code for the cell"
         ```py
-        import plotly.express as px
+        import vizro.plotly.express as px
         from vizro_ai import VizroAI
 
         from dotenv import load_dotenv
@@ -21,7 +21,7 @@ To run Vizro-AI in jupyter, create a new cell and execute the code below to rend
         vizro_ai = VizroAI()
 
         df = px.data.gapminder()
-        vizro_ai.plot(df, "visualize the life expectancy per continent")
+        vizro_ai.plot(df, "visualize the life expectancy per continent and color each continent")
         ```
     === "Result"
         [![BarChart]][BarChart]
@@ -43,7 +43,7 @@ You can utilize Vizro-AI in any standard development environment by creating a `
 !!! example "Line chart"
     === "example.py"
         ```py
-        import plotly.express as px
+        import vizro.plotly.express as px
         from vizro_ai import VizroAI
 
         vizro_ai = VizroAI()
@@ -65,7 +65,7 @@ Vizro-AI's `_get_chart_code` method returns the Python code string that can be u
 !!! example "Application integration"
     === "app.py"
         ```py
-        import plotly.express as px
+        import vizro.plotly.express as px
         from vizro_ai import VizroAI
 
         vizro_ai = VizroAI()