Skip to content

#5 Starting with D3

Jump to bottom
Rick Groot edited this page Nov 12, 2020 · 1 revision

D3 Intro 🛠️

D3 is een tool die ik ga gebruiken om een visualisatie te maken. Met D3 zijn er heel veel mogelijkheden, je kan een barchart maken met deze tool, maar ook maps en grote complexe visualisaties.

Starting with examples

Om te beginnen met D3 ben ik op zoek gegaan naar verschillende voorbeelden. Ik wil graag een map maken met D3, want dit is tot nu toe ook mijn concept. Hiervoor heb ik een aantal bronnen gevonden die ik kan gebruiken.

Showing a map in SVG

Om te beginnen moet ik een svg aanmaken in mijn HTML, en deze selecteren via D3 zodat ik er een visualisatie mee kan maken. D3 selectoren maken gebruik van dezelfde syntax als CSS, dus ik kon mijn svg met een id makkelijk selecteren met d3.select.

let mapSVG = d3.select("#map");

Vervolgens ging ik kijken naar het plaatsen van een map. Hiervoor heb ik data nodig van Nederland, zodat ik die vervolgens doormiddel van paths in mijn svg kan zetten. Hier is de data van Nederland die ik heb gebruikt voor de visualisatie van de map. Omdat deze data is gebaseerd op een locatie moet ik D3 vertellen welk gedeelte van de wereldkaart moet worden laten zien. Als ik dit niet doe is Nederland heel klein en niet in het midden van het scherm. Dit doe ik door een projection variabele aan te maken, waarin in specificeer waar de center is van Nederland, en hoeveel er moet worden ingezoomd.

let mapProjection = d3.geoMercator()
    .center([2, 52.7]) // GPS of location to zoom on
    .scale(8000)

let mapPath = d3.geoPath(mapProjection)

Nu kan ik beginnen met het invoegen van de paths en shapes die ik ga gebruiken voor mijn visualisatie. Deze stappen zijn op de volgende pagina te vinden.

Clone this wiki locally