Visual Data Stories with Snowflake Notebooks/Visual Data Stories with Snowflake Notebooks.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "60aa4826-ef81-4217-9dbd-336397e056c0",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell1"
   },
   "source": [
    "# Visual Data Stories with Snowflake Notebooks\n",
    "\n",
    "In this tutorial, we will walk you through the different ways you can enrich your data narrative through engaging visuals in Snowflake Notebooks. We will demonstrate how you can develop visualizations, work with Markdown text, embed images, and build awesome data apps all within your notebook, alongside your code and data.\n",
    "\n",
    "**Requirements:** Please add the `matplotlib` and `plotly` package from the package picker on the top right. We will be using these packages in the notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "7e1072e0-562d-4584-92f9-988e3d0e7465",
   "metadata": {
    "codeCollapsed": false,
    "language": "python",
    "name": "cell2"
   },
   "outputs": [],
   "source": [
    "# Import python packages\n",
    "import streamlit as st\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "27269da4-823f-4a23-8324-5ccd5db61720",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell3"
   },
   "source": [
    "## Data visualizations 📊\n",
    "\n",
    "With Snowflake Notebook, you can use your favorite Python visualization library, including matplotlib and plotly, to develop your visualization.\n",
    "\n",
    "First, let's generate some toy data for the Iris dataset."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3775908f-ca36-4846-8f38-5adca39217f2",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell4"
   },
   "outputs": [],
   "source": [
    "# Sample data\n",
    "species = [\"setosa\"] * 3 + [\"versicolor\"] * 3 + [\"virginica\"] * 3\n",
    "measurements = [\"sepal_length\", \"sepal_width\", \"petal_length\"] * 3\n",
    "values = [5.1, 3.5, 1.4, 6.2, 2.9, 4.3, 7.3, 3.0, 6.3]\n",
    "df = pd.DataFrame({\"species\": species,\"measurement\": measurements,\"value\": values})\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a09c95f7-fa25-438b-b470-ac8fada5f81b",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell5"
   },
   "source": [
    "## Plotting with Altair\n",
    "\n",
    "Now let's plot a bar chart in Altair. You can learn more about Altair [here](https://altair-viz.github.io/)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c695373e-ac74-4b62-a1f1-08206cbd5c81",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell6"
   },
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "alt.Chart(df).mark_bar().encode(\n",
    "    x= alt.X(\"measurement\", axis = alt.Axis(labelAngle=0)),\n",
    "    y=\"value\",\n",
    "    color=\"species\"\n",
    ").properties(\n",
    "    width=700,\n",
    "    height=500\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c9d4c99b-ede6-4479-8d32-6e09b6f71d25",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell7"
   },
   "source": [
    "## Plotting with Matplotlib\n",
    "\n",
    "Let's do the same with matplotlib. Note how convenient it is to do `df.plot` with your dataframe with pandas. This uses matplotlib underneath the hood to generate the plots. You can learn more about pandas's [pd.DataFrame.plot](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.plot.html) and about matplotlib [here](https://matplotlib.org/)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "43c32c25-81a4-419f-b608-cdf47622a779",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell8"
   },
   "source": [
    "First, let's pivot our data so that our data is stacked."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "b6116057-246f-40cd-826a-a9248bf964e4",
   "metadata": {
    "codeCollapsed": false,
    "language": "python",
    "name": "cell9"
   },
   "outputs": [],
   "source": [
    "pivot_df = pd.pivot_table(data=df, index=['measurement'], columns=['species'], values='value')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "42a4631e-c732-4057-b17a-ac49774c2e99",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell10"
   },
   "source": [
    "We build a quick Streamlit app to visualize the pivot operation. (Don't worry we will discuss what the `st.` Streamlit  commands mean later in the tutorial!)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8a710644-5e81-465c-8e58-8a8b00c3fa09",
   "metadata": {
    "codeCollapsed": false,
    "language": "python",
    "name": "cell11"
   },
   "outputs": [],
   "source": [
    "col1, col2 = st.columns(2)\n",
    "with col1: \n",
    "    st.markdown(\"Old Dataframe\")\n",
    "    st.dataframe(df)    \n",
    "with col2:\n",
    "    st.markdown(\"Pivoted Dataframe\")\n",
    "    st.dataframe(pivot_df)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5fd5e631-a64e-4863-bc7d-414dad84cb06",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell12"
   },
   "source": [
    "Now let's use matplotlib to plot the stacked bar chart."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "31bc1cc5-f8fd-48e5-a736-a3b6bad7f5cc",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell13"
   },
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "ax = pivot_df.plot.bar(stacked=True)\n",
    "_ = ax.set_xticklabels(list(pivot_df.index), rotation=0)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e422914e-f52d-40d9-ae08-cbe4dc651c90",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell14"
   },
   "source": [
    "## Plotting with Plotly\n",
    "\n",
    "Finally, let's do the same plot with plotly. Learn more about plotly [here](https://plotly.com/python/plotly-express/)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9fa98ac8-0731-4076-b575-4f79f2204f28",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell15"
   },
   "outputs": [],
   "source": [
    "import plotly.express as px\n",
    "px.bar(df, x='measurement', y='value', color='species')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8105c206-febd-48c6-a2e2-88881894a8d6",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell16"
   },
   "source": [
    "## Develop your narrative with Markdown cells\n",
    "\n",
    "With Snowflake Notebooks, you can leverage Markdown language to develop rich text displays with formatting. \n",
    "\n",
    "You can change a cell type to render Markdown by clicking on the dropdown on the top left to select `Markdown` (or use `m` as the hotkey to convert a cell type to Markdown)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "629ff770-3d1c-46a2-ac4b-299b0e4663c9",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell17"
   },
   "source": [
    "# Top-level Header \n",
    "Markdown: `# Top-level Header`\n",
    "\n",
    "## 2nd-level Header \n",
    "Markdown: `## 2nd-level Header`\n",
    "\n",
    "### 3rd-level Header \n",
    "Markdown: `### 3rd-level Header`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "640931e5-d7c7-44d4-a311-155abf60af4e",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell18"
   },
   "source": [
    "### Inline Text Formatting\n",
    "\n",
    "Here is some *italicized text* and **bolded text**. \n",
    "\n",
    "Markdown: `Here is some *italicized text* and **bolded text**.`\n",
    "\n",
    "Here is a link to the [Snowflake website](https://snowflake.com/)\n",
    "\n",
    "Markdown: `Here is a link to the [Snowflake website](https://snowflake.com/)`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7bc5008a-aebb-45a2-9852-aec6142e335a",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell19"
   },
   "source": [
    "From here on, you can double click onto each Markdown cell to take a look at the underlying Markdown content.\n",
    "\n",
    "Here is a bulleted list (with emojis 😊)\n",
    "\n",
    "- ❄️\n",
    "- ❄️❄️\n",
    "- ❄️❄️❄️\n",
    "    - Nested ❄️\n",
    "    - Nested ❄️❄️"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8e969fb2-d46a-4ce6-9fa5-4032c5fa7de5",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell20"
   },
   "source": [
    "## Formatting code\n",
    "\n",
    "Python: \n",
    "```python\n",
    "import pandas as pd\n",
    "df = pd.DataFrame([1,2,3])\n",
    "```\n",
    "\n",
    "SQL: \n",
    "```sql\n",
    "SELECT * FROM MYTABLE\n",
    "```\n",
    "\n",
    "Inline Code formatting: \n",
    "\n",
    "My data is stored in `DB.SCHEMA`. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ca69a287-6866-4fa9-b610-ec9b8e28b9ba",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell21"
   },
   "source": [
    "## Embedding Images 🖼️\n",
    "\n",
    "\n",
    "You can use the Markdown Syntax to embed images in your notebook.\n",
    "```\n",
    "![](https://www.snowflake.com/wp-content/themes/snowflake/assets/img/brand-guidelines/logo-sno-blue-example.svg)\n",
    "```\n",
    "![](https://www.snowflake.com/wp-content/themes/snowflake/assets/img/brand-guidelines/logo-sno-blue-example.svg)\n",
    "\n",
    "\n",
    "It even works with a GIF animation!\n",
    "\n",
    "```\n",
    "![](https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif)\n",
    "```\n",
    "![](https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "37bbb377-515d-4559-beb0-7450d9c33828",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell22"
   },
   "source": [
    "## Bring your Notebook alive with Streamlit\n",
    "\n",
    "You can bring your data narrative alive in notebooks and make it even more interactive by using Streamlit.\n",
    "\n",
    "[Streamlit](https://streamlit.io/) is an open-source framework for building interactive data apps in Python (not a single line of HTML or Javascript required!)\n",
    "\n",
    "Unlike in other notebooks where you need to navigate to a separate terminal window to serve up your Streamlit app, you can test and develop your Streamlit app directly in your notebook. \n",
    "\n",
    "We saw how you can embed images using Markdown. Here we show how you can embed images in your notebook using Streamlit which gives you more image customization options."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "57910a57-50b2-4e40-ae30-5cd123bf65c3",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell23"
   },
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "st.image(\"https://www.snowflake.com/wp-content/themes/snowflake/assets/img/brand-guidelines/logo-sno-blue-example.svg\",width=500)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "08bf80ac-bc12-4e41-8079-cfff2ce29e7d",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell24"
   },
   "outputs": [],
   "source": [
    "# Also works with a GIF animation!\n",
    "st.image(\"https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif\", caption=\"Rotating Earth!\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c3bd5c15-eca9-4ba5-a4b4-06a280b2f992",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell25"
   },
   "source": [
    "Let's say you have some images in your Snowflake stage, you can stream in the image file and display it with Streamlit."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "317e0475-7e55-449b-89dc-a2057f1bf90a",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "sql",
    "name": "cell26"
   },
   "outputs": [],
   "source": [
    "LS @IMAGE_STAGE;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "57bc8d6a-c5d3-48f2-a835-8ca8f15602be",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell27"
   },
   "outputs": [],
   "source": [
    "from snowflake.snowpark.context import get_active_session\n",
    "session = get_active_session()\n",
    "# Add a query tag to the session. This helps with troubleshooting and performance monitoring.\n",
    "session.query_tag = {\"origin\":\"sf_sit-is\", \n",
    "                     \"name\":\"notebook_demo_pack\", \n",
    "                     \"version\":{\"major\":1, \"minor\":0},\n",
    "                     \"attributes\":{\"is_quickstart\":1, \"source\":\"notebook\", \"vignette\":\"visual_data_stories\"}}\n",
    "image=session.file.get_stream(\"@IMAGE_STAGE/snowflake-logo.png\", decompress=False).read() \n",
    "st.image(image)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "941238e2-3632-49c3-a76c-d1d22345688c",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell28"
   },
   "source": [
    "## Interactive data apps 🕹️\n",
    "\n",
    "Think of each cell in your Snowflake Notebook as a mini Streamlit app. As you interact with your data app, the relevant cells will get re-executed and the results in your app updates.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "aca7e5b1-78a5-4799-bc9a-af44c777a333",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell29"
   },
   "outputs": [],
   "source": [
    "st.markdown(\"\"\"# Interactive Filtering with Streamlit! :balloon: \n",
    "Values will automatically cascade down the notebook cells\"\"\")\n",
    "value = st.slider(\"Move the slider to change the filter value 👇\", df.value.min(), df.value.max(), df.value.mean(), step = 0.3 )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1f39f7e7-f7ac-4da4-afea-609b2f3e30af",
   "metadata": {
    "codeCollapsed": false,
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "language": "python",
    "name": "cell30"
   },
   "outputs": [],
   "source": [
    "# Filter the table from above using the Streamlit slider\n",
    "df[df[\"value\"]>value].sort_values(\"value\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "833d0b00-65e1-4606-8e09-47e687949e8f",
   "metadata": {
    "codeCollapsed": false,
    "language": "python",
    "name": "cell31"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_bar().encode(\n",
    "    x= alt.X(\"measurement\", axis = alt.Axis(labelAngle=0)),\n",
    "    y=\"value\",\n",
    "    color=\"species\"\n",
    ").properties(width=500,height=300)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4c568906-1bfe-4f9c-9d39-eed4c80ccb9d",
   "metadata": {
    "collapsed": false,
    "jupyter": {
     "outputs_hidden": false
    },
    "name": "cell32"
   },
   "source": [
    "# Now it's your turn! 🙌 \n",
    "\n",
    "Try out Notebooks yourself to build your own data narrative!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}