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.