Volksschuldaten des Kanton Bern
Eine Visualisierung von Urs Zysset und Rene Gadow.
Eine Visualisierung von Urs Zysset und Rene Gadow.
Im Auftrag der Vorlesung Open Data der Universität Bern wurde mithilfe des Javascript Framework D3.js die Volksschuldaten des Kanton Bern in dieser interaktiven App visualisiert.
Auf dieser interaktiven Karte des Kanton Bern sind die einzelnen Gemeinden nach Anzahl der Schüler gefärbt. Je dunkler eine Gemeinde eingefärbt ist, desto mehr Schüler gehen in dieser Gemeinde zur Schule. Es ist klar festzustellen, dass die Gemeinden Bern, Biel, Thun und Langenthal besonders grosse Zentren bilden. Auch die Gemeinden die direkt an diesen Zentren grenzen, weisen meist noch über 1000 Schüler aus. Im Durchschnitt hat eine Gemeinde ca. 300 Schüler, dies zeigt gut auf, dass neben den grossen Schulzentren die meisten Gemeinden doch eher nur unter 1000 Schüler beherbergen.
Dieses Sunburst-Diagramm zeigt zunächst die Aufteilung der Schüler auf die verschiedenen Verwaltungskreise auf. Eine Ebene weiter unten werden die Verwaltungskreise anschliessend auf die einzelnen Trägertypen (Öffentlichen Schulen, subventionierten und nicht subventionierten Schulen) aufgeteilt. Wobei diese in der darauf folgenden Ebene erneut noch auf die verschiedenen Schulstufen (Vorschulstufe, Primarstufe und Sekundarstufe) unterteilt werden.
Durch einen Klick auf ein beliebiges Stück dieses Sunburst-Diagramm ist es möglich in diesen Bereich 'hinein zu zoomen' und diesen genauer zu betrachten. Möchte man wieder eine Ebene nach oben gelangen, so reicht ein einfacher Klick in das Zentrum des Sunburst-Diagramm. Informationen über die jeweiligen Bereiche lassen sich durch den angezeigten Tooltip zu jeder Zeit direkt ablesen.
In diesem eher verspielten Diagramm sieht man die Anzahl Schüler in jeder Gemeinde zunächst anhand der Grösse der Kreise. Diese sind gefärbt, je nach Verwaltungskreis. Hier kann man sehr gut sehen, welches die grössten Gemeinden (bezüglich der Schülerzahl) in einem jeweiligen Verwaltungskreis sind. Die Kreise haben Kollisionserkennung und können nach belieben durcheinander geworfen werden. Zum ausprobieren ziehen sie einen der Kreise herum. Das Diagramm ordnet sich automatisch sobald man es wieder los lässt.
Dieses Diagramm zeigt einmal mehr die Möglichkeiten, die D3.js bietet. Je nach Verwaltungskreis sieht man hier die Anzahl Schüler, wobei der Verwaltungskreis mit der höchsten Anzahl (hier Bern-Mittelland) als Basis dient, um dieses die anderen Datenpunkte im Diagramm anzuordnen.
Auf dieser Karte wird die Aufteilung nach dem Geschlecht der Schüler dargestellt. Jede Gemeinden zeigt durch ihre Farbe welches Geschlecht der Schüler stärker vertreten ist. Grau bedeutet eine ausgeglichene Geschlechterverteilung, während rosa für einen höheren Frauenanteil steht und grün für einen höheren Männeranteil. Bei genauer Betrachtung fällt auf, dass die extremen Ausreisser in der Geschlechtsverteilung alle dadurch entstehen, dass in den jeweiligen Gemeinden meist nur sehr wenige Schüler vorhanden sind. Dennoch lässt sich aus der Karte herauslesen, dass das männliche Geschlecht in mehr Gemeinden die überhand hat.
Mithilfe dieser Karte lässt sich der Ausländeranteil unter den Berner Schülern herauslesen. Diesmal sind die Gemeinden nach prozentualem Anteil der Ausländer unter den Schülern rot gefärbt. Die Karte zeigt einen eher schwächeren Ausländeranteil in ländlicheren Gemeinden, wobei grössere Städte wie Bern eine höhere Konzentration ausländischer Schüler aufweisen.
Auf dieser Karte sind die Gemeinden nach dem prozentualen Anteil fremdsprachiger Schüler gefärbt. Auch hier sieht man das die Anzahl fremdsprachiger Schüler in Städten wie Biel, Thun und Bern am höchsten ist, während ländliche Gemeinden generell einen kleineren Anteil aufweisen.
Basiert auf Sunburst Partition
Zunächst wurden die Daten bereinigt und in Form gebracht, man in der Datei datasunburst.xlsx sehen kann. Diese wurde dann als datasunburst2.csv abgespeichert. Diese Datei haben wir dann in ein kleines Skript eingebunden, welches uns daraus die gewünschten Json Dateien lieferte. Die Daten, mit denen ein solches Diagramm arbeitet, haben eine verschachtelte Struktur die sich mit d3.nest() herstellen lässt.
d3.csv("./datasunburst2.csv", function(csv_data){
var json1 = d3.nest()
.key(function(d) { return d.Verwaltungskreis; })
.key(function(d) { return d.Träger; })
.key(function(d) { return d.Bildungsstufe; })
.rollup(function(leaves) {
return {"name": "Schueler",
"size": d3.sum(leaves, function(d) {return parseFloat(d.Schueler);})}
})
.entries(csv_data);
function ready(error, be) {
$("#Textfeld").html(JSON.stringify(be, null, 3));
}
});
Dieses Snippet fasst alle Objekte zusammen, die den gleichen Key besitzen. Diese Kinder eines Keys haben dann wieder Kinder usw. Am Ende werden noch alle Kinder mit Name Schüler unter dem Key Bildungsstufe vereinigt und das Ergebnis in einem Textfeld ausgegeben.
Per Hand haben wir die Daten dann noch so umgeschrieben bzw Teile ersetzt, dass sie genau die von Herrn Bostock vorgeschlagene Format haben. Siehe Flare.json
Basiert auf
Aus den verschiedenen Vorlagen wurde nach und nach eine eigene Version extrahiert und zusammengesetzt. Da es Probleme bereitete das Gemeinde TopoJSON und das eigens erstellte csv File (mit z.B. den Schülermengen) zu aggregieren, wurde die Library queue.js zu Hilfe gezogen. Damit war es nun endlich möglich, im JavaScript Code die beiden Files miteinander zu verbinden (musste von csv auf tsv ausweichen). Die Legende wurde danach später von Hand selbst entwickelt und hinzugefügt. Für die Tooltips wurde die externe Library Tipsy.js verwendet. Um eine angenehme Farbpalette präsentieren zu können wurde ausserdem die Library Colorbrewer genutzt.
Basiert auf:
Damit das Spider App verwendet werden konnte, mussten die Daten - statt wie sonst mit einem csv - direkt im Skript festprogrammiert werden. Einige weitere kleine Veränderungen im Code wurden vorgenommen für eine optimale Visualisation.
Basiert auf Cluster Force Layout IV
Das Musterbeispiel konnte grösstenteils übernommen werden. Die meiste Arbeit musste dafür aufgewendet werden, die Daten in einem ersten Schritt aufzuarbeiten und dann in einem zweiten Schritt die problemlose Verarbeitung durch das Muster-App zu ermöglichen. Dazu mussten die Daten fein säuberlich auf das bestehende Datenmodell des Muster-App abgestimmt werden. Neu wurde noch Tipsy.js integriert, damit ist es möglich herauszufinden wofür welcher Kreis steht und welchen Wert er visualisiert.
Als Grunddatenquelle diente uns die Datei schulstat_2012_20131108.csv.
| Beschreibung | Struktur | Dateityp | Download |
|---|---|---|---|
| Grunddaten des Kanton Bern | - | csv |
schulstat_2012_20131108.csv Quelle |
| Anzahl Schüler nach Gemeinden aufgeteilt |
id: Gemeindenummer students: Anzahl Schüler womens: Frauenanteil foreigners: Ausländeranteil languages: Fremdspr.anteil |
tsv | school.tsv |
| Frauenanteil nach Gemeinden aufgeteilt | |||
| Ausländeranteil nach Gemeinden aufgeteilt | |||
| Fremdsprachigenanteil nach Gemeinden aufgeteilt | |||
| Gemeinden des Kanton Bern | TopoJSON | .json | be-municipalities.json |
| Verwaltungskreise, Träger, Schulstufen, Schülerzahl | - | .xlsx | datasunburst.xlsx |
| Verwaltungskreise, Träger, Schulstufen, Schülerzahl | komma-separiert | .csv | datasunburst2.csv |
| Verwaltungskreise, Träger, Schulstufen, Schülerzahl | flare.json | .json | sunburst.json |