Een diagram-app maken

Op deze pagina, leer je hoe je waarden kunt schalen zodat je elke dataset in het Snap ! -speelveld kunt plotten. 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.

Een enkel punt plotten, als je zijn coördinaten hebt, zou zo simpel moeten zijn:
Geen Afbeelding

Dan kan je een lijst datapunten plotten door een blok zoals Geen Afbeelding te maken net zoals je deed in Hoofdstuk 2 Les 2. Afhankelijk van het type diagram dat je wil, kan je de punten wel of niet verbinden.

Dat lijkt alles te zijn wat je nodig hebt. Maar wat als de schaal van je data niet past op het Snap!-speelveld (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 tijd wil plotten, zoals hieronder?
Geen Afbeelding Geen Afbeelding

De jaren kunnen niet geplot worden op de horizontale as omdat de waardes buiten Snap!'s speelveld vallen. De percentages 0, 0.1, 0.2, 0.3 etc. zijn zo dicht bij elkaar dat ze allemaal hetzelfde lijken. Je zou 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 waardes, die we diagram-coördinaten zullen noemen, voor een gegeven set datapunten.

Een goede diagrammaker moet de gebruiker de schaal van het scherm laten bepalen, om aan te geven waar de aandacht op moet worden gericht - waar moet worden ingezoomd.
  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 het ook een aantal variabelen die je andere blokken nodig zullen hebben zodat ze de afmetingen van het scherm weten.
    2. De volgende twee blokken rapporteren de speelveld-coördinaten van een punt als de diagram-coördinaten van een punt gegeven zijn. 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 zijn correcte diagram-coördinaten (niet zijn speelveld-coördinaten) laat zeggen van waar hij geplaatst is. Beweeg de sprite naar een aantal 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, niet (240,-180). Om het gehele display van coördinaten te zien moet je het Geen Afbeeldingblok gebruiken (in het Functiespalet, gebouwd voor dit project) om de coördinaten af te ronden naar het aantal decimalen dat je wil zien. Een display van Geen Afbeelding is logischer dan Geen Afbeelding in deze context.
  2. Experimenteer met verschillende invoeren voor maak diagramschaal om te zien hoe de assen geplaatst worden en 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 om te passen 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 of het werkt zoals je verwacht.
  5. Bouw uiteindelijk Geen Afbeelding om een punt te maken voor ieder datapunt. (Voor dit diagram wil je dat de punten verbonden worden. Voor de data op de volgende pagina wil je dat niet. Zorg er dus voor dat dit makkelijk is aan te passen in dit blok) Pas het toe op DerekData1927tot2015. De punten van je diagram kunnen wel of niet verbonden zijn en de assen zullen geen labels hebben, maar verder moet het lijken op de diagram hierboven.
    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 wel of niet moet verbinden voor ieder diagram dat je maakt. Je wil hiervoor een Boolean-invoer gebruiken om aan te geven of de punten verbonden moeten zijn of niet.
    Geen Afbeelding
Terug Volgende