Visualisering af data Grafisk fortolkning af Tænks Mærkebank ITU december 2010 Jakob Sindballe jsin@itu.dk cpr: 010679-2089 Vejleder: Kevin McLean & Hans Asmussen
Visualisering af data For at se flashanimationen der knytter sig til projektet skal man åbne vis_print.html Interaktiv infografik til Tænks Mærkebank Tænk er forbrugerrådets blad og website, som med udgangspunkt i videnskabelige test, giver grundig information og afdækker forbrugerrelevante emner. En stor udfordring, når man laver test, er at vurdere kvalitet og tilfredshed for forbrugeren over tid indenfor forskellige produktkategorier. Man kan på laboratoriet teste holdbarhed og funktion, men dette knytter sig oftest til få modeller. Derfor har Forbrugerrådet den såkaldte Mærkebank. Her har ca. 4000 personer frivilligt valgt at modtage spørgeskemaer om deres forhold til produkter. Det kan være alt fra græsslåmaskiner til fladskærme, men fælles for alle undersøgelser er, at forbrugerne skal tage stilling til deres eget produkt og ender med at give udtryk for deres tilfredshed. Dette rimeligt komplicerede materiale samles til grafer og lagkagediagrammer på tænk.dk i. Det er meningen at Mærkebanken skal give perspektiv på de forskellige test, men informationen er utilgængelig og gemt af vejen, fordi den formidlingsmæssigt ikke er gennemarbejdet. Som eksempel kan nævnes Tænks test af fladskærme, som er en af de mest populære test. Her har ca. 66.000 set på testresultaterne, men kun 8.000 set Mærkebanken i 2010 ii. Hverken Tænk eller forbrugerne får altså nær så meget værdi for det store arbejde, som undersøgelserne ellers berettiger. Som case er valgt Mærkebankens seneste undersøgelse om printere, der endnu ikke er offentliggjort på websitet, men hvor datagrundlaget er bearbejdet iii. Præsentationen af undersøgelserne fra Mærkebanken er i dag utilgængelig for den almene forbruger og statistik for sidevisninger på Mærkebanken er skuffende. Tænk ønsker, at der laves en interaktiv version af undersøgelsen om printere til tænk.dk, som kan videregive information om forbrugernes holdninger til mærker over tid på en let forståelig, indbydende og seriøs måde. En interaktiv præsentation skal både forbedre formidlingen og berettige til en mere profileret plads på websitet. Gennem projektet har jeg undersøgt forskellige stilarter inden for visualisering af data for at få grafik, interaktion, formidling og information til at smelte sammen. 1
Infografik eller datajournalistik? Der er enormt meget infografik i 2d til print. Der er en lang tradition på aviser for at visualiserer historier og data ved siden af den journalistiske dækning. Noget datagrafik er næsten uforståelig, og er mere dekoration end oplysning. Jeg har forsøgt at holde mig til den mere konservative del af spektret, da Tænk lever af deres troværdighed og desuden er formidlingen af data i Mærkebanken i centrum. Figur 1 - How twitter got attacked with DDoS Jeg har grundlæggende betragtet to forskellige tilgange til visualisering af data. Det ene er at præsentere data på en tilgængelig måde ved hjælp af grafik og interaktion. Data i medier er altid bearbejdet, men denne stilart forsøger at give brugeren tallene og muligheden for at danne konklusioner på egen hånd. Den anden tilgang er en journalistisk bearbejdning af data, hvor informationen præsenteres med et fokus eller tema. Der trækkes tråde mellem forskellige elementer i data, og der præsenteres pointer for beskueren. Et godt eksempel på den første tilgang er Hollandsk Statistik, CBS, der har en interaktiv flash del på deres hjemmeside iv. Her kan man se alt fra demografiske data, hvor adopteret hollandske børn kommer fra i verden, til hvor mange overnattende gæster hollænderne har pr. region. Alt sammen præsenteret nøgternt og uden konklusioner. 2
Figur 2 - Hollands statistik: Vesterlændinge med anden baggrund end hollandsk i Holland De elementer der fungerer bedst er oftest data der enten repræsenterer undersøgelser lavet mange gange over langt tid eller undersøgelser der kan sættes ind i en geografisk kontekst. Interaktionen med en tidslinje, hvor man kan se de forskellige parametre ændrer sig mens man skruer tiden frem eller tilbage, giver anledning til mange spændende observation. Data der dækker et geografisk område fungerer godt, fordi kort er et flot grafisk og let genkendeligt element, som samtidig er interessant at bevæge sig rundt i. Journalistisk bearbejdet data derimod fortæller historier. Det kræver en fortolkning af informationen, og det kræver at man ved hvad man vil fortælle og hvem der er målgruppen. Stanford University har på deres hjemmeside en videorapport om data og journalistik v. Journalism in the age of data fortæller om kombinationen mellem statistik, grafik og journalistik og etablerer et mindset omkring det at formidle data. Nogle visualiseringer er helt uden interaktion, og er mere en lille film om data, men andre forsøger at integrerer historierne med interaktionen. New York Times laver nogle fantastiske datavisualiseringer, og f.eks. deres visualisering af økonomien sammenlignet med økonomiske prognoser vi har sideløbende med visualiseringen en journalistisk dækning. Eller deres visualisering af hvilke andre 3
præsidentkandidater, præsidentkandidater i valgkampen 2007 nævnte vii. Kombineret med udvalgte citater fortæller det en historie, men giver også brugeren mulighed for at lege med data. Figur 3 - Hvem der talte om hvem under den amerikanske præsidentvalgkamp New York Times Historier om printere Efter at have studeret data fra Tænks Mærkebank besluttede jeg at forfølge idéen om at fortælle historier baseret på data. Der er nogle grundlæggende informationer, som er essentielle at brugeren selv kan orienterer sig i. Det er vigtigt at man kan finde ud af markedsandele, og det er vigtigt man kan få information om holdbarhed. Resten af datasættet lægger ikke op til at brugeren skal have adgang til alle enkeltelementer for selv at finde historierne. Det er et enkeltstående sæt uden kronologisk kontekst og jeg har ikke kunne komme op med gode idéer til, hvordan datasættet skulle præsenteres i en mere rå form. Data fra undersøgelsen mener jeg lægger op til at vise data på tværs af de forskellige spørgsmål. I projektet har jeg for eksempel koblet printforbruget med holdbarhed. Det er blevet til en lille historie om, at selvom vi printer en del, går printerne ikke i stykker. 4
Figur 4 - små ubehjælpelige skitser, der er blevet til mange printere Figur 5 - screendump af holdbarhed fra flashprojektet Som man også kan se af eksemplet fra flash projektet, har jeg forsøgt at arbejde med de elementer der indgår i undersøgelsen. Igen er der overordnet to retninger inden for visualisering af data. Rigtig mange illustrationer bliver lavet med klassiske grafiske elementer som lagkagediagrammer, kurver, søjlediagrammer etc. Jeg har brugt lagkagediagrammet til at vise markedsandel og andelen mellem blækprintere og laserprintere er også en slags diagram. Andre illustrationer bruger grafiske elementer til at illustrerer mængder. Som når der er 47 sort/hvid printere og 3 røde. Eller i den spændingsopbyggende animation af blækdråber, der skal illustrerer, hvor få der har en sort/hvid printer. 5
Figur 6 - flere ubehjælpelige skitser der er blevet til blækdråber Figur 7- screendump fra flashprojekt om andelen af sort/hvid-printere Projektet er derfor blevet mere til små animationer, som brugeren sætter i gang fra hovedmenuen. Jeg ville gerne have bragt mere interaktion ind i animationssekvenserne, for eksempel ved at lave mouse-over effekter, men 6
ambitionerne var større end ressourcerne på det område. Figur 8-skematisk opbygning af projektet At håndterer alle børnene Generelt har projektstyringen været en enorm udfordring. Jeg har en baggrund som produktudviklingsingeniør, og er vant til at bruge meget tid i konceptualiseringsfasen. I dette projekt har jeg klart været på udebane. Jeg har aldrig kodet før, og det er kommet fuldstændig bag på mig, hvor svært det er at holde styr på alle elementerne og hvor mange timer der ligger i bug-fixing. Jeg måtte skære menupunkter væk, for at ende op med et sammenhængende projekt, men er egentlig godt tilfreds med at der, så vidt jeg har testet, ikke er huller i interaktionen. Den største udfordring har været at håndterer de dynamisk placeret movieclips. Specielt at få fjernet dem igen. Ud over at skulle forstå begrebet om klasser, havde jeg konstant problemer med at jeg enten ikke fik fjernet movieclips eller forsøgte at fjerne movieclips der ikke var der. Der findes højest sandsynligt en langt mere elegant måde at gøre det på, men jeg har haft succes med variable, der identificerer om en funktion er blevet afviklet, og det er et trick jeg har brugt flere steder. Jeg har begrænset mig til 3 ud af 5 menupunkter, og jeg kan se problemets omfang eskalerer drastisk, når kompleksiteten af menuen stiger. At fjerne movieclips har, paradoksalt nok, været den største udfordring i koden. i Se bilag 1: Mærkebank TV ii Tallene er trukket ud vha. Google Analytics i Tænks webafdeling 16/11-2010 iii Se bilag 2: Mærkebank printere iv http://www.cbs.nl/en-gb/menu/publicaties/webpublicaties/interactief/default.htm v http://datajournalism.stanford.edu/ 7
vi http://www.nytimes.com/interactive/2010/02/02/us/politics/20100201-budgetporcupine-graphic.html vii http://www.nytimes.com/interactive/2007/12/15/us/politics/debate.html# 8
Storyboards Til at starte med var det meningen at der skulle være en indledening, som også skulle gemme sig bag startknappen. Markedsmenuen har egentlig været meget fast i lang tid. Først en lagkage til at vise markedsandele, og derefter nogle der jubler over deres printer og nogle få der vender tommelfingeren nedad. Holbarheden er essentielt i Mærkebanken, men i denne undersøgelse var der en signifikant forskel på nogle af mærkerne. Derfor blev historien at de ikke gik i stykkker, selvom vi printer meget. Der var mange muligheder med blækforbrug og jeg forsøgte flere gange med noget blæk der flød ud af et diagram. I sidste ende synes jeg dog der var et bedre flow i det med dråberne og stregerne. Funktionern som scanner, kopimaskine og trådløst netværk skulle have med. Specielt fordi jeg havde glædet mig til at lave en animation, hvor et wifi-signal startede 40 % af printerne. menupunktet blev dog sorteret fra for at skære projektet til en realistisk størrelse.
Nogle småskitser Opdeling af hovedemnu Forsøg med overlap Forsøg med elementer Forsøg med overlap Forsøg med overlap Forsøg med overlap Forsøg med elementer Forsøg med elementer Dynamiske grafer Dynamiske grafer Dynamiske grafer