Å lage en graf av en html tabell kan være nyttig i mange sammenhengar. I et transmedialt prosjekt kan det være relevant feks. for en dokumentarfilm med tilhørande nettside, der nettsida gjenre kan by på meir omfattande informasjon rundt tematikken, mens en film gjerne skal være nær og personleg.
Dette er en stegivs gjennomgang som viser kor du kan lage og publisere en graf basert på en html tabell. Vi skal bruke Google sheets til å skrape en html tabell som viser en tennis spelar si rankinghistorie. Google-sheets regnearket kan brukast som grunnlag for en Datawrapper graf som du kan publisere på ei nettside.
Dette er ikkje så veldig vanskeleg men det er en del småting som kan gå galt på vegen. Denne arikkelen er basert på en del prøving og feiling med tidlegare grupper av studentar.
Første steg: Skrape html tabell med Google sheets
Før vi startar kan vi allerede løyse ett problem som skapte trøbbel for en del studentar i ein time. For at skrapefunksjonen i regnearket skal fungere må du endre språk på din google konto til engelsk. For å endre dette må du inn på innstillingane for google kontoen din. Søk på ‘språk’ / ‘language’ og velg engelsk.
Det er viktig å sette språk til engelsk FØR du opprettar regnearket, ellers vil ikkje funksjonen fungere!
Når språket er satt til engelsk kan du gå til google sheets og lage eit nytt regneark:
https://docs.google.com/spreadsheets/u/0/
Du må ikkje nødvendigvis skrape en html tabell for å få data til en graf. Mindre tabellar med 10-30 rader kan du markere, kopiere og så lime inn i feks. et regneark. Da er det lurt å bruke ‘paste special’ i google sheets for å berre lime inn verdiane i tabellen uten formatering.
Først må vi bestemme oss for en tabell som vi vil importere. Her er lenke til Roger Federer si atpworldtour side som har ranking historie og masse anna informasjon. Vi har brukt denne tabellen i denne leksjonen før. No har vi endelig en bra norsk spelar så da brukar vi Casper Ruud denne gangen.
Du kan så klart velge den spelaren du vil. Å velge Casper Ruud heller en Roger Federer har også en praktisk fordel. Tabellen med Ruud sin komplette rankinghistorikk er på 293 rader, mens Federer sin strekker seg over 1142 rader.
Når du har funne en spelar på atpworldtour sida må du trykke på ‘ranking history’ for å få fram tabellen vi skal skrape.
Kopier url’en til sida med rankingtabellen frå adressefeltet i nettlesaren din. For Casper Ruud ser den sånn ut:
https://www.atptour.com/en/players/casper-ruud/rh16/rankings-history
Vi skal bruke denne url’en i google sheets for å skrape rankingtabellen.
Gå tilbake til celle A1 i google regnearket. No skal vi skrive funksjonen som hentar data frå atpworldtour sida. Funksjonen heiter importHTML og den kan importere to ulike html element, lister og tabellar. Vi skal importere ein tabell. Her er ein funksjon som importerer den første tabellen på Casper Ruud si side med ATP ranking historikk. Du kan lime denne rett inn i celle A1 i regnearket ditt:
=importHTML("https://www.atptour.com/en/players/casper-ruud/rh16/rankings-history", "table", 1)I regnearket skal du no sjå tabellen frå atpworldtour sida. Men er dette tabellen vi vil ha?
| Age 22 (1998.12.22) | Turned Pro 2015 | Weight 170lbs(77kg) | Height 6’0″(183cm) |
| Birthplace Oslo, Norway | Residence Oslo, Norway | Plays Right-Handed, Two-Handed Backhand | Coach Christian Ruud |
Før funksjonen nevnte eg at denne funksjonen skrapar den første tabellen på sida og det er akkurat det som har skjedd. Rankinghistorikken er i den andre html tabellen på denne sida. Sjå litt nærmare på importHTML funksjonen over. Du kan sjå at den har et navn, importHTML, og at det er noko meir som skjer mellom eit par parantesar. Mellom desse parantesane er det 3 parameter som er adskilt med komma. Dei tre parametra er url’en til sida vi skal hente html elementet frå, kva type html vi skal importere (tabell), og til slutt et tall som representerer kva tabell vi skal hente. Vi skal ha tabell nr. 2 så derfor må vi endre ‘1’ til ‘2’ i funksjonen.
No skal tabellen med rankinghistorikk være lasta. Neste steg skjer i datawrapper så du kan følge denne lenka:
Her er resultatet frå datawrapper