Kategorie: Datenjournalistische Fingerübungen

Diese datenjournalistische Fingerübung wurde am Tag nach dem knappen Ja zur SVP-Masseneinwanderungsinitiative erstellt mit D3.js anhand dieses Tutorials. Die Daten stammen von hier.

Ziel der Übung: Eine automatisch erzeugte Karte der Schweiz, die in Echtzeit die Ergebnisse von Abstimmungen zeigt, wobei die Kantone ihrem Entscheid entsprechend eingefärbt werden. Die Abstimmungsresultate werden auf admin.ch publiziert, das von mir verwendete Beispiel hier. Diese Daten habe ich mit Scraperwiki eingelesen. Der Python-Quellcode lautet:

#!/usr/bin/env python

import scraperwiki
import requests
import lxml.html

html = requests.get("http://www.admin.ch/ch/d/pore/va/20130922/det572.html").content

dom = lxml.html.fromstring(html)

i = 1
for entry in dom.cssselect('table tr'):
 if i > 1:
 if i < 28:
 post = {
 'kanton': entry.cssselect('td')[0].text_content(),
 'ja': entry.cssselect('td')[1].text_content().replace("`",""),
 }
 print post
 scraperwiki.sqlite.save(unique_keys=['kanton'], data=post)
 i = i+1

Seit einem Relaunch bietet Scraperwiki einen automatisierten Export der Daten im JSON-Format an. Die Funktion versteckt sich unter dem Menupunkt „Query with SQL“ . Die von mir erzeugte Datendatei enthält zwei Felder: Kanton und Ja-Stimmen-Anteil und ist hier zu finden. Die SQL-Abfrage dazu lautet:

select ja, kanton from swdata order by kanton limit 30

Für die Schweizerkarte im SVG-Format habe ich mich bei Wikimedia bedient. In einem Text-Editor habe ich die Farben entfernt und die IDs der einzelnen Kantone angepasst sowie die einzelnen Text- und Pathelemente in die gleiche Reihenfolge wie beim obengenannten JSON-File gebracht. Die so bearbeitete Version gibt’s hier.

Die Script habe ich mit der Java-Script Library D3 geschrieben. Ein sehr gutes, 20-teiliges Videotutorial zu D3 bietet youtube-user d3Vienno.

Der D3-Code ist extrem dicht und kurz:

d3.json('https://premium.scraperwiki.com/dexzd4i/5f6e1b937dbd42e/sql/?q=select%20%0A%09ja%2C%0A%09kanton%0Afrom%20swdata%0Aorder%20by%20kanton%0Alimit%2030%0A', function(data){
 var color = d3.scale.linear()
 .domain([20, 49.99, 50, 80])
 .range(["#143d00", "#cde6c1", "#ffcece", "#660000"]);

 d3.selectAll("path")
 .data(data)
 .attr("fill", function(d){ return color(d.ja)});

d3.selectAll("text")
 .data(data)
 .text(function(d){ return d.ja});
});

Zunächst wird das JSON-File importiert und als data-Array an eine Funktion weitergegeben. Dann wird eine Variabel „color“ definiert. Die Domain-Werte sind prozentuale Stimmanteile, es sind vier Werte, damit zwischen 49% und 51% auf der Karte klar zwischen hellrot und hellgrün unterscheidet werden kann. Die Range-Angaben sind die entsprechenden Farbcodes, wobei D3 den genauen Farbverlauf mittels der scale-Funktion automatisch regelt.

Dann folgen zwei Befehle, zunächst für die Kantonsflächen / Farbgebung, dann für die Angabe der Ja-Stimmen in Prozent. Der Quellcode des Scripts ist zu finden unter: http://jsfiddle.net/shufschmid/z28SL/3/

Wie gut Audio und Text zusammen passen, zeigt dieser von mir mittels soundbite angereicherte Artikel aus der Neuen Luzerner Zeitung:

Ein Bundesrat hat sehr wohl was zu lachen, selbst wenn er Hans-Rudolf Merz heisst. Das exerzierte der Finanzminister gestern in der Fragestunde des Nationalrats eindrücklich vor: Mit Tränen in den Augen krümmte er sich vor Heiterkeit, prustete immer wieder los und brachte kaum ein Wort heraus.

Die gute Laune ausgelöst hatte eine Frage des Waadtländer SVP-Bauern Jean-Pierre Grin. Dieser erkundigte sich danach, ob die Zollverwaltung auch genug gegen die Importzunahme von gewürztem Fleisch unternehme.

Anfangs gelang es dem obersten Chef der Zollbeamten noch, die einschlägigen Bestimmungen mit dem nötigen Ernst zu verlesen – etwa, dass es sich um «die Zolltarifnummer 1602.5099 (Schlüssel 914)» handle. Doch je verwirrender die Paragrafen und ihre Anwendung wurden, desto mehr verlor er die Contenance. Bis ihm die «sogenannten schweizerischen Erläuterungen zum Zolltarif» die Tränen in die Augen trieben. Und Merz mehrmals Anlauf nehmen musste, um den Ausdruck «Bündnerfleisch» am Stück und allgemein verständlich auszusprechen.

Vom Nationalrat erntete der bisweilen selber Belächelte spontanen Beifall. Auch politische Gegner lachten mit, als Merz Grin am Ende um Verzeihung bat und bekannte: «Ich habe bisweilen einfach nicht verstanden, was ich Ihnen vorlas.»

Einzelne Audiofiles per Soundbite einzubinden ist simpel und funktioniert dank HTML5 sowohl in modernen Browsern als auch auf mobilen Geräten*. Der Code dazu lautet:

 <span data-audio="audio/merz03.ogg">«Bündnerfleisch»</span>

Das grösste Problem war, die Javascript-Library in WordPress einzubinden. Die Anleitung dazu gibt’s hier.

Eingefügt habe ich in header.php:

<script type="text/javascript" src="/scripts/Soundbite.js"></script>

in footer.php

<link rel='stylesheet' href='scripts/Soundbite.css'>

<script> 
Soundbite.init();

 </script>

*Aus einem mir unbekannten Grund musste ich die Zeile 54 der Datei Soundbite.css (overflow: hidden;) entfernen, weil dieser Eintrag eine falsche Darstellung erzeugte. Bei mobilen Geräten besteht dieser Fehler weiterhin – Lösungsvorschläge gerne an shufschmid[(a)]gmail.com. Und nun noch als Bonus das Video in voller Länge: