Staafdiagrammen maken

In deze les leer je een datavisualisatie tool maken met staafdiagrammen voor verschillende datasets. Je past abstractie en map, een functie van hogere orde, toe.
Geen AfbeeldingGeen Afbeelding

  1. Geen Afbeelding 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 (CO2)?
    2. Welke landen hebben de hoogste uitstoot CO2 per hoofd van de bevolking (per persoon) ?
    3. Welke van deze meetingen is volgens jou een betere indicator voor de bijdrage van een land aan de wereldwijde milieuvervuiling?
    Je kan kennis en inzicht vergaren door met anderen te praten en door vragen en hypotheses te stellen.
  2. Geen Afbeelding
    Dit bestand bevat
    • Een maker van een nieuwe ADT (Abstracte Datatype) data-record met twee invoervelden label en waarde.
      Geen Afbeelding
    • Twee kiezers voor de nieuwe ADT, om specifieke gegevens uit data-record te halen.
      Geen Afbeelding
      Geen Afbeelding
    • Een max van lijst rapporteur die het grootste element van de lijst vindt.
      Geen Afbeelding
    Bekijk de blokken die al voor je gemaakt zijn en probeer te begrijpen hoe ze werken.
  3. Ontwikkel code voor het teken assenblok. Het moet de horizontale en verticale assen tekenen, gebaseerd op de gegeven coördinaten van x0 en y0 en de gegeven lengte- en hoogteinformatie.
    Geen Afbeelding
    Dit diagram kan je helpen om te begrijpen hoe de gegeven informatie bepaalt hoe en waar de horizontale en verticale assen getekend worden. Omdat je alleen positieve waardes in de grafiek zet raken de assen elkaar in de linkeronder hoek. Die hoek heet de origin en heeft als coördinaten (x0,y0) zoals je kan zien in het diagram. Er moeten op dit moment nog geen labels of markeringen zijn.
    Geen Afbeelding
    Zorg er ook voor in het teken assenblok dat de coördinaten van de origin in globale variabelen x-origin en y-origin opgeslagen worden. In de komende stappen van dit project gaan andere blokken deze informatie gebruiken om de staven en labels goed te plaatsen.
    Geen Afbeelding Geen Afbeelding
  4. Bekijk het normale labelblok dat inbegrepen zit bij het startproject. Probeer de locatie en richting van de teken-sprite te veranderen.
    Geen Afbeelding
    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.
    Geen Afbeelding
    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.

  5. Maak het uitgebreidere labelblok af, degene met een invoerveld voor de richting. Het werkt nu exact zoals het simpele labelblok, het volgt alleen de richting nog niet. De richting van het label is gelijk aan de richting van de sprite die het label tekent, dus door de richting van de sprite aan te passen kan je die van het label aanpassen.
    Geen Afbeelding Geen Afbeelding
    De invoer voor de richting van het labelblok moet Snap! 's conventie voor richtingen volgen. Het volgt de wijzers van de klok alleen gaat het in plaats van 0 tot 12 van 0 360. (0o omhoog, 90o rechts, 180o omlaag, 270o links). Test je nieuwe label met deze vier richtingen en controleer dat je het resultaat eruit ziet als de linkerhelft van de afbeelding hieronder.
    Geen Afbeelding
  6. 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.
    Geen Afbeelding Geen Afbeelding
    Je wil misschien weer even naar je eerdere Bakstenen muur project kijken om te herhalen hoe je staven van een gegeven dikte kan tekenen met de pen. Je hoeft niet het maak einde van de lijnblok te importeren van dat project maar zorg ervoor dat "Rechte lijnuiteinden" geselecteerd is in het Instellingen-menu om rechte staven te tekenen. Je kan hieronder zien het verschil ziet als je "Rechte lijnuiteinden" aan zet.
    Geen Afbeelding Geen Afbeelding Geen Afbeelding
  7. Ontwikkel code voor het teken stavenblok, dat een serie van gelabelde staven moet tekenen met een bepaalde breedte en hoogte. De serie moet links starten en doorgaan naar rechts. Om de staven en labels goed neer te zetten heb je waarschijnlijk de globale variabelen x-origin en y-origin nodig.
    Geen Afbeelding Geen Afbeelding
    Merk op dat door de maximale staafhoogte mee te geven, de hoogtes van alle staven berekend kunnen worden in proportie 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 wil weten hoe hoog de staaf van de V.S. moet zijn, dan moet je eerste de hoogste waarde in de dataset vinden, dat is hier 8715 (van China). Daarna doe je de volgende berekening: {\text{staafhoogte V.S.}} = {\text{maximale staafhoogte}} \cdot \frac{\text{datawaarde V.S.}} {\text{maximale datawaarde}} = {\text{240}} \cdot \frac{\text{5491}}{\text{8715}}\approx {\text{151}} Om de maximale waarde te vinden, moet je eerst de lijst met waardes krijgen en dan het max van lijstblok gebruiken. Het blok hieronder gebruikt het blok waarde van data-record om een lijst met alle waardes uit data-lijst te halen.
    Geen Afbeelding
  8. 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:
    Geen Afbeelding Geen Afbeelding
  9. Nu ben je klaar om alles samen te voegen en code te ontwikkelen voor het Staafdiagramtekenblok 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.
    Geen Afbeelding
  10. Als alles klaar is dan zou de volgende code, met een paar extra labels voor de diagramtitel, een staafdiagram moeten produceren zoals hieronder:
    Geen Afbeelding
    Bedenk dat de laagste waarde op de verticale as nul moet zijn opdat het staafdiagram een correcte datavisualisatie is. Als je bijvoorbeeld de verticale as zou starten bij 5000 dan zou het lijken alsof China veel vervuilender is dan de V.S.
    Over het algemeen moet je heel sceptisch zijn over diagrammen die niet starten bij nul.
    Geen Afbeelding
  11. Je programma moet algemeen genoeg zijn om ook bruikbaar te zijn voor een andere set data (die ook in je startbestand zit):
    Geen Afbeelding
    Geen Afbeelding
    "per capita" betekent "per persoon". Om de uitstoot per capita te berekenen moet je dus de totale CO2-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 waardes zijn al gegeven in het startbestand als CO2 Uitstoot per capita Data.
    Geen Afbeelding
  12. Vergelijk samen met je partner de twee staafdiagrammen. Welk inzicht geeft ieder diagram over de CO2-uitstoot? Is de een beter dan de ander? Geen Afbeelding
  1. Dataverwerking: Kijk in het Variabelenpalet om het Land-BBP-Bevolking Datablok te vinden. Als je naar de inhoud kijkt, 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.
    Geen Afbeelding
    Klik hier voor een over het snel verwerken van data met behulp van de functie map.
    Deze blokken helpen misschien:
    Geen Afbeelding
  2. 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. Deel je werk met je klasgenoten.
  1. Soms is het handiger om je staafdiagram te presenteren met horizontale staven in plaats van verticale. Pas je code aan zodat het een invoer neemt die het type diagram aangeeft (horizontaal of verticaal) dat gegenereerd moet worden.
    Geen Afbeelding
  2. Histogrammen laten numerieke data zien gegroepeerd in bereiken (genaamd vakken) en geplot 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 te laten zien.
    Geen Afbeelding
Terug Volgende