Dag 2

Dag 2 (9-11)

Zoeken geoJSON data van Nederland

Vandaag ben ik begonnen met het vinden van een goede bron voor de geoJSON data van Nederland. Ik heb initieel geprobeerd een bron van het CBS te gebruiken, maar hier kreeg ik de kaart niet werkend. Uiteindelijk vond ik de volgende GitHub repository waar de data op te vinden was.

Implementeren van de Nederlandse kaarten

Zodra ik de geoJSON data van Nederland had gevonden ben ik aan de slag gegaan met het tekenen van de Nederlandse kaart. Hiervoor heb ik eerste de fetchGeoJSON() functie geschreven. Deze functie haalt middels een fetch de geoJSON data uit de voorheen genoemde GitHub repository.

// Fetches the required geojson data.
async function fetchGeojsonData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
  }
}

GeoJSON data bestaat uit een aantal objecten die gevuld zijn met coördinaten. Het is mogelijk om hiermee een kaart te tekenen door lijnen te trekken tussen deze punten. Hiervoor is echter wel een projectie nodig. Coördinaten zijn immers punten op een bol en een scherm is plat. Ik had initieel een post op stackoverflow gevonden die dit met een wiskundig verhaal oploste. Ik kwam er echter iets later achter dat d3js hier in een nieuwe versie de fitSize() methode voor heeft geïmplementeerd.

const projection = d3.geoMercator().fitSize([mapWidth, mapWidth], geojsonData); // Create the projection and path that are required to draw the map.
path = d3.geoPath(projection);

Deze methode vereist twee parameters, namelijk een array met de breedte en hoogte van het svg element en de geoJSON data. Op deze manier werd de benodigde projectie automatisch aangemaakt. Deze projectie kon vervolgens weer gebruikt worden om de path aan te maken die nodig was voor het tekenen van de kaart.

Omdat ik initieel meerdere kaarten in mijn visualisatie wilde gebruiken had ik een functie geschreven voor het tekenen van een kaart.

function drawMap(group, geojsonData, path) {
  group
    .selectAll("path")
    .data(geojsonData.features)
    .enter()
    .append("path")
    .attr("class", (d) => `province ${d.properties.statnaam}`)
    .style("fill", (d) => color(exampleData[d.properties.statnaam]))
    .attr("d", path)
    .on("mouseover", handleMouseOver)
    .on("mouseout", handleMouseOut);
}

Deze functie paste ik vervolgens drie keer toe in mijn main() functie om drie kaarten van Nederland te tekenen. Ik wilde ook graag dat de provincies konden reageren op mouse events. Hiervoor heb ik de handleMouseOver() en handleMouseOut() functies geschreven. Ook wilde ik de provincies inkleuren gebaseerd op een waarde. Hiervoor heb ik de color() functie geschreven.

function color(x) {
  if (x <= 45) return "#E05256";
  else if (x > 45 && x <= 47.5) return "#DD4045";
  else if (x > 47.5 && x <= 50) return "#DA2F35";
  else if (x > 50 && x <= 52.5) return "#D0252A";
  else return "#BF2227";
}

Dit wordt wel erg complex

Aan het einde van de dag kreeg ik het gevoel dat het op deze manier erg complex ging worden. Zo wilde ik namelijk dat de verschillende kaarten reageerde werkte met verschillende kleur functies en dat ze werkte met verschillende handleMouseOver() en handleMouseOut() functies. Om mijn project wat overzichtelijker te houden heb ik er uiteindelijk voor gekozen om de scope iets te verkleinen en maar één kaart te implementeren.

Bekijk hier wat ik de volgende dag heb gedaan.