Update ipyvizzu_demo.ipynb

ipyvizzu_demo.ipynb

@@ -1,121 +1,90 @@
 {
  "cells": [
-  {
-   "cell_type": "raw",
-   "id": "41022af5",
-   "metadata": {},
-   "source": [
-    "---\n",
-    "title: ipyvizzu demo\n",
-    "description: ipyvizzu mercury demo\n",
-    "show-code: False\n",
-    "params:\n",
-    "params:\n",
-    "    gender:\n",
-    "        input: select\n",
-    "        label: select the gender\n",
-    "        choices: [male, female]\n",
-    "        multi: False\n",
-    "---"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "bf9e62cb",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# configure default value\n",
-    "\n",
-    "gender = 'male'\n"
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "1226e7e9",
+   "id": "e4ded5cf",
    "metadata": {},
    "outputs": [],
    "source": [
-    "# import pandas and ipyvizzu and initialize chart\n",
+    "# import pandas and ipyvizzu\n",
     "\n",
     "import pandas as pd\n",
-    "from ipyvizzu import Chart, Data, Config, Style\n",
+    "from ipyvizzu import Chart, Data, Config, Style, DisplayTarget\n",
+    "import mercury as mr\n",
     "\n",
     "\n",
-    "chart = Chart(width=\"640px\", height=\"360px\")\n",
-    "# chart = Chart(width=\"640px\", height=\"360px\", display=\"begin\")\n",
-    "# chart = Chart(width=\"640px\", height=\"360px\", display=\"actual\")  # default\n",
-    "# chart = Chart(width=\"640px\", height=\"360px\", display=\"end\")\n",
-    "# chart = Chart(width=\"640px\", height=\"360px\", display=\"manual\")\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "1a26e2e9",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# add data\n",
+    "# setup Mercury App\n",
+    "app = mr.App(\n",
+    "    title=\"Data animation\", description=\"Titanic data animation\"\n",
+    ")\n",
+    "\n",
+    "\n",
+    "# add widget\n",
+    "gender = mr.Select(\n",
+    "    label=\"Select sex\", value=\"female\", choices=[\"female\", \"male\"]\n",
+    ")\n",
+    "\n",
+    "\n",
+    "# initialize Chart\n",
+    "\n",
+    "chart = Chart(\n",
+    "    width=\"640px\", height=\"360px\"\n",
+    ")  # or Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.ACTUAL)\n",
+    "# chart = Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.BEGIN)\n",
+    "# chart = Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.END)\n",
+    "# chart = Chart(width=\"640px\", height=\"360px\", display=DisplayTarget.MANUAL)\n",
+    "\n",
+    "\n",
+    "# add data to Chart\n",
     "\n",
     "data = Data()\n",
-    "data_frame = pd.read_csv(\"https://ipyvizzu.vizzuhq.com/0.14/showcases/titanic/titanic.csv\")\n",
+    "data_frame = pd.read_csv(\n",
+    "    \"https://ipyvizzu.vizzuhq.com/latest/showcases/titanic/titanic.csv\"\n",
+    ")\n",
     "data.add_data_frame(data_frame)\n",
     "\n",
-    "chart.animate(data)\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "1ab7ece9",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# add config\n",
+    "chart.animate(data)\n",
     "\n",
-    "chart.animate(Config({\"x\": \"Count\", \"y\": \"Sex\", \"label\": \"Count\",\"title\":\"Passengers of the Titanic\"}))\n",
-    "chart.animate(Config({\"x\": [\"Count\",\"Survived\"], \"label\": [\"Count\",\"Survived\"], \"color\": \"Survived\"}))\n",
-    "chart.animate(Config({\"x\": \"Count\", \"y\": [\"Sex\",\"Survived\"]}))"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "9ab1ecf9",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# add style\n",
     "\n",
-    "chart.animate(Style({\"title\": {\"fontSize\": 35}}))\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "e4ded5cf",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# filter data by the selected gender\n",
+    "# add config to Chart\n",
     "\n",
-    "data_filter = Data.filter(f\"record['Sex'] == '{gender}'\")\n",
-    "chart.animate(data_filter)\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "e4ded5cf",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# display chart with show() method if display=\"manual\"\n",
+    "chart.animate(\n",
+    "    Config(\n",
+    "        {\n",
+    "            \"x\": \"Count\",\n",
+    "            \"y\": \"Sex\",\n",
+    "            \"label\": \"Count\",\n",
+    "            \"title\": \"Passengers of the Titanic\",\n",
+    "        }\n",
+    "    )\n",
+    ")\n",
+    "chart.animate(\n",
+    "    Config(\n",
+    "        {\n",
+    "            \"x\": [\"Count\", \"Survived\"],\n",
+    "            \"label\": [\"Count\", \"Survived\"],\n",
+    "            \"color\": \"Survived\",\n",
+    "        }\n",
+    "    )\n",
+    ")\n",
+    "chart.animate(Config({\"x\": \"Count\", \"y\": [\"Sex\", \"Survived\"]}))\n",
+    "\n",
+    "\n",
+    "# add style to Chart\n",
+    "\n",
+    "chart.animate(Style({\"title\": {\"fontSize\": 35}}))\n",
+    "\n",
+    "\n",
+    "# filter data by the selected gender to Chart\n",
+    "\n",
+    "data_filter = Data.filter(f\"record['Sex'] == '{gender.value}'\")\n",
+    "chart.animate(data_filter)\n",
+    "\n",
+    "\n",
+    "# display Chart with show method (display=DisplayTarget.MANUAL)\n",
     "\n",
-    "# chart.show()\n"
+    "# chart.show()"
    ]
   }
  ],