Interactive visualization and presentation of big data
Datavisualisering går ud på at omsætte data til grafik med det formål at kommunikere viden indeholdt i data til brugere. Datavisualisering kan være både interaktive og statiske visualiseringer, men denne præsentation vil omhandle interaktive visualiseringer.
Konventionelt skelnes der indenfor datavisualisering mellem informationsvisualisering og videnskabelig visualisering. Denne præsentation omhandler informationsvisualisering, der går på at oversætte data til abstrakte visuelle repræsentationer, med det formål at fremhæve specifikke informationer i data.
Et simpelt eksempel på dette er i søjlediagrammet ovenfor, der viser befolkningstal for de 10 lande i verden med størst befolkning per 2017. Det underliggende data for denne visualisering er de mange milliarder mennesker, der findes på jorden. Men i stedet for at vise alle disse mennesker, er de her summet sammen per land hvor hver søjle repræsenterer ét land, og højden på søjlen angiver hvor mange mennesker, der findes i de enkelte lande. Der er givetvis mange flere informationer i det underliggende data (køn, alder, osv.), men i denne visualisering har vi valgt at fremhæve én specifik information, nemlig befolkningstal. Søjlerner og deres højde bliver dermed en abstrakt visual repræsentation af et land og dets befolkningstal, med det formål at fremhæve specifik information om befolkninstal per land.
Den anden del af datavisualisering, videnskabelig visualisering, går ud på at rendere billeder så tro mod virkeligheden som muligt (f.eks. fotorealistisk rendering eller visualisering af faktiske strøm eller vindforhold). Videnskabelig visualisering vil ikke blive behandlet i denne præsentation.
I denne præsentation vil vi præsentere en række eksempler på cases, hvor vi har udviklet og brugt interaktive visualiseringer. Udover eksemplerne selv, så er pointen også at vise eksempler på, hvad der er muligt at lave rent visuelt. Det skal forståes på den måde, at vores kompetencer ikke er begrænset til eksemplerne. Tværtimod vil det være muligt at kombinere dele af, eller hele, eksemplerne på kryds og tværs eller udvikle helt nye visualiseringer alt efter behov.
Interaktive Visualiseringer lavet i Alexandra-regi
Når vi snakker om interaktive visualiseringer, snakker vi om værktøjer, der muliggør analyse af data for slutbrugere. Det vil samtidig sige, at visualiseringerne ikke i sig selv indeholder analyser eller konklusioner. I stedet overlades analyserne af og konklusionerne på data til brugeren, som gennem interaktion med visualiseringerne kan vende og dreje data, se på det fra forskellige vinkler, filtrere og udvælge interessante udsnit, analysere disse for til sidst selv at drage konklusioner. Med interaktive visualiseringer bidrager vi dermed med værktøjer, der gør lader brugeren være eksperten, og forstærker dennes evne til at analysere data, for i sidste ende at kunne udføre sit job bedre.
Der findes mange måder at visualisere data på, og det kræver nøje overvejelse at vælge eller udvikle visualiseringer, der passer til formålet i en given situation. F.eks. er et søjlediagram, som vist i starten, oplagt til den slags kategoriske data, men vil være mindre egnet til f.eks. tidsseriedata. Ligeledes bør brugeren af en visualisering også tages i betragtning i valg af visualiseringsteknikker til visualisering af data. Professionelle brugere, der hyppigt bruger en visualisering, kan retfærdiggøre at lære at aflæse en specialiseret visualiseringsteknik - f.eks. et cyklogram brugt til planlægning i byggebranchen.
Pointen er ikke at ligge op til en metodisk gennemgang af visualiseringsteknikker, men i stedet at forklare at valg af visualisering af data sjældent er et entydigt valg. Derfor vil vi i dette afsnit gennemgå en række interaktive visualiseringer, hvor forskellige visualiseringsteknikker er taget i brug. Alle disse interaktive visualiseringer er udviklet i Alexandra Regi. Når det er muligt, vil vi referere til liveversioner af de pågældende interaktive visualiseringer. Når det ikke er muligt (f.eks. hvis visualiseringen ikke er ligger på en offentligt tilgængelig hjemmeside), vil vi inkludere screenshots af visualiseringerne.
Vi vil gennemgå visualiseringerne ud fra fire overordnede temaer:
1. Interaktive visualiseringer i Visual Analytics værktøjer, som er eksempler på, hvor vi har bygget web-baserede applikationer til visual analytics.
2. Integration af Interaktive Vvsualiseringer med omkringliggende systemer, som er eksempler på, hvor interaktive visualiseringer integrerer dybt med applikationer eller funktionaliteter.
3. Interaktive visualiseringer til formidling, der er visualiseringer, som vi har udviklet til at kommunikere specifikke data i afgrænsede cases.
4. Generelt applikérbare interaktive visualiseringer, der er eksempler på generelt anvendelige interaktive visualiseringer, hvilket vil sige, at de kan anvendes til en bred vifte af forskellige typer data.
1. Interaktive visualiseringer i Visual Analytics værktøjer
I dette afsnit vil beskrive tre eksempler på, hvordan vi har udviklet interaktive visualiseringer til brug i visual analytics interfaces. Dvs. hele applikationer, ofte med flere interaktive visualiseringer i sammenspil, som vi har udviklet til visuel analyse af data i forskellige cases. Fordi data der skulle analyseres , vil sammensætningen af interaktive visualiseringer i visual analytics interfaces som oftest være tilrettet den specifikke case. Samtidig vil der dog ofte være god mulighed for genbrug af komponenter enkeltvist på tværs af applikationer.
Som sagt, vil vi i dette afsnit gennem tre Visual Analytics værktøjer. Først VisuLær, der er en prototype på et analyseværktøj til analyse af folkeskolerelevers progression til brug af bl.a. lærere. Næst en tidlig udgave af et værktøj til analyse af IoT sensor data i form af to interaktive visualiseringer af data indsamlet i et supermarked. Sidst et internt udviklet værktøj til analyse af tidsseriedata, herunder datawrangling, filtrering og sammenholdning af forskellige tidsserier. De to sidstnævnte er under udarbejdelse på nuværende tidspunkt.
Derudover har vi udviklet en prototype på et analyseværktøj, udviklet til en landsdækkende offentlig instans. Denne instans er dog i gang med at forberede udbudsmateriale med udgangspunkt i det udviklede analyseværktøj, hvorfor demoer og screenshots holdes internt indtil videre.
VisuLær
I 2017 udviklede vi en prototype på et interaktivt visuelt analyseværktøj for brug af bl.a. lærere og pædagoger til at følge elevers faglige udvikling. Prototypen blev udviklet i samarbejde med bl.a. VIVE (tidl. SFI), Danmark institut for Pædagogik og uddannelse (DPU) for Styrelsen for IT og Læring. Desværre blev projektet afsluttet tidligere end planlagt, da Styrelsen for IT og Læring erfarede, at det ikke var så let at tilvejebringe data, som man havde forestillet sig ved projekt start.
Ovenfor ses den sidste udviklede udgave af prototypen på et analyseværktøj. Prototypen er udviklet som et sæt af krydsfiltrerende visualiseringer, hvor interaktioner med én visualisering opdaterer de øvrige. Som eksempel er den øverste visualisering en tidslinje, hvor der er markeret hvilket typer data, der er registreret per måned (orange er fraværsdata, blå er nationale test data og grøn er data fra Gyldendal). Ved at markere et udsnit af tidslinjen, vil de øvrige visualiseringer opdateres til at vise detaljerede data fra den valgte periode. F.eks. vises nederst til venstre detaljer for seneste nationale test for den valgte (her simulerede) elev.
Prototypen er blevet bygget som en webbaseret datadrevet visualisering, som tilpasser sig brugerens interaktioner og valg. Dvs. at brugeren vil se en ensartet visualisering på tværs af sine valg, hvilket medvirker til at kunne sammenligne forskellige elevers progression.
VisuLær projektet har sit udspring i et ønske om at udbrede anvendelse af data i landets skoler, til at vurdere elevernes udvikling. Det gælder data fra nationale tests, fraværsdata, socioøkonomiske data, data fra læringsmidler, mm. Dataene kan lærere og pædagoger for eksempel bruge til evaluering og feedback af deres elever og til udvikling af egen eller kollegers undervisning.
Set med lærernes briller er udfordringen, at datakilderne ligger spredt og ikke samlet ét sted. Det gør det besværligt at sammenligne data. Hvis en lærer skal sammenstille data i dag, kopierer de det typisk ind i et excelark, og laver dermed deres egne lommesystemer. Vi har udviklet en prototype på en fælles portal, der visuelt samler elevdata ét sted på en letforståelig måde.
Datakilderne til prototypen er leveret af Styrelsen for IT og Læring samt Gyldendal.
Meny
Dette er et igangværende projekt (i Ibiz regi), hvor vi har indsamlet data omkring hvordan folk bevæger sig rundt i et supermarked. Dette er gjort ved at montere beacons i indkøbskurve og vogne, samt montere læsere forskellige steder i butikken, for at aflæse hvor de enkelte beacons er placeret. Ud fra læsernes placering kan man udlede grovkornede bevægelser rundt i butikken i form af zoneskift af kurve og vogne.
På nuværende tidspunkt har vi udviklet to forskellige interaktive visualiseringer, som eksperimenter på, hvordan man visualisere og interagere med sådanne data:
Den første er et kort med de enkelte læseres position (blå cirkler) og deres omkringliggende forsimplede rækkevidde (orange streger) tegnet ind ovenpå et kort over butikkens layout. Mellem læserne er desuden tegnet tovejs pile, der viser hvor mange bevægelser, der er mellem de enkelte zoner. Til venstre er en række simple filtreringsmuligheder, hvor man kan vælge at se bevægelser af en hvis varighed, mellem bestemte zoner eller indenfor bestemte datoer.
Den anden viser samme data, men her struktureret efter hvilke ture, de enkelte zoneskifte tilhører (én tur består af mange zonekifte). Denne visualisering ignorerer det fysiske layout af butikken og viser i stedet de enkelte zoners sekventielle interaktion med hinanden, for at vise hvordan zonernes interaktion skifter (eller ikke skifter), alt efter hvor langt inde i en tur, zoneskiftet foregår.
Inden vi gik igang med udviklingen af ovennævnte visualiseringer, eksperimenterede vi med at lave dashboards i Business Intelligence værktøjet Tableau. Igen er datagrundlaget det samme, men med andre visualiseringer viser man andre udsnit af data. Visualisering med Tableau fungerede godt i en hvis udstrækning, men vi ønskede at undersøge nærmere, hvad vi kunne lave med andre visualiseringstyper.
MTS
Multivariate Time Series (MTS) er et analyseværktøj til at sammenholde og analysere tidsseriedata, for at kunne identificere overlappende og gentagende tendenser på tværs af forskelligartede tidsseriedata.
På nuværende tidspunkt består MTS af to moduler - et modul til wrangling af tidsseriedata direkte i browseren samt et modul til visualisering af det wranglede data:
Ideen med dette analyseværktøj er at gøre det let tilgængeligt for menigmand at tage et tidsseriedatasæt, klargøre det analyse og sammenkoble det med andre tidsseriedatasæt. Ved at kombinere flere tidseriedatasæt er hypotesen, at mønstre og begivenheder, der gentager sig selv kan omtrentligt forudsiges, hvornår de sker igen, ved at analysere data. F.eks. ved at se på udvikling af indekser for forbrugerpriser, aktiepriser og huspriser sammen med fodboldtransfer rekorder (Zidane i 2000, Ronaldo i 2008 og senest Neymar i 2017) for at finde indikatorer på økonomiske kriser. Til dette formål gør et værktøj som MTS det let at importere forskelligartede data og tage dem i brug i analyser.
Datawrangling-funktionaliteten er essentiel i denn sammenhæng, da det muliggør import af forskelligartet data med varierende struktur. F.eks. hvis man henter data fra WTO, får man det gerne i en csv fil (el.l.), hvorimod hvis man henter data fra en portal, der bruger CKAN, får man data i et nested JSON format. MTS implementerer wrangling muligheder, der muliggør at parse, formatere og ensarte sådan data, således det visualiseres og analyseres sammenholdt.
På nuværende tidspunkt er sammenholdningen ikke implementeret, da projektet fortsætter i 2019.
2. Integration af interaktive visualiseringer med omkringliggende systemer
I dette afsnit vil beskrive to projekter, hvor vi har udviklet interaktive visualiseringer til brug i sammenspil med omkringliggende infrastruktur. Det drejer sig om en visualisering lavet til integreret brug i Power BI for en kunde samt en interaktiv visualisering, der integrerer med en machine learning backend.
Cyklogram i Power BI
I IBBD2 projektet udviklede vi en visualisering til brug i Microsoft Power BI for samarbejdsvirksomheden Exigo. Power BI adskiller fra andre business intelligence værktøj, såsom Tableau og Alteryx, ved at give mulighed for at udvikle tredjeparts visualiseringer til intergreret brug i værktøjet. Dvs. at hvis de indbyggede visualiseringer ikke er tilstrækkelige til et bestemt formål, så kan udvikle sin egen. Et smart aspekt ved dette er, at så længe man overholder Power BI's specifikationer, så kan man benytte Power BI's indbyggede dataforbindelser til at forbinde til data - noget som kan være omstændigt at gøre på egen hånd.
Det var netop dette, som Exigo havde brug for. For Exigo udviklede vi et cyklogram, der kan bruges til at vise hvorvidt tidsplaner i storbyggerier overholdes på tværs af enterpriser og lokaliteter. Det udviklede cyklogram integrerer fuldt med en konventionel relationel database gennem Power BI's databaseforbindelser. Ligeledes integrerer det fuldt med Power BI's omkringliggende interface, hvor man kan f.eks. kan vælge datatyper til og fra, samt med Power BI's andre visualiseringer, så man kan lave et dashboard med krydsfiltrerende visualiseringer.
Den underliggende teknologi til at udvikle sådanne tredjepartsvisualiseringer til Power BI er den samme som den anvendte i de øvrige præsenterede visualiseringer. Det skyldes, at visualiseringer i Power BI i praksis vises med samme teknologi som hjemmesider. Derfor man kan overføre det meste af sin viden om at bygge interaktive visualiseringer til hjemmesider over til at bygge tredjepartsvisualiseringer til Power BI.
Integration med Machine Learning (Erhvervsstyrelsen)
I samarbejde med Erhvervsstyrelsen og en ph.d.-studerede fra Aarhus Universitet, har vi udviklet et interaktivt analyseværktøj, der kombinerer interaktive visualiseringer med en machine learning backend. Der er flere udfordringer i at kombinere interaktive visualiseringer med machine learning. En af de fremtrædende udfordringer er modsætningen mellem forventningen om at interaktive visualiseringer er responsive og reagerer hurtigt på interaktion, stillet overfor machine learning processer, der kan tage lang tid at eksekvere. En anden udfordring er, at interaktive visualiseringer ofte bruges eksplorativt til åbenendet analyse, hvor machine learning ofte opnår de bedste resultater, når det anvendes med en model trænet på forhånd.
Formålet med projektet var at lave et værktøj, der kunne hjælpe Erhversstyrelsen med at identificere hvilke virksomheder, der vil være oplagte at kigge nærmere på, f.eks. ved at nærlæse virksomhedens regnskab. Det er noget, der er alt for tidskrævende at gøre for samtlige virksomheder, hvorfor Erhvervsstyrelsen er interesserede i hjælpmidler, der kan hjælpe til, at de kan bruge sin tid bedst.
For at komme omkring de nævnte udfordringer, valgte vi at arbejde med en simpel machine learning algoritme, k-means, der i dette datasæt grupperer virksomheder, der ligner hinanden udfra en række valgte parametre. Parametre er i dette projekt antallet af registreringer af forskellige typer, som virksomheder laver i CVR registret.
Ideen er så som følgende:
- Først vælger man en række parametre (dette gøres i parallel coordinates visualiseringen),
- Herefter bruges machine learning til at gruppere virksomheder i grupper, hvor de virksomheder, der ligner hinanden på de valgte parametre. Dette inkluderer både virksomheder, der er aktive samt virksomheder, der er gået konkurs.
- Dernæst identificeres den eller de grupper, hvor virksomheder, der er gået konkurs er overrepræsenteret. Hvis der f.eks. er 13% af alle virksomheder i datasættet, der er gået konkurs, så vil en gruppe, hvor 57% af virksomhederne er gået konkurs, gøre de 43% resterende virksomheder interessante.
- Denne proces leverer to mulige resultater:
- Et antal virksomheder, der er interessante at kigge på (de 43% fra trin
- Et sæt parametre, der kan benyttes som indikatorer (de valgte parametre i trin 1)
3. Interaktive visualiseringer til formidling
I dette afsnit vil vi præsentere projekter, der formidler specifikt indhold til brugere. Det drejer sig først om en interaktiv og animerende visualisering af fosforudledning som følge af overløb hos Skanderborg Forsyning. Næst en visualisering af aktivitet omkring Tree.0, der er en interaktiv lyd og lys installation placeret forskellige steder i København. Sidst en grovkornet interaktiv visualisering af data indsamlet af Kasper Bay Noer fra PTB i et BioMarkør projekt, som eksempel på hvad man kan lave på kort tid med standardkomponenter.
Modsat de tidligere eksemplers fokus på analyse, så træder analysetyngden lidt i baggrunden i disse eksempler. I stedet er der fokus på visualiseringernes visuelle udtryk og hvordan de fremtoner og kommunikerer data med et mere specifikt fokus.
Skanderborg Forsyning
I samarbejde med Skanderborg Forsyning har vi udviklet et interaktiv og animerende visualisering af fosforudledning som følge af spildevandsoverløb. Den er offentligt tilgængelig her.
Skanderborg Forsyning indledte, efter et Innovationstjek, en dialog med Alexandra Instituttet. De har masser af data om flowet i deres anlæg, og de ville gerne skabe en visualisering, som giver borgere og andre besøgende et informativt og engagerende indblik i, hvad virksomheden arbejder med, og hvordan den gør en forskel. Der kom rigtig mange ideer på bordet, og der vil formentlig komme flere fælles projekter i fremtiden, men i første omgang blev Matthias Nielsen koblet på, og vi foreslog at lave en interaktiv visualisering af, hvordan et kommende nyt anlæg (en såkaldt Densadeg) kommer til at reducere udledningen af fosfor og nitrat til Skanderborg Sø i forbindelse med kloakoverløb som følge af store regnmængder.
Skanderborg Forsyning vil gerne præsentere den interaktive visualisering på en trykfølsom skærm, som gæster på området kommer forbi, og som kan informere om, hvad det er for et byggeri (Densadeg-anlægget), som bliver igangsat i foråret 2019. Visualiseringen skulle derfor være letforståelig for alle og simpel at betjene, samtidig med, at formålet med byggeriet skulle fremgå tydeligt.
Tree.0
Vi lavede en interaktiv visualisering af data indsamlet i 2016 ifm. Tree.0 projektet, som var en interaktiv lys og lyd installation opstillet i København. Udover at bruge aktivitet omkring installationen som input til installationens lys og lydoutput, så indsamlede den også data til en online visualisering af aktivitet omkring installationen. Dette omsatte vi til en interaktiv visualisering, hvor borgere eller andre interesserede kunne se data i et visuelt udtryk, inspireret af den fysiske installation og dens placering i København.
Den interaktive visualisering er bygget op omkring en silhuet af Københavns skyline, hvor en tilsvarende silhuet af den fysiske installation er givet en central og fremtrædende placering. Data er visualiseret som rødder, der udgår fra træet i en underjordisk halvcirkel.
Datagrundlaget er WiFi-målinger, registreringer på tryksensorer, temperatur og vindhastighed.
BioMarkør
BioMarkør er et eksempel på en grovkornet interaktiv visualisering, der viser data indsamlet omkring aktører der arbejder med biomarkører fordelt på tværs af en række parametre. Denne interaktive visualisering er taget med for at vise, hvad der er muligt at lave på kort tid (et par timer) med basale standardkomponenter, men hvor man stadig har interaktiv krydsfiltrering på tværs af komponenter.
4. Generelt applikérbare interaktive visualiseringer
I sidste afsnit omkring eksempler på interaktive visualiseringer vil vi gennemgå to generelt applikérbare visualiseringer, vi har lavet i Alexandra regi. Først vil vi gennemgå PivotViz, der er en interaktiv visualisering til at analysere store mængder multidimensionelle kategoriske data. Næst vil vi gennemgå AffinityViz, der er en interaktiv visualisering til at analysere kvantitativ og kvalitativ data fra bygninger.
Begge disse visualseringer kunne også beskrives som visual analytics værktøjer. Men fordi de vil kunne anvendes, stort set som de er, i en række cases, så beskrives de i et afsnit for sig.
PivotViz
PivotViz er en interaktiv visualisering til at visualisere og analysere multivariat kategoriske data. Navnet - PivotViz - skyldes, at funktionaliteten er inspireret af pivottabeller fra Excel, blot fremstillet visuelt samt med bedre mulighed for at vise mange variable adgang ad gangen (heraf multivariat).
Visualiseringen er generelt applikérbar for kategoriske data, fordi den gør sig ingen antagelser om, at data indeholder bestemte parametre el.l. I stedet indlæser den blot en csv fil, hvor søjlenavnene omsættes til navne for akserne i visualiseringen, og værdierne i de enkelte søjler omsættes indgange / felter på de tilsvarende akser. Herefter foretages en summering af data, på tværs af alle tilstedeværende kombinationsmuligheder, som visualiseres med blå tværgående streger i visualiseringen. Tykkelsen af stregerne afgøres af resultatet af summeringen, således at hyppigt optrædende kombinationer tegnes med tykke streger og vice versa. På denne måde opnåes en initielt overordnet indtryk af, hvordan data interagerer på tværs af akserne.
PivotViz muliggør samtidig filtreringen vha. en teknik kaldet brushing, hvor enkelte indgange eller områder på akser markeres med rektangel. Der understøttes flere brushes på hver enkelt akse samt på tværs af akser. Hvis der er flere brushes på en enkelt akse, vælges alle datapunkter, der går igennem de markerede indgange. Er der flere brushes på forskellige akser vil der kun blive vist data, der går igennem en markeret indgang på samtlige af de akser, der er lavet brushes på.
Styrken ved PivotViz er, at den visualiseres multivariat data på ensartet måde, samtidig med at det gøres interaktivt. Ulempen er, at den er enkeltstående, forstået således at den fungerer i isolation. Givet det rigtige projekt, vil en tilsvarende version kunne implementeres i Power BI, alá den tidligere gennemgåede cyklogram-visualisering.
AffinityViz
Normalt optræder data og store datamængder som tal på en graf, der kan være abstrakte at forholde sig til. Det kan gøre det svært at sætte dataene ind i en kontekst og opstille hypoteser og dermed i sidste ende træffe beslutninger ud fra dataene.
Det var den udfordring, som man stod med i et projekt på Grundfos Kollegiet placeret på Aarhus Ø, hvor man skulle analysere beboernes energiforbrug. Kollegiet er et energimæssigt testlaboratorium, der er udstyret med ca. 4.000 sensorer, der måler alt fra elektricitet til varme og vandforbrug. Samtidig samarbejder forskellige faggrupper som ingeniører, dataloger, sociologer og antropologer på tværs af laboratoriet. De har alle deres måde at tilgå dataene, hvilket gør det svært at kommunikere på tværs af faggrupperne.
Men hvordan skaber man en fælles referenceramme, når de skal tilgå data og afprøve forskellige hypoteser om beboernes forbrug? Løsningen var at udvikle værktøjet “Affinityviz”, som visualiserer de store mængder af data i et diagram, der er en digital tvilling af bygningen.
Ideen med “Affinityviz” er, at man bruger bygningens layout til at fortælle, hvor dataene kommer fra. Man kan se, at det er en lejlighed i en bygning, at man har med at gøre, og dermed bliver det lettere at læse dataene, og folk får en fælles forståelse af dataene.
Dette gør det nemmere læse visualiseringen i en bestemt kontekst og eksplorativt undersøge data, og det gør det lettere - og hurtigere - at undersøge de hypoteser, som man har omkring dataene. Det kan være el- og varmeforbrug.
Det er et oplagt værktøj for alle beslutningstagere i offentlige institutioner, som ofte har behov for at overskue store mængder af data - og træffe beslutninger ud fra det.
Link til live version kan fåes ved forespørgsel.
Teknologier til visualisering af data
Standardiserede teknologier: JavaScript, HTML, SVG og CSS
Samtlige af de præsenterede interaktive visualiseringer er lavet med standardiserede teknologier, der kan afvikles af gængse internetbrowsere lavet indenfor de seneste ca. 5 år. Dvs. at de kan afvikles ved at brugeren blot navigerer til hjemmeside uden krav om forudgående installation af programmer eller plugins. Ligesom med mange andre øvrige systemer, så kan sådanne hjemmesider adgangsbegrænses med login eller til en virksomheds intranet alt efter kundens behov.
Selvom Cyklogramvisualiseringen lavet til Power BI, kan virke som en undtagelse, så er den faktisk lavet med samme teknologier, og teknisk ligner den i høj de øvrige interaktive visualiseringer. Den afvikles blot internt i Power BI i stedet for en internetbrowser.
JavaScript
JavaScript er det indbyggede programmeringssprog, som internetbrowsere kan afvikle, hvilket er en grundlæggende forudsætning for at lave plugin-fri webapplikationer. I de viste interaktive visualiseringer bruges JavaScript til at fortolke data, omsætte det til grafisk elementer samt muliggøre interaktivitet.
HTML
HTML (HyperText Markup Language) er den centrale og grundlæggende del af hjemmesider. Det bruges til at fortælle internetbrowsere hvordan den skal præsentere det indhold, som en hjemmeside viser. I internetbrowsernes spæde begyndelse understøttedes kun simpel tekstformatering samt indsættelse af billeder og links - meget lig funktionaliteten i editoren på Confluence eller i et simpelt skriveprogram ala Wordpad. Sidenhen er der tilføjet ekstra funktionaliteter, der har udvidet HTML sprogets anvendelighed dramatisk. Bl.a. er der tilføjet funktionalitet for fortolkning af SVG (Skalerbar Vektor Grafik), der muliggør rendering af avanceret grafik i webbrowsere.
SVG
SVG (Skalerbar Vektor Grafik) er den ene af to teknologier til rendering af interaktive visualiseringer i internetbrowsere. Den anden er Canvas, som vi ikke kommer yderligere ind på her. SVG har vundet frempas, fordi den grundet sin ddsdfdf, gør det let at koble datapunkter til grafiske elementer (og dermed bibeholde en relation fra grafiske elementer tilbage til datapunkter). Dette er medvirkende til at muliggøre datadrevne interaktive visualiseringer, og medvirker dermed til udbredelsen af SVG som teknologi interaktive visualiseringer. F.eks. som nævnt tidligere, så er SVG valgt som teknologien til at lave visualiseringer der integrerer med data i Microsofts Power BI.
CSS
CSS (Cascading Style Sheets) er en grundlæggende teknologi i internetbrowsere til style (bestemme farve, position, mm.) elementer på hjemmesider. Dette benyttes ekstensivt i de viste interaktive visualiseringer. F.eks. i form at ændre farven på et element når musen føres henover det, eller når der klikkes på elementet.
Teknologier i anvendelse
Ofte bliver de ovennævnte standardiserede teknologier brugt gennem moduler, frameworks el.l., som tredjepart har lavet for at lette gængse arbejdsgange. I dette afsnit vil vi kort omtale et udsnit af oftest brugte sådan tredjeparts kode.
D3
D3 (kort for Data Driven Documents) er det helt centrale softwarebibliotek til udvikling af interaktive visualiseringer til hjemmesider. Det har mange år på bagen og indeholder en meget stor mængde funktionalitet til at beregne data og omforme det til grafiske elementer. Dette har gjort D3 til nok det mest udbredte bibliotek til at lave interaktive visualiseringer til hjemmesider. Ulempen ved D3, i et moderne webudviklingsmiljø, er, at hvis D3 bruges til at lave hele visualiseringer på en hjemmeside, så skal det bruges på en bestemt måde. For at omgå denne begrænsning, så er de seneste version af D3 bygget om til at bestå af en lang række små moduler i stedet for én stor pakke. Dette muliggør at andre softwarebiblioteker kan inkludere D3 moduler enkeltvis, og dermed få D3's funktionalitet samtidig med at de kan lave visualiseringer på sin egen måde. D3 bliver brugt i stor omfang på denne måde, bl.a. af Uber i react-vis softwarebiblioteket, som omtales om lidt.
ReactJS
ReactJS er et af de mest udbredt frameworks til at bygge hjemmesider i dag. Det er udviklet og vedligeholdes af Facebook, der selv bruger det til sine hjemmesider. ReactJS er dermed ikke ikke visualiseringsspecifkt, men grundet dets udbredelse er det alligvel taget med her, da vi har rigtig god erfaring med at udvikle interaktive visualiseringer sammen med hjemmesider udviklet i ReactJS. Af alternativer til ReactJS kan nævnes Angular og Vue, som også vil kunne udvikles sammen med interaktive visualiseringer. Ofte vil en kunde benytte ét framework.
React-vis
react-vis er et bibliotek af visualiseringer til brug sammen med ReactJS. Biblioteket er udviklet og vedligeholdes af Ubers softwareingeniører. Dette bibliotek håndterer en af de grundlæggende problemstillinger, når man vil lave D3 visualiseringer i en hjemmeside lavet med ReactJS. Udfordringen består i at både ReactJS og D3 har sin egen helt specifikke måde at få vist indhold på hjemmesider. Begge måder fungerer rigtig godt - blot er de ikke kompatible. Med react-vis har Uber konstrueret en lang række visualiseringer fra bunden som ReactJS komponenter men med D3 funktionalitet. Der findes andre biblioteker, der tilstræber noget lignende, men dette er taget med fordi 1) det er en stor spiller (Uber), der 2) integrerer et ledende web-framework (ReactJS) med 3) det ledende datavisualiseringsbibliotek (D3).
Kortvisualisering
Visualisering af data sammen med, eller på, kort kræver markante bagvedliggende teknologier. Til dette bruger vi ofte MapBox eller Leaflet.js (også vedligeholdt af MapBox), der begge er modne spillere. Ligesom med react-vis, så har Uber også udviklet et sæt af teknologier til at bruge MapBox sammen med ReactJS. Både i form af react-map-gl, der understøtter GPU accelerede kortvisualiseringer, samt deck.gl der understøtter at ligge adskillige lag af data ovenpå et interaktivt kort.