Een datavisualisatie gemaakt door Maria Daan voor het eindproject van de Minor Programmeren aan de Universiteti van Amsterdam. Het doel van dit project is om studenten inzicht te geven in de situatie op de woningmarkt in Amsterdam. Naast dat het simpelweg interessant is om te zien hoe dingen als huurprijzen en leeftijdsgroepen verdeeld zijn over de stad, zou deze datavisualisatie ook echt nut kunnen hebben voor studenten bij het zoeken naar een woning. In welke buurten zijn de huurprijzen nou het laagst, waar is het meeste particuliere huur en waar wonen veel studenten?
De webpagina vind je hier.
Een product demonstratie is hier te bekijken.
De datavisualisatie bevat een aantal onderdelen: een kaart, een barchart, een piechart en een korte beschrijving. Alle onderdelen zijn direct zichtbaar op de pagina zodra je in de balk op "Datavisualisatie" klikt. In eerste instantie zie je de data die geldt voor heel Amsterdam. In het kaartje zie je per buurt het percentage woningen van minder dan 425 euro per maand. Als je klikt op een buurt, worden de andere elementen geupdate. Je krijgt dan de informatie per stadsdeel te zien. Door de groene kleur die het geselecteerde stadsdeel krijgt en de titel bovenaan de pagina is duidelijk over welk stadsdeel er informatie weergegeven wordt. Om terug te gaan naar de initiële pagina over heel Amsterdam, klik je op de achtergrond in het kaartje.
De knoppen bij de barchart kunnen worden gebruikt om te wisselen tussen twee categorieën data: huurklasse en inkomensverdeling. Door tussen deze twee categorieën te switchen kan je goed zien of er samenhang is of juist niet. Door gebruik van een tooltip zijn makkelijk de exacte percentages af te lezen.
De piechart rechtsonder op de pagina bevat maarliefst 5 verschillende categorieën data waartussen gewisseld kan worden. De 'pies' in de chart zijn gesorteerd van groot naar klein, waardoor het direct duidelijk is welke groepen het grootst en welke het kleinst zijn, wat anders vaak bij piecharts niet zo duidelijk is. Ook hierbij is weer een tooltip aanwezig voor de exacte percentages.
Als laatste is in het tekstblok linksonder nog wat extra informatie te lezen over het geselecteerde stadsdeel, om het een compleet geheel te maken. In onderstaande schermfoto is te zien hoe de initiële pagina met alle elementen eruit ziet.
Op de 'Over' pagina, klikbaar linksboven in het scherm, staat een korte uitleg van het doel van de visualisatie. Verder is de website simpel en zonder onnodige extra poespas. De datavisualisatie spreekt voor zichzelf.
Dank aan de makers van de gebruikte libraries en script die dit project mogelijk gemaakt hebben:
- D3 // mbostock
- D3-Legend door // Susie Lu
- D3-tip door // Justin Palmer
- Datamap Amsterdam door // Jules Blom
- D3 Piechart door // Yan Holtz
- Bootstrap // Starter Template
Al deze externe bronnen hebben hun eigen licensties. Via de links zijn deze te vinden. Verder is alles door mijzelf gemaakt en behoren deze rechten dus ook tot mij.
Maria Daan (11243406) Github