update chart notebook

vizro-ai/examples/colab-example-chart.ipynb

@@ -8,19 +8,50 @@
     "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/mckinsey/vizro/blob/docs/add_colab_link/vizro-ai/examples/colab-example-chart.ipynb)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "fbc65f78",
+   "metadata": {},
+   "source": [
+    "# Use Vizro-AI in Google Colab"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "1ac9a6f7",
+   "metadata": {},
+   "source": [
+    "#### 1. Secure your LLM API key as environment variable\n",
+    "\n",
+    "- click the `Secrets` button on the left\n",
+    "- click `Add new secret`\n",
+    "- insert \"OPENAI_API_KEY\" under `Name`\n",
+    "- insert the API key value under `Value`\n",
+    "- click the `Notebook access` toggle to make it available for the notebook run"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "d6a12271-d8da-4013-a677-74c01605ccc1",
    "metadata": {},
    "outputs": [],
    "source": [
+    "import os\n",
     "from google.colab import userdata\n",
     "\n",
     "os.environ[\"OPENAI_API_KEY\"] = userdata.get(\"OPENAI_API_KEY\")\n",
     "os.environ[\"OPENAI_BASE_URL\"] = userdata.get(\"OPENAI_BASE_URL\") # optional"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "90c99f85",
+   "metadata": {},
+   "source": [
+    "#### 2. Install Vizro-AI"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -36,50 +67,39 @@
    "id": "23acc66a-f782-46b8-832f-4ce5699f23e7",
    "metadata": {},
    "source": [
-    "# Getting started"
+    "#### 3. Load sample data"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "4f37b7d5-5073-4c06-9fe9-fda5ed38115a",
+   "id": "c6ac1b7d-5830-495b-94be-1ad7bf3022d3",
    "metadata": {},
    "outputs": [],
    "source": [
-    "import os\n",
     "import vizro.plotly.express as px\n",
     "\n",
-    "from vizro_ai import VizroAI"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "01af08c5-484e-4173-bb38-50fed9b7a764",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "vizro_ai = VizroAI()"
+    "df = px.data.gapminder()"
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c6ac1b7d-5830-495b-94be-1ad7bf3022d3",
+   "cell_type": "markdown",
+   "id": "c6cd92b0",
    "metadata": {},
-   "outputs": [],
    "source": [
-    "# data for plotting\n",
-    "df = px.data.gapminder()"
+    "#### 4. Instruct Vizro-AI for your plotting task"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "c1a9db39-febf-4c09-af2c-168287f6e69f",
+   "id": "fbb3717e",
    "metadata": {},
    "outputs": [],
    "source": [
+    "from vizro_ai import VizroAI\n",
+    "\n",
+    "vizro_ai = VizroAI()\n",
     "vizro_ai.plot(df, \"describe the composition of gdp in continent\")"
    ]
   },
@@ -124,7 +144,7 @@
    "id": "dbedf477-cefe-49fa-b675-ef661425c3d3",
    "metadata": {},
    "source": [
-    "## Upload from local"
+    "#### 1. Upload from local"
    ]
   },
   {
@@ -133,31 +153,54 @@
    "id": "dfd45d6e-e828-4f20-9afc-8a659a79b5d6",
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "from google.colab import files\n",
+    "\n",
+    "uploaded = files.upload()\n",
+    "\n",
+    "for fn in uploaded.keys():\n",
+    "    print('User uploaded file \"{name}\" with length {length} bytes'.format(\n",
+    "        name=fn, length=len(uploaded[fn])))"
+   ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "b4d83236-f584-4467-bcd3-30174d368e9d",
    "metadata": {},
    "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "markdown",
-   "id": "d61aa049-6785-4926-a543-bfa3cb68e65a",
-   "metadata": {},
    "source": [
-    "## Mount from Google Drive"
+    "import pandas as pd\n",
+    "\n",
+    "# Get the filename (assuming you uploaded only one file)\n",
+    "filename = next(iter(uploaded))\n",
+    "\n",
+    "# Read the CSV file into a pandas DataFrame\n",
+    "df_uploaded = pd.read_csv(filename)\n",
+    "\n",
+    "# Display the first few rows of the DataFrame\n",
+    "print(df_uploaded.head())"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "25f17884-333a-4584-a469-3d859bffdd53",
+   "id": "ec8612c7",
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "vizro_ai.plot(df_uploaded, \"<your plotting instruction on the uploaded dataframe>\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "d61aa049-6785-4926-a543-bfa3cb68e65a",
+   "metadata": {},
+   "source": [
+    "#### 2. Additional ways to connect to your data\n",
+    "\n",
+    "https://colab.research.google.com/notebooks/io.ipynb"
+   ]
   }
  ],
  "metadata": {