Mehr (SVG-) Charts mit Pygal und Python

Vor ein paar Tagen hatte ich doch Pygal vorgestellt, ein Python-Bibliothek, die SVG-Charts zur Verwendung im Web erstellt. Nun behauptet die Dokumentation nicht nur, daß man die Darstellung der Charts auch weitestgehend beeinflussen kann, sondern daß Pygal von Hause aus eine gewisse Interaktivität mitbringt. Das mußte ich doch gleich einmal ausprobieren und hatte mit Pygal ein Diagramm erstellt, daß die Ergebnisse der Berliner Abgeordnetenhauswahlen seit der Wende bis heute visualisiert:

Fahrt Ihr nun mit der Maus links über die Legende, dann werdet Ihr sehen, daß die jeweilige Partei nicht nur im Chart selber, sondern auch in der Legende hervorgehoben wird. Und klickt Ihr auf die jeweiligen Kästchen links neben dem Namen der Partei, dann könnt Ihr sie im Chart ein- oder ausschalten. So könnt Ihr zum Beispiel alle Parteien unterhalb der Piraten ausschalten und erhaltet so ein Diagramm mit den Ergebnissen aller Parteien, die jemals im Berliner Abgeordnetenhaus vertreten waren.

Das Diagramm habe ich mit diesem kurzen Python-Script erstellt:

import pygal
from pygal.style import Style
import os

myStyle = Style(
    plot_background = "#f2d98f",
    background = "#2b3e50",
    foreground = "#ffffff",
    foreground_strong = "#ffffff",
    foreground_subtle = "#2b3e50",
    colors = ("#cd0000", "#000000", "#006400", "#c71585", "#fffe00", "#1e90ff",
              "#ff7f00", "#757575", "#8b6969", "#8b4513", "#87cefa", "#ff6347",
              "#cd8500", "#8b4500")
)

wahlen = pygal.Line(show_x_guides = True, style = myStyle)
wahlen.title = "Wahlergebnisse zum Berliner Abgeordnetenhaus (1990 - 2016)"
wahlen.x_labels = map(str, [1990, 1995, 1999, 2001, 2006, 2011, 2016])
wahlen.add("SPD",        [30.4, 23.6, 22.4, 29.7, 30.8, 28.3, 21.6])
wahlen.add("CDU",        [40.4, 37.4, 40.8, 23.8, 21.3, 23.3, 17.6])
wahlen.add("Grüne",      [ 9.4, 13.2,  9.9,  9.1, 13.1, 17.6, 15.2])
wahlen.add("PDS/Linke",  [ 9.2, 14.6, 17.7, 22.6, 13.4, 11.7, 15.6])
wahlen.add("FDP",        [ 7.1,  2.5,  2.2,  9.9,  7.6,  1.8,  6.7])
wahlen.add("AfD",        [None, None, None, None, None, None, 14.2])
wahlen.add("Piraten",    [None, None, None, None, None,  8.9,  1.7])
wahlen.add("Graue",      [None,  1.7,  1.1,  1.4,  3.8, None,  1.1])
wahlen.add("REP",        [ 3.1,  2.7,  2.7,  1.3,  0.9, None, None])
wahlen.add("NPD",        [None, None,  0.8,  0.9,  2.6,  2.1,  0.6])
wahlen.add("Tierschutz", [None, None,  1.1, None,  0.8,  1.5,  1.9])
wahlen.add("Die Partei", [None, None, None, None, None,  0.9,  2.0])
wahlen.add("WASG",       [None, None, None, None,  2.9, None, None])
wahlen.add("proD",       [None, None, None, None, None,  1.2, None])

path = os.path.join(os.getcwd(), "sources/pygal/svg/wahlenberlin.svg")
wahlen.render_to_file(path)

Die Zahlen zu den Wahlergebnissen habe ich einem Wikipedia-Artikel entnommen und alle Parteien berücksichtig, die je über ein Prozent herausgerkommen sind. Wie man sieht, ist das Programm immer noch kurz, die meisten Zeilen Code nimmt die Tabelle mit den Wahlergebnissen und meine individuelle Stilanpassung (myStyle = …) ein.

Zur Stilanpassung: Ich habe mich da weitestgehend auf die Dokumentation verlassen und Farben eingesetzt, von denen ich hoffe, daß sie einigermaßen vernünftig aussehen. Da ich möglichst viel von dem zeigen wollte, was machbar ist, ist mir trotz meiner Farbenblindheit bewußt, daß ich vermutlich übertrieben habe. Aber wer mit den custom styles von Pygal viel rumspielen will oder muß, der ist vermutlich auch stilsicherer als ich.

Caveat

Um den Chart in diese Seite einbinden zu können, habe ich den object-Tag in dieser Form verwendet:

<object width="600" height="auto" data="images/wahlenberlin.svg" align="left"></object>
<br clear="all" />

Leider ist der Chart dann nicht mehr responsiv, was er eigentlich sein sollte. Verkleinert man das Browserfenster, verkleinert sich das Diagramm nicht mit. Vermutlich muß man dazu irgendwo an den CSS herumschrauben, aber ich bin ja bekanntlich nicht der CSS-Guru und weiß daher nicht, wo und wie. Wenn also jemand von meinen Leserinnen oder Lesern Rat weiß, bitte ich um Mitteilung in meinen Email-Kommentaren.

–

1 (Email-) Kommentar

Wegen Verkleinern: Dein Design ist ja fix 940px breit (sowohl im CSS für die Klasse container als auch span12 so definiert), deswegen ändert sich da nichts. Wenn Du willst daß sich das Diagramm verändert, mußt Du entweder die Elemente drumrum variabel machen (z.B. 80% statt 940px) oder zu Javascript greifen denk ich.

– Ingo K. (Kommentieren) (#)

(Kommentieren)