week 3: opdracht dinsdag

Week 3: Opdracht Dinsdag

Playing around with visualizations is one of the best ways to learn D3. Since its background is revolving around mathemica, it has extremely detailed functionalities, but also a very steep learning curve and advanced documentation. However, we do want you to dive into it, and the best way would be to start with the freeCodeCamp assignments.

Opdracht:

Voorbeeld snippets van visualisaties die je hebt gemaakt tijdens de opdrachten, inclusief een beschrijving van wat je hebt geleerd, wat moeilijk was, wat gemakkelijk was en wat verrassend was. Reflecteer op deze punten.

Hieronder zie je hoe ik de code met dank aan "D3 in depth & ChatGPT" heb kunnen schrijven en begrijpen. Deze visualisatie is ook al een deel van mijn project, maar zal nog vele tweeks krijgen.

<script>
    import { onMount } from 'svelte';
    import * as d3 from 'd3';
  
    onMount(() => {
      // Select the SVG container where you want to render the map
      let svg = d3.select('#content svg');
  
      let projection = d3.geoMercator();
      let geoGenerator = d3.geoPath().projection(projection);
  
      // REQUEST DATA
      d3.json('data/provinces-netherlands.geojson')
        .then(function (json) {
          // Store the GeoJSON data in the geojson variable
          let geojson = json;
  
          // Set the projection size after you have the geojson data
          projection.fitSize([500, 400], geojson); // Adjust the size as needed
  
          // Define the SVG path element for your features
          const paths = svg
            .selectAll('path')
            .data(geojson.features)
            .enter()
            .append('path')
            .attr('d', geoGenerator)
            .style('stroke', '#fff')
            .style('stroke-width', 1);
        })
        .catch((error) => {
          console.error('Error loading GeoJSON:', error);
        });
    });
  </script>  

Wat ik heb geleerd en ook echt super interresant vond zijn volgende dingen:

• Projecteren van geoJSON
• De werking van het inladen van een json bestand met d3 ( "d3.json()" )
• De methodes die je moet gebruiken
• Opvrissen van hoe promises werken
• Documentatie van D3.js is vrij makkelijk te begrijpen

Hoe ging het in het algemeen? Ik wist om te beginnen eigenlijk al direct dat ik me wilde gaan verdiepen in het inladen van een kaart omdat ik wist dat dit de grootste obstakel zou kunnen zijn in in mijn project. Heb eerst veel onderzoek gedaan naar voorbeelden op codepens, bekijken naar hoe makkelijk het is om geoJSON bestanden te vinden van Nederland, wat eigenlijk heel makkelijk is.

De moeilijkste dingen vond ik vooral het inladen van de geoJSON, en de "onmount()" functie. Ik snapte namelijk eerst niet dat deze gebruikt moet worden om je project te laten zien. ook vond ik het lastig welke methode wat deden en ben d.m.v. ChatGPY de juiste kant op gestuurd.

Het verbaasde mij ook wel dat dit toch eigenlijk super makkelijk was en ben dus benieuwd naar bijvoorbeeld een barchart of het animeren van dit soort6 grafieken of maps.