Basler Wohnquartiere als D3.js-Cartogram

Unbenannt

Wie kann die unterschiedliche Dichte von Quartieren dargestellt werden? Mit einer verzerrten Karte, analog dieses Beispiels:

(c) http://www.esri.com/news/arcuser/0110/cartograms.html
(c) http://www.esri.com/news/arcuser/0110/cartograms.html

Doch wie heissen solche Karten und wie werden sie hergestellt? Twitter hilft, genauer @phwampfler.

Nach einiger Recherche bin ich auf diese verzerrte Berner Kantonskarte gestossen und das Ziel war klar: Dieselbe Karte mit den Basler Wohnquartieren nachbauen. Das Vorgehen (theoretisch):

Wohnquartiere im Geodatenshop von bs.ch als Shapefile beziehen. GeodatenBS_20170403_1151 Das Shapefile zunächst als .geojson und dann als .topojson umwandeln. Das Resultat hier: basel.topojson

Nur hat das leider nicht funktioniert und ich brauchte die Hilfe von Lukas Vonlanthen, der die Berner Kantonskarte programmiert hat. Er hat mir das benötigte, fehlerfrei funktionierende .topojson-File erstellt und schreibt dazu:

Ich habe das .shp in QGIS geöffnet, den Layer als Geojson abgespeichert und dann in Topojson konvertiert:
topojson -o basel.topojson -p –bbox — basel.geojson

Die fehlerfrei funktionierende Datei sieht so aus: baseltopojson.zip.

Das Einarbeiten der neuen Werte war problemlos, die .csv-Datei sieht folgendermassen aus:

ID,Name,PLZ,Location,Population 
01,Altstadt Grossbasel,,,50

Die angezeigte Grafik lässt sich als .svg-Datei abspeichern und weiterbearbeiten, beispielsweise für eine Illustration in der Zeitung. Dazu in Google Chrome die dev-tools öffnen und den svg-tag „als HTML“ bearbeiten. Den entsprechenden Code in einem Texteditor mit folgender Deklaration ergänzen (<svg… ersetzen) und als .svg-Datei abspeichern.

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

Die interaktive Version findet ihr hier, die grafische Umsetzung in der bz Basel als pdf hier. Ein animiertes gif (erstellt mit licecap 30 Frames / Sekunde) hier:

cartogram der Basler Quartiere anhand der Bruttogeschossfläche

(Das animierte Gif habe ich mit licecap hergestellt mi5 30 Frames / Sekunde).

Autor: Samuel Hufschmid

Jounalist bei bz Basel, Papi, Organisator Swiss Kubb Open, mit Interesse an Datenjournalismus.

Kommentar verfassen