Week 3
Met de start van week 3 zijn we op het middenpunt van onze project en zijn we begonnen met hoe we te werk gaat met D3.
D3.js is een JavaScript-bibliotheek voor het manipuleren van op gegevens gebaseerde Data. D3 maakt het mogelijk om gegevens tot leven te brengen met HTML, SVG en CSS.
Hierbij de uitgewerkte versie van het D3 staafdiagram met tekstlabels. Eerder lukte het me niet om de grafiek werkend te krijgen, dus heb ik de uitgewerkte versie uit de les gebruikt om verder te oefenen.
-
Continue waarden: Dit is als iets meten met een liniaal. De waarde kan elk getal zijn tussen 0 en 100 zijn.
-
Discrete waarden: Dit is hetzelfde als iets sorteren in verschillende bakken of mappen. Een waarde zit in de ene of de andere rij. Je waarden kunnen bijvoorbeeld dagen van de week zijn en geen halve dagen.
Tijdens de les werd ons uitgelegd over 3 verschillende types van scale van D3 en hoe en wanneer ze gebruik kunnen worden.
- Continuous -> Continuous Dit type schaal zet een doorlopende getallenreeks om in een andere doorlopende rij. Deze schaal wordt vaak gebruikt in situaties waarin de gegevens en de visuele weergave vloeiend zijn en geen vaste stappen bevatten.
- Continuous -> Discrete Deze schaal neemt een doorlopende rij getallen en verdeelt ze in verschillende, afzonderlijke categorieën.
- Discrete -> Discrete Bij dit type schaal heb je een beperkte rij gegevens die je toewijst aan een andere rij specifieke outputwaarden.
Vandaag hebben we geleerd over Axes en Ticks. Met Axes en Ticks kun je de schaal en categorieën van je gegevens in een staafdiagram duidelijk aangeven. Ze helpen bij het lezen en interpreteren van de gegevens door markeringen en waarden langs de assen weer te geven.
Deze grafiek is heb ik van de pagina horizontale staafdiagram in d3.js, die ik nu aan het testen ben. Later zal ik hem aanpassen aan de gegevens die ik wil laten zien.
Deze week heb ik me vooral gericht op het toevoegen van grafieken aan mijn componenten. Zoals eerder vermeld in week 3, is het me gelukt om de 'Horizontal Bar Chart' te implementeren in D3.js. Daarnaast heb ik ook een 'Most Basic Line Chart' toegevoegd. Mijn doel is om hier een historische grafiek van te maken zodra ik geschikte API's heb gevonden.
Ik ben van plan om API's te vinden die gebruikt kunnen worden voor Linechart, met als doel het maken van een historische lijngrafiek voor mijn project. Daarnaast wil ik een zoekfunctie maken die deze grafiek per game kan oproepen en zo deze twee grafieken kan weergeven zoals in het voorbeeld is te zien.