Skip to content

D3 Oefening

ralfz123 edited this page Nov 19, 2020 · 1 revision

Vizhub

Ik heb geoefend met D3 door te kijken naar de video's van Curran Kelleher. Ik ben gelijk begonnen met de video over het maken van een barchart, omdat dat mij het meest effeciΓ«nte begin leek van oefenen met D3. Het was een erge uitdaging, maar na veel oefenen heb ik een barchart kunnen maken. Ik ben na de oefening van Curran wat variabelen wezen aanpassen, om erachter te komen of ik wel echt elke regel code snap.

Eerlijk gezegd vond ik de materie van D3 nog best wel pittig en zat mijn hoofd vol met vragen van "Hoezo gebruiken ze dit?", maar ik had er vertrouwen in dat ik dat door veel te oefenen wel steeds beter onder de knie zou gaan krijgen. En dat is gelukt πŸ˜„ .

Op Vizhub heb ik het een en ander met D3 gedaan om een statische datavisualisatie maken. Ik vond het vrij pittig, maar zeer leuk om iets visueels te maken van data. Hieronder staan een aantal voorbeelden:

Barchart versie 1

Aan de hand van de video van Curran heb ik een barchart gemaakt met dezelfde data die Curran gebruikte. Dit waren mijn eerste baby steps met D3. Aan het begin was het wat moeilijk te volgen, omdat Curran opeens allemaal D3 methods erbij pakte, maar later snapte ik veel beter wat deze methods inhielden.

Zoals je ziet heb ik een barchart gemaakt van data dat bestaat uit landen dat gekoppeld is aan het bevolkingsaantal. Door een barchart te gebruiken, kun je veel sneller zien welk land het hoogste bevolkingsaantal heeft. Dat is ook het mooie aan datavisualisaties; je kan veel gemakkelijker en sneller tot inzichten komen.

barchart-v1

Vizhub link naar voorbeeld

Barchart versie 2

Nadat Curran klaar was met de video over het maken van een barchart, ben ik door gegaan naar de volgende video over het aanpassen van labels en titels. Verder heb ik dit ook toegepast, maar ik heb ook gelijk gekeken van hoe moet ik een barchart 'leesbaar' maken. Toen heb ik een aantal dingen aangepast, zoals;

  • Eenheden (X-waardes)
  • Grootte tekst (Y-waardes)
  • Ticks weg
  • X- en Y-assen weg
  • Ticklijnen vanuit x-waardes doorgetrokken naar boven

Dit was erg leerzaam voor mij, omdat ik op deze manier een beetje D3 heb leren kennen.

barchart-v2

Vizhub link naar voorbeeld

Map projection Nederland

Voor mijn datavisualisatie wilde ik gebruik maken van de map van Nederland. Ik vond het niet nodig om zelf het wiel nog een keer uit te vinden, dus daarom heb ik ervoor gekozen om de map van Rowin Ruizendaal te gebruiken. Dit is een erg mooi en afgewerkte map van Nederland. Tevens is deze map ook nog interactief, doordat als je op een gemeente klikt, dan verandert de kleur van de geklikte gemeente en zoomt hij daarop in. Echter heb ik de topoJSON veranderd van deze map van 'gemeentes' naar 'provincies', omdat mijn datavisualisatie ging over een bepaalde provincie (Utrecht) en niet over de gemeentes. Hieronder zie je de map van de provincies van Nederland.

map-projection

Vizhub link naar voorbeeld

Hier is nog een link naar mijn VizHub profiel.

Bronnen: