06b_Visualisations_interactives.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# La data visualisation avec Python\n",
    "\n",
    "## Les graphiques interactifs avec d’autres packages et outils\n",
    "\n",
    "### Création d’une visualisation avec Bokeh\n",
    "\n",
    "Il s’agit ici de construire une visualisation qui sera disponible au format html, codée\n",
    "en JavaScript grâce à BokehJS. Bokeh va générer ce fichier à partir de votre code en\n",
    "Python.\n",
    "\n",
    "Si nous nous intéressons aux données AirBnB :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/Users/ldocao/.pyenv/versions/3.8-dev/envs/python-gis/lib/python3.8/site-packages/IPython/core/interactiveshell.py:3062: DtypeWarning: Columns (43,61,62) have mixed types.Specify dtype option on import or set low_memory=False.\n",
      "  has_raised = await self.run_ast_nodes(code_ast.body, cell_name,\n"
     ]
    }
   ],
   "source": [
    "# on importe les données\n",
    "listing=pd.read_csv(\"./data/airbnb.csv\")\n",
    "listing[\"price\"]=pd.to_numeric(listing[\"price\"].str.replace(\"$\",\"\")\\\n",
    "                               .str.replace(\",\",\"\"))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.models import ColumnDataSource, HoverTool\n",
    "from bokeh.plotting import figure, show, output_file\n",
    "# on crée les données\n",
    "listing_chers = listing[listing[\"price\"]>1000][[\"price\",\"name\",\"room_type\",\"bedrooms\"]]\n",
    "# on définit le titre\n",
    "TITLE = \"Les logements les plus chers de Paris\"\n",
    "# on définit les outils que l’on veut afficher\n",
    "tools = \"pan, wheel_zoom, box_zoom, reset, save\".split(',')\n",
    "# on définit les informations devant apparaître lorsqu’on survole un point\n",
    "hover = HoverTool(tooltips=[(\"Price\", \"@price\"),\n",
    "                            (\"Description:\", \"@name\"),\n",
    "                            (\"Type de logement:\", \"@room_type\"),\n",
    "                            (\"Nombre de chambres:\",\"@bedrooms\")\n",
    "                           ])\n",
    "tools.append(hover)\n",
    "# on crée le graphique et on définit les axes\n",
    "p = figure(tools=tools, toolbar_location=\"above\",  plot_width=1200, title=TITLE)\n",
    "p.xaxis.axis_label = \"Prix\"\n",
    "p.yaxis.axis_label = \"Nombre de chambres\"\n",
    "\n",
    "# on définit les données (un dictionnaire est attendu mais un DataFrame fonctionne)\n",
    "source = ColumnDataSource(listing_chers)\n",
    "\n",
    "# on ajoute les points sous forme de cercles\n",
    "p.circle(\"price\", \"bedrooms\", size=5, source=source,\n",
    "line_color=\"black\", fill_alpha=0.8)\n",
    "\n",
    "# on sauvegarde le fichier html\n",
    "output_file(\"logements-bokeh.html\", title=\"AirBnB à Paris\")\n",
    "\n",
    "# on ouvre un onglet du navigateur pour afficher le résultat\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "On a donc extrait un DataFrame avec les logements à plus de 1000 euros et on\n",
    "les a représentés dans un graphique interactif.\n",
    "\n",
    "Les graphiques Bokeh peuvent ensuite très facilement s’intégrer dans des pages\n",
    "web plus évoluées notamment grâce à l’environnement web Flask de Python."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Création d’une application web avec Bokeh\n",
    "\n",
    "La représentation précédente permet de visualiser des données, mais celles-ci sont figées et stockées dans le fichier html créé. Bien souvent, on voudra aller plus loin et créer une application interactive sur les données.\n",
    "\n",
    "Pour cela, on va utiliser Bokeh et on va concevoir un fichier Python avec l’extension .py qui va inclure notre application. La partie application basée sur un serveur de Bokeh se base sur un environnement web nommé Tornado.\n",
    "\n",
    "La documentation de Bokeh comprend de nombreuses informations :\n",
    "https://bokeh.pydata.org/en/latest/\n",
    "\n",
    "L’exemple donné ici est un exemple simple avec lancement de l’application en\n",
    "local. Nous allons donc créer un fichier appli.py, et une fois ce fichier complété, nous pourrons l’utiliser pour lancer notre application avec Bokeh.\n",
    "Le code est dans un seul fichier avec la forme suivante :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "BokehDeprecationWarning: 'WidgetBox' is deprecated and will be removed in Bokeh 3.0, use 'bokeh.models.Column' instead\n"
     ]
    }
   ],
   "source": [
    "import pandas as pd\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.layouts import layout, widgetbox\n",
    "from bokeh.models import ColumnDataSource, Div, HoverTool\n",
    "from bokeh.models.widgets import Select\n",
    "from bokeh.io import curdoc\n",
    "\n",
    "# Récupération et préparation des données\n",
    "# (on extrait uniquement les logements avec plus de 20 commentaires)\n",
    "listing=pd.read_csv(\"./data/airbnb.csv\", low_memory=False)\n",
    "listing_chers = listing[listing[\"number_of_reviews\"]>20]\\\n",
    "[[\"host_is_superhost\",\"number_of_reviews\", \"price\",\"name\",\"room_type\",\n",
    "  \"bedrooms\",\"review_scores_rating\"]]\n",
    "\n",
    "# Définition des widgets (un outil de sélection en fonction de la colonne\n",
    "# superhost)\n",
    "superhost = Select(title=\"Super-host\", value=\"All\", options=[\"Vrai\",\"Faux\"])\n",
    "\n",
    "# Définition de la source de données. Elle est vide et utilise un dictionnaire\n",
    "source = ColumnDataSource(data=dict(nb_com=[], note_com=[], type_chambre=[],\n",
    "                                    name=[], price=[]))\n",
    "# Définition des informations à afficher lorsqu’on passe sur un point\n",
    "TOOLTIPS=HoverTool(tooltips=[\n",
    "    (\"Nom\", \"@name\"),\n",
    "    (\"Prix\", \"@price\"),\n",
    "    (\"Nombre de commentaires\", \"@nb_com\"),\n",
    "    (\"Note moyenne\", \"@note_com\"),\n",
    "    (\"Type logement\", \"@type_chambre\")\n",
    "])\n",
    "\n",
    "# construction de la figure et ajout des points à partir des données\n",
    "p = figure(plot_height=600, plot_width=700,\n",
    "           title=\"\", toolbar_location=None, tools=[TOOLTIPS])\n",
    "p.circle(x=\"nb_com\", y=\"note_com\", source=source, size=2)\n",
    "\n",
    "# définition d’une fonction de mise à jour des données\n",
    "def update() :\n",
    "    if superhost.value == \"Vrai\":\n",
    "        super_h=\"t\"\n",
    "    else:\n",
    "        super_h=\"f\"\n",
    "\n",
    "    listing2=listing_chers[listing_chers[\"host_is_superhost\"]==super_h]\n",
    "    p.xaxis.axis_label = \"Nombre de commentaires\"\n",
    "    p.yaxis.axis_label = \"Note moyenne\"\n",
    "    # mise à jour des données\n",
    "    source.data = dict(nb_com=listing2[\"number_of_reviews\"],\n",
    "                       note_com=listing2[\"review_scores_rating\"],\n",
    "                       type_chambre = listing2[\"room_type\"],\n",
    "                       name=listing2[\"name\"],\n",
    "                       price=listing2[\"price\"]\n",
    "                      )\n",
    "# gestion des contrôles pour la mise à jour\n",
    "# (on en a un seul dans notre cas Select)\n",
    "controls = [superhost]\n",
    "for control in controls:\n",
    "    control.on_change('value', lambda attr, old, new: update())\n",
    "\n",
    "# construction du layout pour l’affichage\n",
    "inputs = widgetbox(*controls, sizing_mode=\"fixed\")\n",
    "l = layout([inputs, p], sizing_mode=\"fixed\")\n",
    "\n",
    "# premier chargement des données\n",
    "update()\n",
    "\n",
    "# utilisation de curdoc() pour générer la dataviz\n",
    "curdoc().add_root(l)\n",
    "curdoc().title = \"AirBnB\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Nous utilisons dans l’invite de commandes générale, ou dans celle d’Anaconda, la\n",
    "commande suivante :"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "bokeh serve appli.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "L’application est donc lancée sur le serveur Bokeh en local et vous pouvez y accéder en utilisant le lien : \n",
    "\n",
    "http://localhost:5006/appli\n",
    "\n",
    "Cette application web permet de croiser le nombre de commentaires et l’évaluation moyenne des logements. Une liste déroulante offre la possibilité d’afficher les logements ayant le label super-host ou non. Par ailleurs, lorsqu’on passe sur chaque point les caractéristiques du logement apparaissent."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Le package **Dash** offre une solution alternative récente qui vous permet de construire des applications web en utilisant l’environnement de Plotly. Bokeh et Dash sont aujourd’hui des solutions en pleine évolution."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.2+"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}