Op het eerste gezicht leek D3 mij interessant om mee te kunnen werken. Vooral omdat je saaie data op een leuke manier kunt weergeven. Ik heb wat meer onderzoek gedaan naar wat je er mee kunt en hoe het werkt.
Wat is D3
D3 staat voor Data-Driven Documents. Het is een java-script bibliotheek waarmee je digitale data kunt weergeven in bewegende of interactieve beelden. Deze kun je dan tonen op een webpagina.
Wat kun je ermee
Met D3 kun je data op een uitgebreide manier visualiseren en animeren. Het wordt vooral gebruikt om tabellen en grafieken te maken, maar het is ook mogelijk om bijvoorbeeld eenvoudige spellen te creëren.
Ik heb een paar voorbeelden gezocht van het gebruik van D3
- Interactief diagram: wanneer je met je muis over het diagram gaat, wordt er extra informatie getoond.
- Grafiek van data: deze grafiek is gemaakt met codes
- Interactieve kleuren: door met je muis over de kleuren te gaan, vliegen deze over het scherm en verdwijnen ze
Voor alle voorbeelden van D3.js kun je kijken in de Gallery.
Hoe werkt het
D3 maakt gebruik van SVG (Scalable Vector
Graphics), HTML5 en CSS. Je kan hiermee werken in o.a. Sublime Text. Je voert data in en geeft een functie waaruit bijvoorbeeld een grafiek of diagram uit voort komt. Met JavaScript kun je zorgen dat de weergave interactief is.
De data kan worden ingevoerd in een CSV bestand. Dit is een bestand waarin alle gegevens met een komma van elkaar gescheiden zijn. In de voorbeelden hierboven staan ook geschreven codes.
De code ziet er allemaal erg ingewikkeld uit. Ik denk dat er goed door heen te komen is door in kleine stapjes te werken en zo steeds iets bij te leren.
Geen opmerkingen:
Een reactie posten