pygal

Links: notebook, html, python, slides, GitHub

pygal is one if the most mature and complete library using javascript.

documentation source installation tutorial gallery

from jyquickhelper import add_notebook_menu
add_notebook_menu()

example

import pygal
bar_chart = pygal.Bar(height=300)
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
svg = bar_chart.render()
from IPython.display import SVG
SVG(svg)
../_images/js_pygal_5_0.svg

Style of the graph

from pygal.style import DarkStyle
bar_chart = pygal.Bar(style=DarkStyle, height=300)
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
svg = bar_chart.render()
SVG(svg)
../_images/js_pygal_7_0.svg
from IPython.display import SVG
import pygal
fr_chart = pygal.maps.fr.Departments(human_readable=True, height=300)
fr_chart.title = 'Population by department'
fr_chart.add('In 2011', {
  '01': 603827, '02': 541302, '03': 342729, '04': 160959, '05': 138605, '06': 1081244,
        '07': 317277, '08': 283110, '09': 152286, '10': 303997, '11': 359967, '12': 275813,
        '13': 1975896, '14': 685262, '15': 147577, '16': 352705, '17': 625682, '18': 311694,
        '19': 242454, '2A': 145846, '2B': 168640, '21': 525931, '22': 594375, '23': 122560, '24': 415168,
        '25': 529103, '26': 487993, '27': 588111, '28': 430416, '29': 899870, '30': 718357, '31': 1260226,
        '32': 188893, '33': 1463662, '34': 1062036, '35': 996439, '36': 230175, '37': 593683, '38': 1215212,
        '39': 261294, '40': 387929, '41': 331280, '42': 749053, '43': 224907, '44': 1296364, '45': 659587,
        '46': 174754, '47': 330866, '48': 77156, '49': 790343, '50': 499531, '51': 566571, '52': 182375,
        '53': 307031, '54': 733124, '55': 193557, '56': 727083, '57': 1045146, '58': 218341, '59': 2579208,
        '60': 805642, '61': 290891, '62': 1462807, '63': 635469, '64': 656608, '65': 229228,
        '66': 452530, '67': 1099269, '68': 753056, '69': 1744236, '70': 239695, '71': 555999,
        '72': 565718, '73': 418949, '74': 746994, '75': 2249975, '76': 1251282, '77': 1338427,
        '78': 1413635, '79': 370939, '80': 571211, '81': 377675, '82': 244545, '83': 1012735,
        '84': 546630, '85': 641657, '86': 428447, '87': 376058, '88': 378830, '89': 342463,
        '90': 143348, '91': 1225191, '92': 1581628, '93': 1529928, '94': 1333702, '95': 1180365,
        '971': 404635, '972': 392291, '973': 237549, '974': 828581, '976': 212645
})
svg = fr_chart.render()
SVG(svg)
../_images/js_pygal_8_0.svg

Trick to make pygal reactive

html_pygal = """
<!DOCTYPEg>
<html>
  <head>
    <script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js"></script>
    <!-- ... -->
  </head>
  <body>
    <figure>
      {0}
    </figure>
  </body>
</html>
"""

from IPython.display import HTML
HTML(html_pygal.format(svg.decode("utf-8")))
Population by department Val-d'Oise: 118036500 Val-de-Marne: 133370200 Seine-Saint-Denis: 152992800 Hauts-de-Seine: 158162800 Essonne: 122519100 Territoire de Belfort: 14334800 Yonne: 34246300 Vosges: 37883000 Haute-Vienne: 37605800 Vienne: 42844700 Vendée: 64165700 Vaucluse: 54663000 Var: 101273500 Tarn-et-Garonne: 24454500 Tarn: 37767500 Somme: 57121100 Deux-Sèvres: 37093900 Yvelines: 141363500 Seine-et-Marne: 133842700 Seine-Maritime: 125128200 Paris: 224997500 Haute-Savoie: 74699400 Savoie: 41894900 Sarthe: 56571800 Saône-et-Loire: 55599900 Haute-Saône: 23969500 Rhône: 174423600 Haut-Rhin: 75305600 Bas-Rhin: 109926900 Pyrénées-Orientales: 45253000 Hautes-Pyrénées: 22922800 Pyrénées-Atlantiques: 65660800 Puy-de-Dôme: 63546900 Pas-de-Calais: 146280700 Orne: 29089100 Oise: 80564200 Nord: 257920800 Nièvre: 21834100 Moselle: 104514600 Morbihan: 72708300 Meuse: 19355700 Meurthe-et-Moselle: 73312400 Mayenne: 30703100 Haute-Marne: 18237500 Marne: 56657100 Manche: 49953100 Maine-et-Loire: 79034300 Lozère: 7715600 Lot-et-Garonne: 33086600 Lot: 17475400 Loiret: 65958700 Loire-Atlantique: 129636400 Haute-Loire: 22490700 Loire: 74905300 Loir-et-Cher: 33128000 Landes: 38792900 Jura: 26129400 Isère: 121521200 Indre-et-Loire: 59368300 Indre: 23017500 Ille-et-Vilaine: 99643900 Hérault: 106203600 Gironde: 146366200 Gers: 18889300 Haute-Garonne: 126022600 Gard: 71835700 Finistère: 89987000 Eure-et-Loir: 43041600 Eure: 58811100 Drôme: 48799300 Doubs: 52910300 Dordogne: 41516800 Creuse: 12256000 Côtes-d'Armor: 59437500 Côte-d'Or: 52593100 Haute-Corse: 16864000 Corse-du-Sud: 14584600 Corrèze: 24245400 Cher: 31169400 Charente-Maritime: 62568200 Charente: 35270500 Cantal: 14757700 Calvados: 68526200 Bouches-du-Rhône: 197589600 Aveyron: 27581300 Aude: 35996700 Aube: 30399700 Ariège: 15228600 Ardennes: 28311000 Ardèche: 31727700 Alpes-Maritimes: 108124400 Hautes-Alpes: 13860500 Alpes-de-Haute-Provence: 16095900 Allier: 34272900 Aisne: 54130200 Ain: 60382700 Val-de-Marne: 133370200 Seine-Saint-Denis: 152992800 Hauts-de-Seine: 158162800 Paris: 224997500 Mayotte: 21264500 Réunion: 82858100 Guyane: 23754900 Martinique: 39229100 Guadeloupe: 40463500 Population by departmentIn 2011