Greet’s eerste ervaringen met d3
Ik ben net zoals mijn team genoten, begonnen met de d3 tutorial: http://alignedleft.com/tutorials/, niet om html beter te leren kennen, maar om al eens met d3 kennis te maken via simpele voorbeelden.
Daarna ben ik aan de slag gegaan met de data uit de spreadsheet op google docs, waarop informatie zoals schoenmaat, lengte e.d. te vinden was van de mensen in de capita selecta les.
Eerst heb ik een staafdiagram gemaakt van de schoenmaat. Bovendien past de kleur van de staafjes zich aan naarmate het aantal groter wordt.
Hier wordt, door de kleuren, gebruik gemaakt van het Gestalt principe van gelijkheid. De donker tint van paars die voorkomt bij schoenmaat 37,41,43,44 en 46 maakt het duidelijk dat er evenveel zijn met die schoenmaat, zonder dat er een schaal aanwezig is om duidelijk te maken dat ze even hoog zijn.
Hierna heb ik een representatie van de favoriete kleur gemaakt. De kleur van de bollen geeft de kleur weer, de grootte geeft het aantal weer en eventuele overlappingen geeft weer dat mensen geïndiceerd hebben dat ze een combinatie van die kleuren als favoriet beschouwen.
Als laatste had ik ook nog een visualisatie van het geluksnummer gemaakt in de vorm van een taartdiagram.
Aangezien er hier duidelijk een uitspringer is, namelijk 7, kan een taartdiagram hier wel informatie bieden daarover. We hebben echter tijdens de afgelopen sessie gezien dat visualisaties via taartdiagrammen eigenlijk geen goed idee zijn. Het is namelijk moeilijk om te zien of de hoeken die de verschillende schijven maken even groot zijn en de grootte van de schijven is evenmin goed in te schatten. Wie is er namelijk zeker van dat de schijf van 42 en 3 even groot zijn?
Ik heb ondertussen ook geëxperimenteerd met dynamische visualisaties (zoals groeiende staafdiagrammen) en de data proberen binnen te halen van de google docs (voorheen stonden ze gewoon in het html bestand).
De dynamische visualisaties zijn gelukt, maar het laden van de data is nog niet helemaal juist. Hier zal ik dan ook nog wat verder achter zoeken.
Anne’s eerste ervaringen met d3
Twee weken geleden kregen we de opdracht om wat te experimenteren met d3. Omdat mijn eigen ervaring met html eerder beperkt is, ben ik begonnen met de tutorial (http://alignedleft.com/tutorials/) volledig door te nemen. Deze tutorial geeft een goed overzicht van een aantal functionaliteit binnen d3 en gaf me al enkele ideeën om mee te experimenteren.
Omdat ik niet meteen het idee had dat we heel diep op deze stof moesten ingaan, heb ik eerder voor vrij eenvoudige experimenten gekozen. De data wordt hierbij hard coded, in plaats van dynamisch ingeladen. Dit biedt uiteraard heel wat minder flexibiliteit. Daarenboven is de visualisatie telkens niet voorzien van enige dynamiek (zoals bewegende bollen of groeiende staven).
Dit zijn de resultaten van mijn initiële experimenten:
Dit is een staafdiagram waarbij de hoogte een voorstelling is van de gewicht-data van de deelnemers. Deze data wordt in random-volgorde ingelezen en de waarden worden uitgeschreven in de staven.
Dit diagram toont de gebruikte besturingssystemen. De grootte van de bollen geeft weer hoeveel gebruikers het bijbehorende besturingssysteem heeft. Dit is eveneens weergegeven achter de komma.
De laatste grafiek geeft de schoenmaat weer. Hierbij is de x- en y-as niet van belang. De bollen volgen elkaar in volgorde op, zonder hierbij rekening te houden met ‘gaten’ in de maten. De bollen zijn wel groter naarmate er meer individuen dezelfde schoenmaat hebben.
Zoals je wel zelf kan zien, zijn dit niet meteen de meest geavanceerde experimenten.
Team Power Vision 