Webteknologi - Opgaver modul 8

Opgave 1 - Undersøg eksemplet

Undersøg eksemplet kasser-animation.html og lav følgende ændringer i en kopi:

• Forlæng animationstiden til 4 sekunder.
• Indsæt et lille delay() i transitionen - fx på 500 millisekunder.
• Tilføj y til animationen, så kasserne også flyttes ned af y-aksen.
• Tilføj en ekstra transition der flytter kasserne tilbage til start, efter at den første transition er afsluttet.
• Tilføj en ekstra kasse til hele animationen, så der nu er fire kasser med fire forskellige farver.

Opgave 2 - Lav nye animationer

Du skal lave nogle nye animationer. Brug en af skabelonerne, eller løsningen til opgave 1, som skabelon til hver animation.

• Lav en lille kasse, hvor width, height samt stroke-width vokser over nogle få sekunder. Sørg for at “stroke” og “fill” har to forskellige farver, så de kan skelnes fra hinanden.
• Lav en trekant som et “polygon”. Animér alle tre hjørners position og figurens farve over nogle sekunder.
• Lav tre kugler, der hopper op og ned, ved siden af hinanden, på en række.

Udfordring: Kan du lave det så de tre kugler hopper op og ned, men hvor de starter forskudt af hinanden?

Opgave 3 - Filtrering med knapper på gammel opgave

Nu skal du gå tilbage og lave en ny udgave af en af dine scatter plots. Jeg anbefaler løsningen til enten opgave 5 eller opgave 6 fra modul 7.

Lav ændringer, så data nu kan filtreres. Du skal kunne vise mindst to udgaver af datasættet, ved at trykke på forskellige knapper. Der skal animeres når der skiftes imellem forskellige udgaver.

Fx kunne den første knap vise datasættet uændret, mens den anden knap laver en filtrering, så nogle punkter vælges fra. Hvis man brugte opgave 6 som basis, kunne knap to filtrere så det kun er europæiske lande der vises, knap tre kun asiatiske lande, osv. Tilføj gerne flere forskellige filtreringer.

Opgave 4 - Tilføj sortering på gammel barchart

Tag udgangspunkt i en gammel barchart, fx den du lavede til Jeopardy i opgave 6 tilbage i modul 6.

Lav en ny udgave af din gamle barchart hvor der nu er en knap, der sorterer søjlerne, og viser en animation, når de går fra at være usorterede til at være sorterede.

Opgave 5 - Akser og labels

I præsentationen “d3-akser-labels-klasser” som findes på Canvas, kan I se en kort forklaring af hvordan man laver labels og akser med d3.js. Eksemplerne ligger i GitHub-repositoriet under modul08, og materialet er dækket i bogens kapitel 6 og 8.

Som den sidste opgave i dag, gør følgende:

• Find en gammel barchart du har lavet, og sæt labels på.
• Find et scatter plot du har lavet, og sæt labels på.
• Tilføj også to akser på dit scatter plot - en x-akse og en y-akse.