Webteknologi - Opgaver modul 6

Nye eksempler fra GitHub

Fagets “GitHub repository” er blevet opdateret med nogle nye eksempler, som du skal bruge i opgaverne. Du kan derfor med fordel opdatere din git-folder, så du får det nye indhold.

Den “rigtige” måde at opdatere sin git-folder på er som følger:

  1. Brug terminalen, og gå ind i git-folderen du “klonede” tilbage i modul 3 (den hedder webtek-fall-2022).
  2. Brug kommandoen git pull.

Og det var det.

Du kan risikerer at få en fejl, når du laver git pull, hvis du har ændret indeholdet af folderen siden du klonede den. Det skyldes, at git aldrig overskriver lokale ændringer. I så fald er det nemmest at lave en ny “git clone”. Slet folderen (eller flyt den over i en anden folder), og kør kommandoen fra modul 3 igen, for at få nyeste kopi af fagets git repository fra GitHub.

Opgave 1 - Prøv eksemplerne, og lav et nyt eksempel

Find dagens eksempler i fagets GitHub repository. De ligger under modul06/d3js-eksempler/.

Gør følgende:

  1. Prøv alle “eksemplerne” af med live-server og din browser. Se både på hvordan de ser ud i browseren, men kig også i deres kode. Læs kodekommentarerne.
  2. Lav en kopi af eksemplet tekst-styling.html med et nyt navn (fx opgave1.html). Undgå helst at gøre det direkte i git-folderen. Lav i stedet en kopi af hele eksempel-folderen, og gør det der.
  3. Lav ændringer i kopien så tekstens farve svarer til følgende:
    • For datapunkter under 10 skal teksten være blå.
    • For datapunkter fra 10 til 20 skal teksten være grøn.
    • For datapunkter over 20 skal teksten være lilla.
  4. Sæt nogle flere tal ind i datasættet efter eget valg.
  5. Tjek at resultatet ser ud som forventet.

Opgave 2 - Endnu et eksempel

  1. Lav endnu en kopi af eksemplet tekst-styling.html med et nyt navn (fx opgave2.html).
  2. Erstat datasættet med følgende i stedet for:
const dataset = [ "peach", "pineapple", "passion", "papaya", "pomegranate" ];
  1. Lav ændringer i udskriften så teksten i stedet siger noget i stil med “ordet frugt har en længde på længde”, hvor længde er et tal og frugt er et navn.
  2. Lav ændringer i stylingen, så teksten hvor frugten er mindst 8 tegn farves blå og teksten til frugter på under 8 tegn farves rød.
  3. Tjek at resultatet ser ud som forventet.

Opgave 3 - Lav en ny barchart

Lav en kopi af barchart.html, fx opgave3.html.

Lav ændringer i kopien som følger. Undersøg resultatet af hver ændring i browseren.

  1. Lav ændringer i datasættet så der nu er flere værdier der ligger over 50.
  2. Lav ændringer til koden så søjler der svarer til værdier over 50 ikke bliver “klippet over”.
  3. Tilføje nogle ekstra datapunkter og observer hvad der gør ved bredden af hver søjle.
  4. Gør søjlerne bredere uden at ændre på antallet af datapunkter.
  5. Prøv at ændre på “barPadding” og observer effekten af dette.

Opgave 4 - Undersøg Jeopardy-skabelonen

Lav en kopi af folderen skabelon-jeopardy fra GitHub-repositoriet. Den skulle gerne bestå af tre filer: index.html, d3.js og JEOPARDY_QUESTIONS.json. Prøv at teste kopien af skabelonen ved at åbne den igennem live-server.

Svar på følgende spørgsmål:

  1. Hvad vises der på siden?
  2. Hvor kommer data på siden fra?
  3. Hvad kan du se i browserens “konsol” når du åbner siden?
  4. Hvilken relevant data findes der på hvert “spørgsmål” i datasættet?

Opgave 5 - Lav ændringer i Jeopardy-skabelonen

Lav følgende ændringer i din egen kopi af Jeopardy-skabelonen:

  1. Lav om i koden så der vises data for et andet spørgsmål efter eget valg.
  2. Tilføj ny kode så der også vises:
    • datoen hvor spørgsmålet blev brugt
    • værdien af spørgsmålet (i dollars)
    • spørgsmålets “show number” (udsendelsesnummer)

Opgave 6 - Data-visualisering med Jeopardy-data

I folderen modul06/jeopardy-eksempler/ er der et eksempel på optælling af hvor mange gange fire forskellige ord optræder i Jeopardy-kategorier. Du kan se koden i war-peace-tekst.html. Der anvendes et “for loop” til opsamlingen, og de fire tal tælles op i et array. Eksemplet viser hvordan tallene kan vises på siden.

Din opgave er at lave en kopi af eksemplet, og udvidet det så tallene vises som en barchart. Du kan bruge et andet eksempel, barchart.html fra folderen eksempler til inspiration. Koden fra de to eksempler skal flettes sammen og tilpasses for at løse opgaven.

Opgave 7 - Flere datavisualiseringer 1

Lav følgende varianter, hvor du bruger din løsning fra opgave 6 som skabelon.

  1. Lav en variant hvor du selv har valgt 5-10 ord fra datasættet du vil visualisere. Husk at skrive på selve siden hvilke ord der er valgt, så andre også kan forstå din visualisering blot ved at se resultatet.
  2. Lav en variant hvor du i stedet kigger på ord fra selve spørgsmålene eller deres svar.

Opgave 8 - Undersøg datasættet med kode

Disse spørgsmål besvares nemmest ved at skrive noget JavaScript-kode der giver dig svaret. Du behøver ikke lave en egentlig visualisering der viser svarene - det er fint bare at printe svarene, fx med console.log. Det er snyd at kigge direkte i JSON-filen 🙂

Svar på følgende spørgsmål:

  1. Præcist hvor mange spørgsmål er der i alt?
  2. Hvad er det længste spørgsmål i datasættet?
  3. Hvor mange spørgsmål indeholder ordet “STRAWBERRY”?
  4. Hvilket spørgsmål har “HULK” som svar?
  5. Hvilke kategorier finder du i “show number” 4242?
  6. Hvilke spørgsmål finder du i udsendelsen fra “2008-10-13”?

Ekstraopgave - Endnu flere datavisualiseringer

Her er et par lidt mere udfordrende visualiserings-varianter til Jeopardy-datasættet:

  1. Lav en optælling af hvor mange spørgsmål der er hvert år. Visualiser antallet som en barchart.
  2. Lav en optælling og visualiseringer af hvor lange spørgsmålene er, opdelt i intervaller. Det kunne fx være en optælling af hvor mange spørgsmål der er under 10 tegn, hvor mange der er fra 10 til 20 tegn, fra 20 til 30, osv.