Kaart

Tekenen van een kaart

GeoJSON

d3js maakt gebruik van geoJSON voor het tekenen van kaarten. GeoJson is een bepaalde format voor JSON bestanden waarmee kaarten getekend kunnen worden. Geometrische objecten worden in een geoJSON bestand gedefinieerd als features. Deze features kunnen in verschillende vormen voorkomen. Het makkelijkste voorbeeld is een point. Dit is, logisch, een punt die wordt gedefinieerd met een coördinaat.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

Om een kaart van Nederland te tekenen heb je dus een geoJSON bestand nodig met coördinaten van de provincies of gemeentes van Nederland. Een geoJSON bestand met meerdere features wordt een FeatureCollection genoemd. Een kaart van de Nederlandse provincies is dus een FeatureCollection met 12 features. Deze features zullen het type MultiPolygon hebben omdat het complexe vormen zijn.

Implementatie in d3js

Het is mogelijk om in d3js met gebruik van geoJSON data een kaart te tekenen. Hiervoor heeft d3js een aantal methodes geïmplementeerd. Met de d3.geoMercator() functie wordt er een projectie gemaakt die de coördinaten (punten op een bol) veranderd in een platte punten (x en y posities op een platte plaat). Dit is nodig om de geoJSON data te transformeren naar een vorm die gebruikt kan worden voor het tekenen van een kaart in de browser. Een scherm is immers plat.

Met deze nieuwe informatie kan vervolgens met de geoPath() methode een functie gemaakt worden die SVG elementen kan aanmaken. Deze elementen kunnen vervolgens gestyled worden gebaseerd op bepaalde data om een datavisualisatie te maken.