Graphiques élevés dans le notebook Jupyter

Qu'est-ce que Highcharts

Une bibliothèque de visualisation qui s'exécute sur Javascript. Il a les fonctions / caractéristiques suivantes.

• JavaScript pur Aucun plug-in requis, juste deux fichiers JS
• Différents types de graphiques
• Graphique linéaire
• Courbe spline
• Graphique d'avion
• Spline de zone
• Graphique à barres horizontales
• Graphique à colonnes
• Nuage de points
• OHLC
• Pied de bougie
• Gamme de zone
• Plage de spline de zone
• Sélecteur de gamme
• Afficher rapidement les données de séries chronologiques
• Sélectionnez la plage horaire 1 mois, 1 an, désignation de la date
• Tableau de plage de temps de zoom
• Étiquette de pointe d'outil
• Afficher des informations sur les séries de données et les points dans le texte de l'infobulle
• Déplacez la souris sur le graphique pour voir les info-bulles
• Exporter et imprimer Cliquez sur le bouton * pour exporter dans le format spécifié PNG、JPG、PDF、SVG
• Imprimez des graphiques directement à partir de pages Web

C'est très sophistiqué, mais il y a des frais pour une utilisation commerciale.

Pourquoi Highcharts?

beau

Comme vous pouvez le voir sur l'exemple sur le Site officiel, vous pouvez dessiner un graphique beau et cool sans aucune ingéniosité.

Lumière

C'est explosif. À titre d'exemple, dessinons un diagramme de dispersion dans lequel 1000 points, comme indiqué ci-dessous, sont codés par couleur en 7 groupes.

import numpy as np
import pandas as pd

num = 1000
x, y = np.random.random((2, num))
labels = np.random.choice(['a', 'b', 'c', 'e', 'f', 'g', 'h'], num)
df = pd.DataFrame(dict(x=x, y=y, label=labels))

Comparons-le avec les trois bibliothèques typiques suivantes.

1. Matplotlib
2. Bokeh
3. Plotly

Matplotlib

import matplotlib.pyplot as plt
groups = df.groupby('label')
colors = 'bgrcmyk'
for i, (name, group) in enumerate(groups):
    plt.scatter(group.x, group.y, color=colors[i])

Bokeh

from bokeh.charts import Scatter, output_notebook, show
output_notebook()
show(Scatter(x='x', y='y', color='label', data=df))

Plotly

from plotly.offline import init_notebook_mode, iplot
init_notebook_mode()
groups = df.groupby('label')
data = [{'x': group.x, 'y': group.y, 'mode': 'markers', 'name': name} for name, group in groups]
fig = {'data': data}
iplot(fig)

Highcharts

from highcharts import Highchart

groups = df.groupby('label')
options = {
    'chart': {
        'type': 'scatter',
    },
}
H = Highchart()
H.set_dict_options(options)
for name, group in groups:
    data = list(zip(group.x, group.y))
    H.add_data_set(data, 'scatter', name)
H

Le résultat ressemble à ceci.

Y compris l'importation (initialisation)

import (initialisation) non inclus

Il y a plusieurs raisons possibles, mais c'est léger.

%% html implémenté avec magie

Highcharts est une bibliothèque JavaScript, vous devrez donc faire quelques astuces pour l'utiliser avec votre notebook Jupyter. Il existe un moyen d'utiliser un moteur de template, etc., mais à titre d'exemple simple, utilisons %% html magic.

from IPython.display import HTML

%%html
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="width:300px; height:200px;"></div>
    <script>
        plot = function () { 
            $('#container').highcharts({
                chart: {
                    type: 'line'
                },
                series: [{
                    data: [1, 2, 3]
                }]
            });
        };
        plot();
    </script>

Implémenté avec python-highchart

Dans la magie %% html mentionnée ci-dessus, vous n'écrivez que du JavaScript, pas du Python. De plus, lorsque vous souhaitez gérer des variables, vous devez utiliser un moteur de modèle, etc., ce qui est gênant.

Alors, utilisons python-highcharts, qui peut appeler Highcharts depuis Python.

Installation

Vous pouvez l'installer avec pip.

pip install python-highcharts

Graphique linéaire

Si vous implémentez le même graphe linéaire implémenté par %% html magic comme décrit ci-dessus avec python-highcharts, ce sera comme suit.

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.add_data_set([1, 2, 3])
H

C'est très propre et peut maintenant être écrit en Python.

Options de graphique

Pour l'apparence du graphique, passez une valeur de type dictionnaire à highcharts.Highchart.set_options (). Consultez la référence Highcharts (http://api.highcharts.com/highcharts) pour connaître les valeurs possibles.

from highcharts import Highchart

H = Highchart(width=300, height=200)
options = {
    'title': {
        'text': 'Titre principal'
    },
    'subtitle': {
        'text': 'Sous-titre'
    },
    'xAxis': {
        'title': {'text': 'Axe X'}
    },
    'yAxis': {
        'title': {'text': 'Axe Y'},
        'lineWidth': 2
    },
}
H.set_dict_options(options)
H.add_data_set([1, 2, 3])
H

Il est également possible de régler pour chaque paramètre individuel. Cela peut être plus lisible.

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.set_options('title', {'text': 'Titre principal'})
H.set_options('subtitle', {'text': 'Sous-titre'})
H.set_options('xAxis', {'title': {'text': 'Axe X'}})
H.set_options('yAxis', {'title': {'text': 'Axe Y'}, 'lineWidth': 2})
H.add_data_set([1, 2, 3])
H

L'apparence de l'élément est définie avec highcharts.Highchart.add_data_set ().

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.add_data_set([1, 2, 3], dashStyle='ShortDash', color='plum', lineWidth=6)
H

Type de graphique

Spécifiez le type de graphique dans le deuxième argument de highcharts.Highchart.add_data_set (). La spécification de chaque paramètre de position est la suivante.

Dans l'exemple ci-dessous, le premier élément génère un graphe plan nommé «data1», et le deuxième élément génère un histogramme nommé «data2».

from highcharts import Highchart

H = Highchart(width=300, height=200)
H.add_data_set([1, 2, 3], 'area', 'data1')
H.add_data_set([4, 5, 6], 'bar', 'data2')
H

Explorer

Cliquer sur un élément graphique fera apparaître un autre graphique ... et ainsi de suite.

Passez les données du dictionnaire à chaque élément de highcharts.Highchart.add_data_set (). Définissez la clé du dictionnaire sur drilldown et la valeur sur le nom correspondant à l'exploration.

Pour spécifier l'élément après l'exploration vers le bas, spécifiez les trois arguments du paramètre de position décrit ci-dessus dans highcharts.Highchart.add_drilldown_data_set (). Faites correspondre le troisième nom avec l'élément supérieur.

from highcharts import Highchart

H = Highchart(width=400, height=200)
data = [{
    'y': 1,
    'drilldown': 'a'
}, {
    'y': 2,
    'drilldown': 'b'
}, {
    'y': 3,
    'drilldown': 'c'
}]
H.add_data_set(data, 'column')
H.add_drilldown_data_set([0.3, 0.4, 0.3], 'pie', 'a')
H.add_drilldown_data_set([4, 5, 6], 'line', 'b')
H.add_drilldown_data_set([7, 8, 9], 'area', 'c')
H

Bonus (piratage Yakiu)

À titre d'exemple d'utilisation de l'exploration, créons un graphique qui affiche le nombre de victoires de 12 équipes de baseball professionnelles en 2016 sur un graphique à barres, et clique sur chaque élément pour afficher le nombre de victoires du lanceur.

import pandas as pd
from highcharts import Highchart


class Team:
    def __init__(self):
        self.team_names = ['Hawks', 'Fighters', 'Marines', 'Lions',
                           'Buffaloes', 'Eagles', 'Swallows', 'Giants',
                           'Tigers', 'Carp', 'Dragons', 'BayStars']
        self.urls = [self.make_url(x) for x in self.team_names]
        self.dfs = [self.load_pitcher_win_data(url) for url in self.urls]
        self.wins = [df['win'].sum() for df in self.dfs]
        self.team_data = [
            self.make_y_dict(team_name, wins)
            for team_name, wins in zip(self.team_names, self.wins)
        ]
        self.pitcher_data = [df.values.tolist() for df in self.dfs]

    def make_url(self, team_name):
        def join_url(x):
            return ''.join(('http://npb.jp/bis/2016/stats/idp1_', x, '.html'))

        if team_name == 'Buffaloes':
            return join_url('bs')
        elif team_name == 'BayStars':
            return join_url('db')
        else:
            return join_url(team_name[0].lower())

    def load_pitcher_win_data(self, url):
        tables = pd.read_html(url)
        df = tables[0].iloc[2:, [1, 3]]
        df.columns = ['pitcher', 'win']
        df['win'] = df['win'].astype(float)
        return df[df['win'] > 0]

    def make_y_dict(self, team_name, wins):
        return {'name': team_name, 'y': wins, 'drilldown': team_name}

t = Team()

options = {
    'chart': {
        'type': 'column'
    },
    'title': {
        'text': 'Nombre de victoires en 2016'
    },
    'subtitle': {
        'text': 'Click the columns to view pitchers.'
    },
    'xAxis': {
        'type': 'category'
    },
    'yAxis': {
        'title': {
            'text': 'win'
        }
    },
    'legend': {
        'enabled': False
    },
    'plotOptions': {
        'series': {
            'borderWidth': 0,
            'dataLabels': {
                'enabled': True,
            }
        }
    },
    'tooltip': {
        'headerFormat':
        '<span style="font-size:11px">{series.name}</span><br>',
    },
}


H = Highchart(width=850, height=400)
H.set_dict_options(options)
H.add_data_set(t.team_data, 'column', "Team", colorByPoint=True)
for i, team_name in enumerate(t.team_names):
    H.add_drilldown_data_set(
        t.pitcher_data[i], 'column', team_name, name=team_name)
H

Implémenté avec pandas-highcharts

Installation

Vous pouvez l'installer avec pip.

pip install pandas-highcharts

Comme son nom l'indique, il dessine des pandas DataFrames avec Highcharts. Vous pouvez générer un graphique simplement en passant les mêmes arguments que pandas.DataFrame.plot () to pandas_highcharts.display.display_charts.

import pandas as pd
from pandas_highcharts.display import display_charts

df = pd.DataFrame([1, 2, 3], index=[list('abc')])
display_charts(df, figsize=(300, 200))

La spécification du type de graphique est identique à celle des pandas.

import pandas as pd
from pandas_highcharts.display import display_charts

df = pd.DataFrame([1, 2, 3], index=[list('abc')])
display_charts(df, kind='bar', figsize=(300, 200))

En termes de fonctionnalités, python-highcharts est plus abondant, mais si vous souhaitez visualiser les données des pandas, c'est plus facile.