Een diagram-app maken

Op deze pagina leer je hoe je waarden kunt schalen zodat je in het Snap! speelveld een grafiek kunt maken van elke dataset. Blokken om de berekeningen uit te voeren, zijn al voor je geschreven, maar als je wilt, kan je ze onderzoeken om te zien hoe ze werken.

Plotten is het visualiseren van een hoeveelheid gegevens op het scherm of op papier, waarbij gebruik gemaakt wordt van coördinaat-assen.

Het plotten van een enkel punt, gegeven zijn twee coördinaten, kan simpel dit zijn:

Geen Afbeelding

Vervolgens kun je een lijst met gegevenspunten grafisch weergeven door een blok te verzinnen zoals Geen Afbeelding.
Je deed dit eerder in Hoofdstuk 2 Les 2. Afhankelijk van het type diagram dat je wilt hebben, kan je de punten wel of niet verbinden.

Dat is het ongeveer. Maar wat als de schaal van je data niet past op het Snap! speelveld? Dus tussen -240 en 240 in de x-richting en tussen -180 en 180 in de y-richting? Wat als je bijvoorbeeld de populariteit van een babynaam over een bepaalde periode wil plotten, zoals hieronder?

Geen Afbeelding Geen Afbeelding

De jaren kunnen niet geplot worden op de horizontale as, omdat de waarden helemaal buiten het Snap! speelveld vallen (1930-2010). En de percentages 0, 0,1, 0,2, 0,3 etc. liggen zo dicht bij elkaar, dat ze allemaal hetzelfde lijken. Je zou zo het verschil in populariteit tussen 1960 en 1980 niet kunnen zien. We hebben een manier nodig om te wisselen tussen Snap! speelveld-coördinaten en de echte waarden van een set datapunten, die we diagram-coördinaten zullen noemen.


Een goede diagram-app moet de gebruiker de schaal van het scherm laten instellen om te bepalen waar de focus ligt.

  1. Geen Afbeelding
    Het bevat een paar blokken die al voor je gemaakt zijn.

    1. Klik op het maak diagramschaalblok met de invoer die er al is (-2, 4, 30, 300), om te zien wat het doet. Naast het tekenen op het scherm, maakt het ook een aantal variabelen die jouw andere blokken nodig hebben, zodat ze ook beoogde schermafmetingen kennen.

    2. De volgende twee blokken nemen als invoer de diagram-coördinaten van een punt en rapporteren de speelveld-coördinaten die daarbij horen. Experimenteer met de invoer van deze blokken zodat ze 0 rapporteren.
      Geen Afbeelding Geen Afbeelding
      Hoe is de invoer gerelateerd aan de diagramschaal?

    3. Gebruik Geen Afbeelding met dezelfde invoer.
      Waar wordt je sprite geplaatst?

    4. Zonder de positie van de sprite te veranderen, klik op Geen Afbeelding en leg uit wat er gebeurt.

    5. Gebruik het Geen Afbeeldingblok om een script te maken dat de sprite vraagt zijn diagram-coördinaten te zeggen als hij ergens wordt neergezet. Beweeg de sprite naar een paar verschillende plekken op het speelveld om het script te testen.

      6. Voor dit diagram moet een sprite in de rechter onderhoek van het speelveld (4, 30) zeggen, en dus niet de speelveld-coördinaten (240,-180).

      Gebruik het Geen Afbeeldingblok (in het Functies-palet en speciaal gebouwd voor dit project) om de coördinaten af te ronden naar het aantal decimalen dat je wilt zien. In deze context is een display van Geen Afbeelding zinvoller dan Geen Afbeelding.


  2. Experimenteer met verschillende invoeren voor maak diagramschaal om te zien hoe de assen geplaatst worden en om te zien hoe de vervangende assen geplaatst worden als het punt (0,0) niet op het speelveld ligt. Sleep de sprite naar een aantal plekken om te zien of hij doet wat je verwacht. Verander dan de invoer van maak diagramschaal zodat deze past bij het bereik van de jaren en percentages van de data en klik erop om de schaal te resetten. Controleer opnieuw of de sprite zegt wat je verwacht als je hem over het speelveld beweegt.

    Geen Afbeelding

  3. Bouw het volgende blok dat de diagram-coördinaten van een datapunt gebruikt en de sprite beweegt naar de speelveld-coördinaten die daarbij horen.
    Geen Afbeelding.

    Het punt (1971, 0.25) ligt ongeveer in het midden bij het babynamendiagram van Derek.
    Controleer of Geen Afbeelding werkt zoals je verwacht.

    Geen Afbeelding

  4. Bouw dan Geen Afbeelding zodat het Geen Afbeelding gebruikt in plaats van Geen Afbeelding. Controleer ook hier of het werkt zoals je verwacht.

  5. Bouw uiteindelijk Geen Afbeelding om een punt te plaatsen voor ieder datapunt. Voor dit diagram wil je dat de punten verbonden worden. Voor de data op de volgende pagina wil je dat niet. Pas het toe op DerekData1927tot2015. Het moet lijken op het diagram bij stap 3., zonder labels.

    Geen Afbeelding Geen Afbeelding

  6. Sla je project op als 'H3L4-DiagramApp'.

    7. Geen Afbeelding



  1. Bedenk een manier om je diagram-app te vertellen dat hij de punten in het diagram wel of niet moet verbinden. Je hebt hiervoor een Booleaans invoerveld nodig.

    Geen Afbeelding

Terug Volgende