Introduksjon til informasjonsvisualisering

Alexander S. [email protected]@ntnu.noh4p://alexanno.net

Phd-‐s:pendiatProsjekt: visualisering – spesielt innendørskart

Er fra Kris:ansandAkkurat som dyreparken – er det mye spennende, rart og nyGg i visualiseringsfaget.

Vi skal se på:-‐ Visualiseringsmetoder-‐ Verktøy-‐ Jeg skal prøve å temme noen av dyrene / demonstrasjon av konkret løsning

Plan

Mo:vasjon

Teknikker

Verktøy

Demo

Li4eratur

Hvorfor?

InformasjonstsunamiKatastrofe eller mulighet?

1,200 exaby

tes

60 millioner ganger så mye som the Library of Congress

Enorme mengder informasjon

Ekstremt mye informasjon1200 exabytes i 2010 alene!Hva med 2020?InformasjonstsunamiCLICKKatastrofe eller mulighet?Visualisering kan hjelpe oss å se lenger – eller surfe tsunamienFår en oversikt over massive mengder data-‐ sammenhenger, trender, uts:kkere, unormaliteterVisualisering er essensielt for geografisk informasjon-‐ Kan du tenke deg å finne frem i en by basert på en liste med koordinater?

Vi skal ta en tur å se de mest berømte dyrene i visualiseringsdyreparken

Prosent / endringsrate

Overordnede trender

Tidsserier::Index chart og sparklines

Index chart / indeksdiagram-‐ Viser ikke fak:ske størrelser, men normalisert data

-‐ Prosent-‐ Endringsrate-‐ ++

-‐ Aksjemarked -‐ Amazon og Google endrer seg likt – men forskjellig verdi

Sparklines-‐ Morsomme! -‐ Kan være inkludert i tekst-‐ Finnes i nyeste Excel(!)-‐ Viser trender-‐ Overordnet-‐ Liker godt mye data

Aggregerer (slår sammen) dataDypdykk i subsetIkke nega:ve verdierIkke for «ikke-‐sum-‐verdier»

Tidsserier::Stacked graph (stream graph)

Yr.no

-‐ Ganske pene-‐ Egner seg (kun) for data som kan la seg slå sammen-‐ Mest naturlig er å summere-‐ Leses «ver:kalt» og horisontalt-‐ Nega:ve verdier kan ikke representeres

Sannsynlighet for et temperaturvarsel-‐ 100% sannsynlig at vi havner i de4e (ver:kale) området-‐ 50% sannsynlig at vi havner i et (mindre) område

Tidsserier::Small mul:ples

Overordnede trender bedreSammenligning enklere (eller ikke?)Alle visualiseringer kan brukes

Hesten:-‐ Oppdaget at hesten «svever» når den løper

Fine for sta:ske medier (bøker, ar:kler, rapporter)Kan enkelt legge informasjon på toppen-‐ Streker som viser sammenheng-‐ Utheve elementer i flere av miniatyrene

Er interak:ve animasjoner bedre?

Tidsserier::Horizon graphs

Høy te4hetBedre enn vanlige «area charts»Er vanskelig å lære

Negative verdier er speilet så de deler arealet med positive verdier

Vanlig graf (en linje)Mye ver:kalt død-‐romNega:ve verdier er under «null-‐linjen»Disse kan speiles og fargelegges – deler plass med posi:ve verdier

Deler i 3 (eller hva som helst) segmenterFargelegger disse forskjellig«slår» de sammen i ver:kal retning.Forskyver hvis nødvendig.

0 |1 1 1 2 2 2 2 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 5 6 7 8 8 8 8 8 8 91 |0 0 0 0 1 1 1 1 2 2 3 3 3 3 4 4 4 4 5 5 6 7 7 8 9 9 9 9 92 |0 0 1 1 1 5 7 8 93 |0 0 1 2 3 3 3 4 6 6 8 84 |0 0 1 1 1 1 3 3 4 5 5 5 6 7 5 |0 2 3 5 6 7 7 7 96 |1 2 6 7 8 9 9 97 |0 0 0 1 6 7 98 |0 0 1 2 3 4 4 4 4 4 4 4 5 6 7 7 7 99 |1 3 3 5 7 8 8 8 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 910 | 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Enkel«Stem» er første signifikante nummerAndre signifikante nummer legges :l som «leaf»Bruker data for å visualisere seg selv

Sta:s:ske visualiseringer::Stem-‐n-‐leaf / histogram

Sammenligner mellom flere dimensjonerSpeilet langs diagonalenInteraksjon er nyGg (brushing og linking)

Sta:s:ske visualiseringer::Sca4er plot matrise

Sta:s:ske visualiseringer::Parallel coordinates

Sammenligner mellom flere dimensjonerKompaktLinjer mellom nabodimensjonerRekkefølge på dimensjoner blir vik:g

Kart::Flytkart

«The best visualiza:on made» (Tule)Veldig rik på informasjonViser mengder i både :d og rom

Hierarkier::Kant-‐node diagrammer og dendrogrammer

Vanlige trestrukturerRotnode i topp – barn under Dendrogram:-‐ Justerer alle løvnoder på samme nivå-‐ Brukt for cluster-‐visualisering og

interak:v filter

Hierarkier::Indented tree / innrykket tre

Vi kjenner denne – men le4 å glemme

Hierarkier::Adjacency diagrams / Nabodiagram (icicle)

«fylt» treLengden av nodene kan representere informasjon

Hierarkier::Adjacency diagrams / nabodiagram (sunburst)

Samme som forrig (icicle), men bruker polare koordinater istedenfor kartesiske

Hierarkier::Treemaps

Deler rektangler rela:vt :l hierarkietKan bruke andre former enn rektangler (Voronoi)Høyere noder er ikke fremtredendeVeldig effek:v plassutny4else

Hierarkier::Packed circles

Ganske lik treemapBruker sirklerSer hierarkiet bedreSløser med plass

Grafer::Force directed layouts / kralstyrt plassering

Simulerer fysisk systemNoder frastøter hverandre (tenk magnet)Kanter (streker) trekker noder :l hverandreKantverdi = :ltrekningskralKan bli komplisert å regne ut (ta li4 :d)

Grafer::Arc diagrams / sirkelbuer

Endimensjonal representasjon av en grafStruktur / overblikk er vanskelig å se«klikker» og «broer» er le4e å seRekkefølge på nodene er essensielt

Grafer::Matriser

«Matema:sk» representasjon av en matriseOle veldig bra og intui:vtFarge og rekkefølge hjelper ole

Kart::Koropletkart (choropleth)

Veldig intui:ve og «eksplisi4e»Tall MÅ VÆRE NORMALISERTE :l det geografiske områdetBefolking VS. Befolknings per m^2Kan bruke andre visuelle variabler enn fargetone (rs mønster)

Kart::Skalerte sirkler/symboler

Symboler kan være sirkler, diagram eller lignendeStørrelse på symboler, spesielt sirkler, bør være psykologisk skalert (ikke lineært)

Kart::Kartogram

Dorling kartogram over fedmeGeografisk form er by4et med symbolStørrelse representerer dataPlassering er omtrent den samme som geografisk

Kart::Space-‐:me-‐cube

Hägerstrand 1970Tiden er brukt som tredje dimensjonGeografi/kart er vanlig X og Y.Brukt :l å studere temporære data-‐ forflytning, øye-‐bevegelser, Minard

Kart:: Non-‐con:guous cartogram

Befolkning pr stat USA

Kart:: Con:guous cartogram

Interne4brukere 2002

Kart:: Typografisk kart

Axis maps

Kart:: Innendørskart

Google IndoorIndoortubeVer:cal color map

Del II

Verktøy

VE

KT

OR

Raster vs. Vektor

Raster: • Punkter / piksler• Skalerer ikke• Raskt å tegne• Mye brukt på webkart• Tiles

Vektor: • Beskrevet matema:sk• Skalerer uendelig• Må tegnes på ny4• Interaksjon• Tileproblem

Data::N2000 og N5000 – gra:s illustrasjonskart

N2000 = 2000m nøyak:ghet1:1 500 000 :l 1:3 000 000

N5000: fra PowerPoint :l ShapeMye informasjonIkke veldig nøyak:g: 5000m1:3 000 000 :l 1:7 500 000Nok for mange oppgaver

Data::Kilder

OpenStreetMap-‐ h4p://www.openstreetmap.org/-‐ h4p://download.geofabrik.de/

Sta:s:sk Sentralbyrå-‐ h4p://www.ssb.no/emner/01/01/20/

arealbruk/index.html

Natural Earth-‐ h4p://www.naturalearthdata.com/

NorgeDigitalt-‐ h4p://norgedigitalt.no

OpenStreetMap:-‐ Dugnadskart-‐ Gra:s-‐ Ikke garantert nøyak:g-‐ GeoFabrik har gra:s ekstrakter

SSB-‐ Mye spennende data-‐ Ole “grid-‐basert” I 1 km grid over Norge-‐ Fine :l mye spennende visualiseringer

Natural Earth-‐ Gra:s data fra kjente kilder-‐ Primært dekker det hele verden-‐ Ganske grove data

NorgeDigitalt-‐ Den norske dugnaden-‐ Indrefileten-‐ Kjøpe :lgang eller være bidragsyter-‐ MANGE har :lgang, uten å vite det(!)

Mange andre kilder også!

Data::Vasking

Ikke vær redd!

Mange formaterMye ski4en dataForvent mye datavaskingBruk så enkle metoder som mulig!Pass på projeksjonerDatabaser er et godt resultat

ExcelNotepad på steroider: notepad++, textpad

Find/ReplaceRegular expressions

Google Fusion TablesOpenRefineData wrangler

Tableau

Både gra:s og betalversjon-‐ Enkel web-‐publisering

Drag/dropGanske kraligBegrenset geografisk visualiseringFint :l å kombinere flere visualiseringer

ManyEyes

Eksperiment fra IBM

Web-‐basertEnkeltTilbyr en god del standardvisualiseringer

Inkscape

Open SourceKralig program for vektorgrafikkPrimært tegneprogramKan brukes :l å lage kart fra bunnen avMEN, kan også brukes for å redigere kart fra GIS

Google Chart

Lager interak:ve visualiseringer «on-‐demand»Te4 integrert med Google-‐produkter (drive)Har en kralig API for utviklere-‐ Ex: kan hente inn et oppdatert pie chart akkurat som et bilde i en websideFint for web

Google Fusion tables

Kralig verktøy for å filtere, kombinere og visualisere store datamengderLaster opp data :l Google sine servereBruker Google sin «kral» :l å manipulere dataKan produsere ganske mye, veldig raskt.

Skal se eksempel på kommunekart senere

CartoDB

Lag di4 eget kart på ne4Alt skjer i «skyen»

Last opp egne dataKjør noen bestemte metoderFå :lgang :l kart fra CartoDB sine servereKan utvikle mot tjenesten

Såkalt «freemium»: koster penger e4er hvert (Spo:fy-‐modellen)

GeoCommons

Mye av samme som CartoDB

Lag di4 eget kart på ne4Alt skjer i skyenLast opp egne dataManipuler dataLag kartvisualiseringer

Såkalt «freemium»: koster penger e4er hvert (Spo:fy-‐modellen)

ESRI::ArcGIS, ArcGIS.com, ArcExplorer, ArcGIS4Office

ESRI: verdensherredømme på avansert GIS-‐programvare-‐ Open Source begynner å ta innpå-‐ ArcGIS (incl arcmap): kralig pakke med «alt»

-‐ Analyser-‐ Kartografi-‐ Datamanipulering-‐ Enorme muligheter-‐ Ole det som brukes i organisasjoner som «GIS»-‐ Har også server, API +++

-‐ ArcGIS.com: -‐ Webkart-‐ Klikkeinterface

-‐ Enkelt å bruke-‐ Kan lage en god del spesialiserte kart-‐ Har også noen analysemuligheter

-‐ Har API for utviklere-‐ ArcGIS Explorer:

-‐ En forenklet «visningsmodul» for ArcGIS.com og ArcGIS Desktop-‐ Har noen analysemoduler-‐ Gjør det veldig enkelt å lage «kartpresentasjoner»-‐ Ganske fin i bruk-‐ En slags utvidet Google Earth + PowerPoint

-‐ ArcGIS4Office: -‐ Kart i MS Office(!)-‐ Gjør det forskrekkelig enkelt å få kart i MS Office (excel, powerpoint etc)

-‐ Baksiden av medaljen?-‐ Dyrt – veldig dyrt!-‐ Noe gra:s, som Explorer

Quantum GIS

Ganske kralig!Gra:sHar god stø4e for enormt mange formater (flere enn arcgis)!Kan oppleves som li4 «patch-‐work» noen gangerEn klar favori4

Mapbox::Tilemill

Mapbox: -‐ Sted for å lagre/distribuere kart. -‐ «freemium». -‐ Mange gode (gra:s) verktøy som snakker bra med Mapbox, men også andre.

Tilemill: -‐ Veldig kralig kartografiverktøy for webkart-‐ Gearet mot «:les»/kar~liser. Kan enkelt eksportere høyoppløselig i andre format også.

-‐ Tar imot det meste av kartdata-‐ Bruker CartoCSS for å «s:le» kartene. -‐ Gjør det veldig enkelt å lage avanserte kartvisualiseringer-‐ Anbefales på det sterkeste-‐ Vi skal ha en demo e4er hvert-‐ Øving på nyåret med Atle

Bryte grensene?

Programmere!

GMaps API

Startet webkart-‐revolusjonenKraligPrimært re4et mot google :lesStø4es av alle, overaltDefini:vt den mest utbredte kartklienten

Er en enorm satsing fra Google – og nå et kjerneproduktMilliarder av $ går med på å drile de4e.

Lisenser+$$

Kan ikke «alt»: projeksjoner rs

OpenLayers

Av GIS’ere – for GIS’ereMye avansert funksjonalitetVeldig kraligKan gjøre det aller meste

OpenSource-‐ Både posi:vt og nega:vt-‐ Atle sier nok mer på nyåret

Baksiden:-‐ Kan oppleves li4 komplisert og «tungrodd»

OpenLayers 3 (neste versjon)-‐ Vil være vesentlig mye kraligere-‐ 3D, WebGL, enklere, bedre dokumentert-‐ Når? Tja…

Leaflet

Satser på enkelhetNoen få oppgaver – men gjør de veldig braHTML5Mobilvennlig«smooth»

D3.js

DataDrivenDocumentsVisualisering direkte I ne4leseren-‐ Javascript

Manipulerer på “dokumenter”-‐ SVG, HTML, CSS

Bruker data for å endre på webdokumenter-‐ Dokumentene kan være vektorgrafikk (svg), html eller alt mulig annet I ne4leseren.

-‐ Ikke et ekstra visualiseringsspråk, men et verktøy for å manipulere eksisterende webdokumenter

-‐ Veldig kralig-‐ Har stø4e for en god del geografisk visualisering

Protovis

Visualisering direkte i ne4leserenJavascriptForgjenger :l D3.jsMange kralige visualiseringsteknikker

Processing

Eget språkLigner på Java/JavascriptVeldig enkelt å lage kralige visualiseringerNoen geografiske pakker

Lagd egen versjon i Javascript for visualisering i ne4leseren

R

Eget språkLagd for sta:s:ske beregninger og visualiseringerEgnet for store datase4 og komplekse analyserGanske avansert å lære segIkke fryktelig le4 å lage fine visualiseringer

Enda sulten?

Screenshot fra selec:on.datavisualiza:on.chUtvalget er enormt!Ikke se4 dere fast i én av de – shop li4 rundt.Lurt å kunne et noen få ganske godt

Demo:me!PowerPoint

h4p://youtu.be/2679tpDiWqY?hd=1

Demo:me!GoogleFusionTables

h4p://youtu.be/dki1xy3UMUQ?hd=1

VideoN2000Merge med folketall fra SSB-‐ «Total»

-‐ Er de4e rik:g?-‐ «TotalKv»

-‐ Bedre?

Farger:-‐ Eksperimenter med forskjellig skal-‐ Colorbrewer2.org

Send rundt på ipad

Finnes 2 hull i datase4et – hvilke er disse?-‐ Hjemmelekse

Demo:me!TileMill

h4p://youtu.be/VXs15FUq4qc?hd=1

VideoN2000 i TilemillPiratkartEnkelt å eksportere :l pdf/png og som :ledatabaser (mb:les)Kan lastes direkte :l Mapbox (obs størrelse og $)

Kommet på noen gode ideer?

Spørsmål? Hva tror dere er mest nyGg i din organisasjon?Hva kommer dere :l å prøve ut?Hva var vanskelig?

Ressurser

h6p://selec:on.datavisualiza:on.ch/h4p://flowingdata.com/h4p://processing.org/learning/books/

Few, S. 2009. Now I See It: Simple VisualizaRon Techniques for QuanRtaRve Analysis. AnalyRcs Press. TuYe, E. 1983. The Visual Display of QuanRtaRve InformaRon. Graphics Press.TuYe, E. 1990. Envisioning InformaRon. Graphics Press. Ware, C. 2008. Visual Thinking for Design. Morgan Kaufmann. Wilkinson, L. 1999. The Grammar of Graphics. Springer.Spence, R., 2007. Informa(on Visualiza(on: Design for Interac(on, PrenRce Hall.Fry, B., 2008. Visualizing Data: Exploring and Explaining Data with the Processing Environment, O’Reilly Media.Noble, J., 2012. Programming Interac(vity, O’Reilly Media.Hägerstrand, T., 1970. What about people in Regional Science? Papers of the Regional Science Associa(on, 24(1), pp.6–21.Heer, J., Bostock, M. & Ogievetsky, V., 2010. A tour through the visualizaRon zoo. Communica(ons of the ACM, pp.1–22.