Webteknologi - Opgaver modul 7

Opgave 1 - Undersøg eksemplet

Formålet med denne opgave er at undersøge hvordan koden til et scatter plot i d3.js fungerer.

Find eksemplet på et scatter plot i GitHub-repositoriet under modul07 / scatter-plot-eksempel.

Lav en kopi, og lav følgende ændringer:

Tilføj tre nye punkter nede i venstre hjørne. De skal forme hjørnerne af en retvinklet trekant.
Gør punkternes radius mindre.
Ændre punkternes farve til orange.
Lav et “for loop” hvor du tilføjer 50 nye punkter til datasættet. Punkterne skal have forskellige koordinater, men du vælger selv hvilke. Husk at man kan indsætte nye elementer i et array med push(). Eksempel:
```
dataset.push([50, 100]);
```

Undersøg også følgende spørgsmål:

Har det nogen betydning hvilken rækkefølge punkterne har i arrayet?

Opgave 2 - Lav et scatter plot

Til denne opgave skal du med d3.js tegne et scatter plot som beskrevet i bogen og i dagens præsentation. Du kan bruge eksemplet fra før som skabelon.

Der er en lille tvist. I det plot du skal tegne nu, skal hvert datapunkt består af tre værdier i stedet for to. Hver værdi har følgende form:

//  x,   y,  color
[  50,  20, "red" ]

Din opgave er at tage hele det følgende datasæt, og visualiser det som et scatter plot, hvor hver punkt har den farve der er angivet som den tredje værdi i koordinatet. Der anbefales en radius på mindst 15.

Datasættet får du her:

const dataset = [
  [  50,  20, "red" ], [ 100,  20, "red" ], [ 150,  20, "red" ],
  [ 200,  20, "red" ], [ 250,  20, "red" ], [  50,  60, "red" ],
  [ 100,  60, "green" ], [ 150,  60, "green" ], [ 200,  60, "green" ],
  [ 250,  60, "red" ], [  50, 100, "red" ], [ 100, 100, "red" ],
  [ 150, 100, "red" ], [ 200, 100, "red" ], [ 250, 100, "red" ],
  [  50, 140, "red" ], [ 100, 140, "blue" ], [ 150, 140, "red" ],
  [ 200, 140, "blue" ], [ 250, 140, "red" ], [  50, 180, "red" ],
  [ 100, 180, "red" ], [ 150, 180, "red" ], [ 200, 180, "red" ],
  [ 250, 180, "red" ],
];

Opgave 3 - Skaleringsfunktioner

Formålet med denne opgave er at få øvet det at lave skaleringsfunktioner i JavaScript med d3.js.

Når du ser kommentaren TODO herunder, betyder det, at der er noget kode der mangler at blive skrevet færdigt. Det er din opgave at skrive den manglende kode.

Delopgave 1

// TODO: Opret en lineær skala med variabelnavnet 'scale'
let scale = ???

// Her testes scale-funktionen
console.log(scale(50));  // Skal udskrive '200'
console.log(scale(100)); // Skal udskrive '400'
console.log(scale(250)); // Skal udskrive '1000'

Delopgave 2

// TODO: Opret en lineær skala med variabelnavnet 'scale'
let scale = ???

// Her testes scale-funktionen
console.log(scale(0));   // Skal udskrive '100'
console.log(scale(100)); // Skal udskrive '150'
console.log(scale(200)); // Skal udskrive '200'

Delopgave 3

// TODO: Opret en lineær skala med variabelnavnet 'scale'
let scale = ???

// Her testes scale-funktionen
console.log(scale(0));   // Skal udskrive '500'
console.log(scale(50)); // Skal udskrive '250'
console.log(scale(100)); // Skal udskrive '0'

Opgave 4 - Skalering af scatter plot

Løsningen til opgave 2 skal udvides med skalering. Dvs. at hvis punkterne fylder for meget til at være i SVG-tagget, skal deres (x,y)-koordinater skaleres ned. Og omvendt, hvis SVG-tagget har plads nok, skal illustrationen skaleres op i størrelse. Derudover skal skalerings-funktionen for ‘y’ laves så y-aksen vender rigtigt, altså med (0,0) nede i venstre hjørne. Hvis man beholder (0,0) oppe i venstre hjørne, er illustrationen tydeligvis en smiley der vender på hovedet!

Her er en liste over de ændringer du har brug for at lave i koden:

Der skal indføres skaleringsfunktioner som beskrevet i præsentationen fra i dag. Der er tale om to funktioner - en der kan skalere x-værdien og en der kan skalere y-værdien.
Skaleringsfunktionerne skal anvendes der hvor koordinaterne indgår i koden. Så i stedet for at bruge ‘x’ direkte (eller rettere, ‘d[0]’), skal den altså igennem en skaleringsfunktion først.

Test din løsning ved at ændre på størrelsen af dit SVG-tag.

Test hvor const w = 500; og const h = 400;
Test hvor const w = 300; og const h = 200;
Prøv et par andre størrelser efter eget valg.

Tillægsspørgsmål:

Kan du sikrer at cirklerne ikke rager ud over kanten og bliver “klippet over”?
Ville det give mening at lave en skaleringsfunktion til radius også?

Opgave 5 - Scatter plot med data

Under modul07 / skabelon-vaccination-temperature ligger der en skabelon der viser hvordan man kan indlæse et datasæt som er gemt i “csv”-formattet, dvs. en fil hvor hver linje er en række af værdier adskilt af kommaer. Første linje er overskrifterne.

Det konkrete data i filen er lidt fjollet. Det er antaller af daglige vaccinationer af Covid-19 i Danmark ud fra dato, men også gennemsnitstemperaturen den dag, målt ved Flyveplads Aalborg. Sammenhængen er måske ikke så interessant i praksis, men som en lille øvelse skal du prøve at visualisere datasættet.

Din opgave er at tage skabelonen, og tilføje kode så der vises et punktdiagram (scatter plot) hvor “daglige vaccinationer” plottes op imod “gennemsnitstemperaturen”. Du skal huske at anvende skaleringsfunktioner på data, så plottet passer perfekt ind i et SVG-tag hvor du selv har valgt størrelsen, og så y-aksen vendes rigtigt.

Opgave 6 - Bubble chart med data

Under modul07 / datasæt ligger der endnu et par datasæt. Du skal bruge det der hedder work-week-happiness-population.csv.

Datasættet indeholder en lang række lande, og ved hvert land finder du følgende oplysninger:

Befolkningsstørrelsen i 2017
Gennemnitlig arbejdsuge i 2017 målt i timer
Landets “happiness score” fra 2017, målt på en skala fra 0 til 100.

Denne gang får du ingen skabelon, men du kan bruge løsningen fra sidste opgave som udgangspunkt. Du skal plotte “happiness” op imod “arbejdsuge (timer)” som et punktdiagram.

Når du har gjort det, skal du medtage befolkningsstørrelsen som den tredje dimension. Det skal du konkret gøre ved at lade radius af hvert punkt i diagrammet afhænge af landets befolkningsstørrelse. På den måde ender du med en bubble chart.