Hoofdstuk 3 Les 4: Data-visualisatiemiddelen maken, Pagina 1

Staafdiagrammen maken

In deze les maak je een datavisualisatie-programma dat staafdiagrammen kan genereren voor verschillende datasets.
Je past abstractie toe en map, een hogere orde functie.
Geen Afbeelding

In deze afbeeldingen zijn gegevens verwerkt uit 2016; het artikel in Aan de slag hieronder bevat nieuwe data.

Technologie heeft overal ter wereld geleid tot milieuvervuiling. Bekijk samen de gegevens op deze link (Engels).
1. Welke landen hebben de hoogste uitstoot van koolstofdioxide (CO₂)?
2. Welke landen hebben de hoogste uitstoot CO₂ per capita (per persoon) ?
3. Welke van deze metingen is volgens jou een betere indicator voor de bijdrage van een land aan de wereldwijde milieuvervuiling?
Je kan kennis en inzicht verwerven door met anderen te praten terwijl je vragen en hypotheses over gegevens formuleert.
Dit bestand bevat
- Een bouwer van een nieuwe ADT (Abstracte Datatype) genaamd data-record, met de invoervelden label en waarde.
- Twee selectoren voor de nieuwe ADT, om specifieke gegevens uit data-record te halen.
- Een max van lijst functie die het grootste element van de lijst vindt.
Ontwikkel code voor het teken assen blok. Het moet de horizontale en verticale assen tekenen, gebaseerd op de gegeven coördinaten van x0 en y0 en de gegeven lengte- en hoogteinformatie.

<

Dit diagram kan je helpen om te begrijpen hoe de gegeven informatie de horizontale en verticale assen bepaalt. Omdat je alleen positieve waarden in de grafiek opneemt, raken de assen elkaar in de linkerbenedenhoek. Die hoek heet de oorsprong en heeft als coördinaten (x0,y0)zoals je kan zien in het diagram. Op dit punt staan normaal geen markeringen of labels, maar hier worden de coördinaten voor de duidelijkheid toch even getoond...

Zorg er in het teken assenblok ook voor dat de coördinaten van de oorsprong worden opgeslagen in de globale variabelen x-oorsprong en y-oorsprong. In de volgende stappen van dit project zullen andere blokken deze informatie nodig hebben om de staven en labels goed uit te lijnen.
Bekijk het normale labelblok dat inbegrepen zit bij het startproject. Je moet waarschijnlijk bij het Instellingen-menu `JavaScript extensions` aanvinken. Probeer te kijken of je de locatie en richting van de teken-sprite kan veranderen.

Merk op dat het labelblok geen pen neer nodig heeft om te schrijven. Als je pen neer aan hebt staan bij het labelblok, krijg je misschien ongewenste effecten.
Je hoeft niet in het labelblok te kijken, maar als je dat doet, zie je iets onbekends.
Laat meer informatie zien.

Net als bijna alles in je browser is Snap! geschreven in de programmeertaal JavaScript. Het labelblok is geïmplementeerd met gebruik van een Snap! JavaScript-functieblok. Met het JavaScript-functieblok kunnen ervaren programmeurs Snap! uitbreiden door nieuwe blokken te schrijven in JavaScript.

Je hoet niet te weten hoe het labelblok werkt om het te gebruiken. Doordat het de inhoudelijke complexiteit verbergt van de gebruiker is het labelblok een perfect voorbeeld van abstractie.

Gebruik het basis labelblok om code te ontwikkelen voor het uitgebreidere labelblok dat een label plaatst met de ingevoerde specificaties (tekst, grootte en richting).

De invoer voor de richting van het labelblok moet Snap! 's conventie voor richtingen volgen. Met de klok mee van van 0 tot 360 ^o: (0^o omhoog, 90^o rechts, 180^o omlaag, 270^o links. Test je nieuwe label met deze vier richtingen en controleer dat het resultaat eruit ziet als de linkerhelft van de afbeelding hieronder.
Ontwikkel code voor het teken staafblok. Het moet een verticale staaf (een lijn met de gegeven breedte en hoogte) tekenen vanaf de huidige locatie met een label onder de staaf.

Je wilt misschien weer even naar je eerdere Bakstenen muur project kijken om te herhalen hoe je staven van een bepaalde dikte kan tekenen met de pen. Je hoeft van dat project niet het maak einde van de lijnblok te importeren, maar zorg ervoor dat 'Rechte lijn uiteinden' geselecteerd is in het Instellingen-menu om rechte staven te tekenen. Hieronder zie je het verschil tussen 'Rechte lijn uiteinden' aan/uit.
Ontwikkel code voor het teken staven blok, dat een reeks van gelabelde staven met een bepaalde breedte en hoogte moet tekenen. De reeks moet links starten en naar rechts doorlopen. Om de staven en labels op de juiste positie te krijgen heb je waarschijnlijk de globale variabelen x-oorsprong en y-oorsprong nodig.

Merk op dat met een maximale staafhoogte, de hoogtes van alle staven berekend kunnen worden in verhouding tot deze maximale staafhoogte. Met de berekening hieronder kan je de staafhoogte van ieder land berekenen: $\frac{\text{staafhoogte land}}{\text{maximale staafhoogte}} = \frac{\text{datawaarde land}}{\text{maximale datawaarde}}$ Als de maximale staafhoogte bijvoorbeeld 240 is en je wilt weten hoe hoog de staaf van de VS moet zijn, zoek dan eerst de grootste waarde in de dataset, dat is hier 8715 (China) en voer dan de volgende berekening uit: ${\text{staafhoogte VS}} = {\text{maximale staafhoogte}} \cdot \frac{\text{datawaarde VS}} {\text{maximale datawaarde}} = {\text{240}} \cdot \frac{\text{5491}}{\text{8715}}\approx {\text{151}}$ Om de maximale waarde te vinden, moet je eerst een lijst met waarden opstellen en dan het max van lijstblok gebruiken. Het blok hieronder gebruikt het blok waarde van data-record om een lijst met alle waarden uit data-lijst te halen.
Ontwikkel code voor het label verticale asblok, zodat het labels onder de verticale as zet, gebaseerd op bepaalde invoer. Voor het gemak mag je aannemen dat de labels de verticale as altijd in 10 gelijke delen splitst (met behulp van 11 markeringen) zoals hieronder:
Nu ben je klaar om alles samen te voegen en code te ontwikkelen voor het Staafdiagram tekenblok met als invoer een datalijst. Bouw het blok hieronder en vul zelf de lege vakken in.

Je kan elk blok gebruiken dat je nodig hebt in de definitie van Staafdiagram.

Als alles klaar is dan zou de volgende code, met een paar extra labels voor de diagramtitel, een staafdiagram moeten produceren zoals hieronder:

Bedenk dat de laagste waarde op de verticale as nul moet zijn om het staafdiagram een correcte datavisualisatie te laten vormen. Als je bijvoorbeeld de verticale as zou starten bij 5000 dan zou het lijken alsof China veel vervuilender is dan de VS.

! Wees in het algemeen sceptisch over diagrammen die niet starten bij nul...
Je programma moet algemeen genoeg zijn om ook bruikbaar te zijn voor een andere dataset. Er zit nog een andere dataset in dit project genaamd 'CO2 Uitstoot per capita':

'Per capita' betekent 'per hoofd van de bevolking'. Om de uitstoot per capita te berekenen moet je dus de totale CO₂-uitstoot delen door het aantal inwoners. Hieronder staat een voorbeeld met China:

$\frac{\text{8715 Miljoen ton}}{\text{1.337 Miljard personen}} = {\text{6.52 tonnen per persoon}}$ Deze waarden staan al in de dataset CO₂ Uitstoot per capita Data.

Vergelijk samen met je partner de twee staafdiagrammen.
Welk inzicht geeft ieder diagram over de CO₂-uitstoot? Is de een beter dan de ander?

Dataverwerking
Kijk in het Variabelenpalet om het Land-BBP-Bevolking Datablok te vinden. Als je de inhoud bekijkt, vind je een lijst van lijsten met data over het BBP ( Bruto Binnenlands Product) en bevolkingsgrootte voor ieder land dat je hebt bestudeerd in dit project. Verwerk de data op een manier dat je er een staafdiagram mee kan maken met het BBP per capita voor ieder land.

Klik hier voor een hint over het snel verwerken van data met behulp van de functie map.
Deze blokken helpen misschien:
Verzamel nu zelf data in je klas of van het internet over een onderwerp dat je interessant vindt en dat makkelijk gevisualiseerd kan worden in een staafdiagram. Gebruik je Snap!-programma om de data te visualiseren. Vertel wat je gedaan hebt aan je klasgenoten.

Soms is het handiger om je staafdiagram te presenteren met horizontale staven in plaats van verticale. Pas je code aan zodat deze een invoer krijgt die aangeeft welk type diagram (horizontaal of verticaal) genereerd moet worden.
Histogrammen laten numerieke data zien die gegroepeerd zijn in bereiken (vaak 'bins' genoemd, emmers) en die geplot zijn als staven. Het histogram hieronder laat bijvoorbeeld het aantal studenten zien in iedere leeftijdsgroep op een zomerkamp. Leer over histogrammen en maak een datavisualisatie-programma in Snap! om histogrammen weer te geven.