Straftaten in Kiel

Datenvisualisierung mit JavaScript

Für die Visualisierung von Daten habe ich mich schon immer interessiert. Dafür nutzte ich bisher ausschließlich Python zusammen mit Matplotlib. Das auch JavaScript zahlreiche Möglichkeiten zur Datenvisualisierung bietet, war mir zwar schon seit längerer Zeit klar, jedoch habe ich bisher stets einen Bogen um diese Programmiersprache gemacht. Das soll sich nun ändern, weswegen ich auf xern.de ein neues Projekt gestartet habe: Das JavaScript-Labor.

In den ersten beiden dort vorgestellten Projekten geht es wieder um offene Daten der Landeshauptstatd Kiel. Während auf xern.de die visuellen Ergebnisse präsentiert werden, möchte ich hier von Zeit zu Zeit den dazugehörigen Code vorstellen. Den Anfang macht ein Datensatz zu den in Kiel gemeldeten Straftaten von 1988 bis 2015.

Zur Darstellung der Daten nutze ich die Bibliothek Flotr2. Die erforderliche flotr2.min.js-Datei habe ich heruntergeladen und am Ende der HTML-Datei eingebunden:

<script src="../js/flotr2.min.js"></script>

Außerdem wird ein div-Element mit expliziten Angaben bezüglich der Breite und der Höhe der darzustellenden Grafik benötigt:

<div id="chart02" style =" width: 600px; height: 300px;"></div>

Der JavaScript-Code befindet sich in einer separaten Datei. Zunächst wird dort ein Array mit den Daten angelegt:

var straftaten = [
    [1988, 28948],
    [1989, 27470],
    [1990, 31624],
    [1991, 33486],
    ...
]

Dann folgt der EventListener mit dem Aufruf von flotr2 zum Zeichnen der Daten:

window.addEventListener("load", function() {
    Flotr.draw(
        document.getElementById("chart02"),
        [
            {
                data: straftaten,
                label: " gemeldete Straftaten",
                lines: {show: true, lineWidth: 1},
                shadowSize: 0
            }
        ],
        {
            title: "Kiel: Gemeldete Straftaten",
            xaxis: {
                tickDecimals: 0
            },
            yaxis: {
                min: 10000,
                max: 60000,
            }
        }
    );
}, false);

Der Code sollte selbsterklärend sein. Erwähnenswert sind die Werte zur x- und y-Achse. Hinsichtlich der y-Werte (Anzahl der Straftaten) sollte ein Wertebereich definiert werden (hier: 10000 und 60000). Hier bietet es sich an, etwas zu experimentieren, um eine aussagekräftige Grafik zu erhalten.

Damit die Jahreszahlen nicht als Kommazahl – z.B. 2014.0 – dargestellt werden, habe ich bezüglich der x-Achse tickDecimals: 0 angegeben.

Schließlich sollte nicht vergessen werden, diese Datei auch einzubinden:

<script src="../js/straftaten.js"></script>

Als Ergebnis kann man festhalten, dass sich mit Flotr2 auf einfache Weise Kurvendiagramme erstellen lassen. Und nicht nur das: Denn es lassen sich Grafiken unterschiedlichsten Typs erstellen. Ein Blick auf diese Bibliothek lohnt sich also auf jeden Fall.

Weiterführende Links

Durch Benutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Mehr Informationen

Die Verwendung von Cookies dient dazu, Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf diese Website zu analysieren. Außerdem werden Informationen zur Nutzung dieser Webseite an Partner für soziale Medien, Werbung und Analysen weitergegeben.

Schließen