La bibliothèque de visualisation Python open source Bokeh aide les développeurs à créer des visuels de navigateur Web. Vous pouvez créer des graphiques pour les applications Web sans coder de code JavaScript , comme vous auriez besoin de le faire pour utiliser des bibliothèques telles que d3.js et plotly.
Bokeh peut créer de nombreuses visualisations courantes et personnalisées en utilisant uniquement Python, comme ce graphique à barres que nous allons créer dans ce didacticiel :
Utilisons le framework Web Bottle avec Bokeh pour créer des graphiques à barres d'application Web Python personnalisés.
Nos outils
Ce tutoriel fonctionne avec Python 2 ou 3, mais Python 3 est fortement recommandé pour les nouvelles applications. J'ai utilisé Python 3.6.2 lors de la rédaction de cet article. En plus de Python tout au long de ce didacticiel, nous utiliserons également les dépendances d'application suivantes :
- Framework Web de la bouteille, version 0.12.13
- Bibliothèque de visualisation de données bokeh, version 0.12.6
- structures de données pandas et bibliothèque d'analyse, version 0.20.3
- pip et virtualenv, qui sont fournis avec Python 3, pour installer et isoler les bibliothèques Bottle, Bokeh et pandas des autres projets Python sur lesquels vous travaillez
Si vous avez besoin d'aide pour configurer votre environnement de développement avant d'exécuter ce code, consultez ce guide pour configurer Python 3 et Bottle sur Ubuntu 16.04 LTS.
Tout le code de cet article de blog est disponible en open source sous la licence MIT sur GitHub sous le répertoire bar-charts-bokeh-bottle-python-3 du référentiel blog-code-examples. Utilisez le code source comme vous le souhaitez pour vos propres projets.
Installer Bouteille et Bokeh
Créez un nouvel environnement virtuel pour ce projet afin d'isoler nos dépendances à l'aide de la commande suivante dans le terminal. J'exécute généralement la commande venv dans un venvs séparé répertoire où tous mes virtualenvsare stockent.
python3 -m venv bottlechart
Activez l'environnement virtuel.
source bottlechart/bin/activate
L'invite de commande changera après l'activation de virtualenv :
Gardez à l'esprit que vous devez activer le virtualenv dans chaque nouvelle fenêtre de terminal où vous souhaitez utiliser le virtualenv pour exécuter le projet.
Bokeh et Bottle peuvent être installés dans le pip virtualenvusing maintenant activé. Exécutez cette commande pour obtenir les versions Bokeh et Bottle appropriées.
pip install bokeh==0.12.6 bottle==0.12.13 pandas==0.20.3
Nos dépendances requises seront installées dans notre environnement virtuel après une brève période de téléchargement et d'installation.
Installing collected packages: bottle, six, chardet, certifi, idna, urllib3, requests, PyYAML, python-dateutil, MarkupSafe, Jinja2, numpy, tornado, bkcharts, bokeh, pytz, pandas Running setup.py install for bottle ... done Running setup.py install for PyYAML ... done Running setup.py install for MarkupSafe ... done Running setup.py install for tornado ... done Running setup.py install for bkcharts ... done Running setup.py install for bokeh ... done Successfully installed Jinja2-2.9.6 MarkupSafe-1.0 PyYAML-3.12 bkcharts-0.2 bokeh-0.12.6 bottle-0.12.13 certifi-2017.7.27.1 chardet-3.0.4 idna-2.5 numpy-1.13.1 pandas-0.20.3 python-dateutil-2.6.1 pytz-2017.2 requests-2.18.2 six-1.10.0 tornado-4.5.1 urllib3-1.22
Nous pouvons maintenant commencer à coder notre application Web.
Construire l'application Bouteille
Nous allons d'abord coder une application Bottle de base, puis nous ajouterons les graphiques à barres à la page rendue.
Créez un dossier pour votre projet nommé bottle-bokeh-charts . Dans les bottle-bokeh-charts créer un nouveau fichier nommé app.py avec le code suivant :
import os
import bottle
from bottle import route, run, template
app = bottle.default_app()
TEMPLATE_STRING = """
<html>
<head>
<title>Bar charts with Bottle and Bokeh</title>
</head>
<body>
<h1>Bugs found over the past {{ bars_count }} days</h1>
</body>
</html>
"""
@route('/<num_bars:int>/')
def chart(num_bars):
"""Returns a simple template stating the number of bars that should
be generated when the rest of the function is complete.
"""
if num_bars <= 0:
num_bars = 1
return template(TEMPLATE_STRING, bars_count=num_bars)
if __name__ == '__main__':
run(host='127.0.0.1', port=8000, debug=False, reloader=True)
Le code présenté ci-dessus fournit une application Bottle courte avec une seule route, définie avec le chart fonction. chart reçoit une valeur entière arbitraire en entrée. Le template fonction dans chart utilise le modèle HTML défini dans TEMPLATE_STRING pour rendre une page HTML en réponse aux requêtes entrantes.
Les deux dernières lignes du nous permettent d'exécuter l'application Bottle en mode débogage sur le port 8000.N'utilisez jamais le mode débogage pour les déploiements en production ! Les serveurs WSGI comme Gunicorn sont conçus pour gérer le trafic réel et seront plus faciles à configurer sans failles de sécurité majeures.
Nous pouvons maintenant tester notre application.
Assurez-vous que votre virtualenv est toujours activé et que vous êtes dans le répertoire de base de votre projet où app.py est situé. Exécutez app.py en utilisant le python commande.
(bottlechart)$ python app.py
Accédez à localhost:8000/16/ dans votre navigateur Web. Vous devriez voir un message d'en-tête indiquant le nombre de bogues trouvés au cours des 16 derniers jours. Cependant, il n'y a pas encore de graphique à barres pour accompagner ce message.
Notre itinéraire de bouteille unique est en place mais ce n'est pas très excitant. Il est temps de créer un joli graphique à barres.
Créer un graphique à barres avec Bokeh
Nous nous appuierons sur notre base d'application Bottle de base en utilisant un nouveau code Python pour engager la bibliothèque Bokeh.
Ouvrez app.py sauvegarder et ajouter les lignes d'importation en surbrillance suivantes.
import os
import bottle
import random
from bokeh.models import (HoverTool, FactorRange, Plot, LinearAxis, Grid,
Range1d)
from bokeh.models.glyphs import VBar
from bokeh.plotting import figure
from bokeh.charts import Bar
from bokeh.embed import components
from bokeh.models.sources import ColumnDataSource
from bottle import route, run, template
Le reste de notre application utilisera ces importations pour générer des données aléatoires et le graphique à barres.
Notre graphique à barres contiendra des "bugs logiciels trouvés" pour son thème. Les données seront générées de manière aléatoire chaque fois que la page est générée. Dans une application réelle, vous auriez bien sûr probablement une source de données plus stable et plus utile.
Continuer à modifier app.py donc la section après les importations ressemble au code suivant.
app = bottle.default_app()
TEMPLATE_STRING = """
<html>
<head>
<title>Bar charts with Bottle and Bokeh</title>
<link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.css"
rel="stylesheet">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.6.min.css"
rel="stylesheet">
</head>
<body>
<h1>Bugs found over the past {{ bars_count }} days</h1>
{{ !the_div }}
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.6.min.js"></script>
{{ !the_script }}
</body>
</html>
"""
@route('/<num_bars:int>/')
def chart(num_bars):
"""Returns a simple template stating the number of bars that should
be generated when the rest of the function is complete.
"""
if num_bars <= 0:
num_bars = 1
data = {"days": [], "bugs": [], "costs": []}
for i in range(1, num_bars + 1):
data['days'].append(i)
data['bugs'].append(random.randint(1,100))
data['costs'].append(random.uniform(1.00, 1000.00))
hover = create_hover_tool()
plot = create_bar_chart(data, "Bugs found per day", "days",
"bugs", hover)
script, div = components(plot)
return template(TEMPLATE_STRING, bars_count=num_bars,
the_div=div, the_script=script)
Le chart La fonction gagne trois nouvelles listes qui sont générées aléatoirement par le module random super pratique de Python 3.
chart appelle deux fonctions, create_hover_tool et create_bar_chart .Nous n'avons pas encore écrit ces fonctions, alors faisons-le maintenant. Ajoutez ces deux nouvelles fonctions sous le chart fonction, mais avant le if __name__ == '__main__': ligne.
def create_hover_tool():
# we'll code this function in a moment
return None
def create_bar_chart(data, title, x_name, y_name, hover_tool=None,
width=1200, height=300):
"""Creates a bar chart plot with the exact styling for the centcom
dashboard. Pass in data as a dictionary, desired plot title,
name of x axis, y axis and the hover tool HTML.
"""
source = ColumnDataSource(data)
xdr = FactorRange(factors=data[x_name])
ydr = Range1d(start=0,end=max(data[y_name])*1.5)
tools = []
if hover_tool:
tools = [hover_tool,]
plot = figure(title=title, x_range=xdr, y_range=ydr, plot_width=width,
plot_height=height, h_symmetry=False, v_symmetry=False,
min_border=10, toolbar_location="above", tools=tools,
responsive=True, outline_line_color="#666666")
glyph = VBar(x=x_name, top=y_name, bottom=0, width=.8,
fill_color="#6599ed")
plot.add_glyph(source, glyph)
xaxis = LinearAxis()
yaxis = LinearAxis()
plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))
plot.toolbar.logo = None
plot.min_border_top = 0
plot.xgrid.grid_line_color = None
plot.ygrid.grid_line_color = "#999999"
plot.yaxis.axis_label = "Bugs found"
plot.ygrid.grid_line_alpha = 0.1
plot.xaxis.axis_label = "Days after app deployment"
plot.xaxis.major_label_orientation = 1
return plot
C'est beaucoup de nouveau code. Le create_hover_tool la fonction ne fait rien d'autre que de retourner. None , qui est utilisé lorsqu'aucun outil de survol n'est souhaité pour le graphique.
Dans le create_bar_chart fonction que nous prenons dans notre source de données générée aléatoirement et la convertissons en un ColumnDataSource objet qui est un type d'objet d'entrée que nous pouvons transmettre aux fonctions Bokeh. Nous spécifions deux plages pour les axes x et y du graphique.
Le tools la liste restera vide car nous n'avons pas encore d'outil de survol. Une grande partie de la magie se produit dans les lignes où nous créons plot en utilisant le figure fonction. Nous spécifions tous les paramètres que nous voulons que notre graphique ait tels que la taille, la barre d'outils, les bordures et si le graphique doit ou non être réactif lors du changement de la taille du navigateur Web.
Le VBar l'objet crée des barres verticales pour les ajouter au tracé avec le add_glyph fonction.
Les dernières lignes de la fonction modifient l'apparence du graphique. Par exemple, nous avons supprimé le Bokeh logo en spécifiant plot.toolbar.logo = None et ajouté des étiquettes aux deux axes. Je vous recommande de garder la documentation de bokeh.plotting ouverte afin que vous sachiez quelles sont vos options pour personnaliser les graphiques et les visualisations.
Testons notre application en essayant un graphique à 6 barres. L'application Bottle doit se recharger automatiquement lorsque vous enregistrez app.py avec le nouveau code. Si vous arrêtez le serveur de développement, redémarrez-le en utilisant python app.py .
Lorsque vous démarrez le serveur de développement, vous recevez l'avertissement suivant car nous utilisons la dernière version (au moment de la rédaction de cet article) 0.12.6Bokeh.
/Users/matt/Envs/bottlechart/lib/python3.6/site-packages/bokeh/util/deprecation.py:34: BokehDeprecationWarning: The bokeh.charts API has moved to a separate 'bkcharts' package. This compatibility shim will remain until Bokeh 1.0 is released. After that, if you want to use this API you will have to install the bkcharts package explicitly.
Eventuellement un bkcharts séparé projet sera nécessaire mais pour l'instant nous pouvons garder notre code tel quel.
Ouvrez votre navigateur sur localhost :8000/6/.
Celui-ci a l'air un peu clairsemé, nous pouvons donc l'augmenter de 3x à 18 bars en allant sur localhost:5000/18/.
Maintenant encore 5x à 90 bars avec localhost :5000/90/.
Ça a l'air bien jusqu'à présent ! Qu'en est-il de cet outil de survol que nous avons ignoré ? Nous pouvons ajouter l'outil de survol avec seulement quelques lignes de code supplémentaires dans le create_hover_tool fonction.
Créer un outil de survol
Ajoutez ces lignes en surbrillance à app.py dans le create_hover_tool fonction.
def create_hover_tool():
"""Generates the HTML for the Bokeh's hover data tool on our graph."""
hover_html = """
<div>
<span class="hover-tooltip">$x</span>
</div>
<div>
<span class="hover-tooltip">@bugs bugs</span>
</div>
<div>
<span class="hover-tooltip">[email protected]{0.00}</span>
</div>
"""
return HoverTool(tooltips=hover_html)
L'intégration de HTML dans votre application Python n'est généralement pas une bonne idée, mais cela fonctionne pour de petits extraits comme cet outil de survol. L'outil de survol utilise $x pour afficher l'axe x de la barre, @bugs pour afficher le champ "bugs" de notre source de données, et [email protected]{0.00} pour afficher le champ "coûts" sous la forme d'un montant en dollars avec exactement 2 décimales.
Assurez-vous d'avoir changé return None àreturn HoverTool(tooltips=hover_html) dans votre fonction afin que les résultats du nouveau code soient reflétés dans le graphique actualisé.
Retournez dans le navigateur et rechargez la page localhost:8000/122/.
Bien fait! Essayez de jouer avec le nombre de barres dans l'URL et la taille de la fenêtre pour voir à quoi ressemble le graphique dans différentes conditions.
Le graphique est encombré de plus de 100. Cependant, vous pouvez essayer de créer autant de barres que vous le souhaitez si votre ordinateur peut gérer le rendu.
Vous devrez peut-être faire un peu plus de travail pour que le graphique soit utile pour afficher plus de quelques centaines de barres à la fois.
Et maintenant ?
Nous avons créé un joli petit graphique à barres configurable à l'aide de la bibliothèque de codes Bokeh.
Ensuite, vous pouvez modifier la source de données d'entrée, travailler avec d'autres types de graphiques ou modifier le jeu de couleurs du graphique.
Il y a bien plus que ce que Bokeh peut faire. Consultez la documentation officielle du projet, le référentiel GitHub, la page Full Stack Python Bokeh ou consultez d'autres rubriques sur Full Stack Python.
Des questions? Faites-le moi savoir via un ticket de problème GitHub sur le référentiel Full Stack Python, sur Twitter@fullstackpythonou @mattmakai.
Voyez-vous quelque chose de mal dans cet article de blog? La source de cette page sur GitHuband soumet une demande d'extraction avec un correctif.
