{
 "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",
   "metadata": {},
   "outputs": [],
   "source": [
    "# import pandas and ipyvizzu and initialize chart\n",
    "\n",
    "import pandas as pd\n",
    "from ipyvizzu import Chart, Data, Config, Style\n",
    "\n",
    "\n",
    "chart = Chart(width=\"640px\", height=\"360px\")\n",
    "chart.scroll_into_view = True\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",
    "\n",
    "data = Data()\n",
    "data_frame = pd.read_csv(\"https://github.com/vizzuhq/ipyvizzu/raw/main/docs/examples/stories/titanic/titanic.csv\")\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",
    "\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",
    "\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",
    "\n",
    "# chart.show()\n"
   ]
  }
 ],
 "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.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}