14-12-12
Stappen • verzamelen en opschonen
datavisualisatie hoorcollege 4 visualisatie HVA CMD • V2 12 december 2012
• analyseren van data • interpeteren • representeren • in context plaatsen
1
14-12-12
"Ultimately, the key to a successful visualization is making good design choices."
"easy decoding"
How Should You Design It?
"easy decoding" Maak het de gebruiker gemakkelijk door een universele vormtaal te gebruiken. Vormen met universele betekenis, en meetbare, onderscheidende eigenschappen.
2
14-12-12
pre-attentieve eigenschappen gebruiken in een visualisatie
pre-attentieve processen
Pre-attentieve eigenschappen van een visualisatie dwingen de gebruiker op een bepaalde manier te kijken.
Snel en onbewust analyseren van kleur, vorm, locatie en beweging. Inzetten bij het maken van visualisaties.
natuurlijke ordening Het iconisch geheugen evalueert, en brengt automatisch een rangorde aan op basis van visuele eigenschappen.
natuurlijke ordening • • • •
Plaats / positie; Lengte; Lijndikte; Helderheid en verzadiging;
Deze rangorde staat los van taal, cultuur en andere aangeleerde factoren.
3
14-12-12
geen natuurlijke ordening • • • •
Kleurschakering; Vorm; Textuur; Lijnstijl (stippels, strepen)
natuurlijke ordening: kleur • Kleuren hebben geen ordening; • Helderheid en verzadiging wel;
Kleuren hebben sterke sociale conventies, maar deze worden niet door het iconisch geheugen herkend.
natuurlijke ordening: kleur • Kleuren hebben geen ordening; • Helderheid en verzadiging wel;
Kleuren hebben sterke sociale en culturele conventies, maar deze worden niet door het iconisch geheugen herkend. Gebruik kleur om sociale en culturele conventies te versterken waar dat nodig is.
4
14-12-12
onderscheidende waarden Hoeveel verschillende visuele eigenschappen kan een gebruiker waarnemen, onderscheiden en onthouden.
check • natuurlijke ordening • Het aantal verschillende visuele eigenschappen dat een gebruiker kan waarnemen, onderscheiden en onthouden
5
14-12-12
representeren 1. verhaal 2. keuze van dataset 3. visualisatievorm 4. design encoding
verhaal > vraag Vertaal je concept of idee naar een ontwerpvraag. “Hoe groot is de oppervlakte van de olievlek in de Golf van Mexico?”
vraag > doel Het doel van de visualisatie is het antwoord op je ontwerpvraag. Beschrijf het doel in een korte alinea. Ga niet in op details van de implementatie of de vorm.
6
14-12-12
keuze van de dataset
Kwantitatieve vergelijking
Relaties en processen
Abstracte concepten
dataset
statline.cbs.nl/statweb
visuele weergave
statline.cbs.nl/statweb
7
14-12-12
dataset / dimension Kies uit de dataset de variabelen die passen bij het verhaal. Het boek spreken we over data dimensions, waar we in het Nederlands spreken over een gegevensreeks.
dataset kiezen op relevantie • Welke gegevensreeks is relevant voor het verhaal? • Wat zijn de belangrijkste variabelen? • Welke relaties wil je inzichtelijk maken? • Welke gegevensreeksen maken het verhaal interessanter?
Met gegevensreeks bedoelen we het aantal selecties op de dataset die in een diagram worden weergegeven.
encoding Als je weet welke onderdelen van de dataset je gebruikt, kun je de variabelen voorzien van visuele eigenschappen
hoe meer datasets, hoe groter het ontwerpprobleem Hoe meer gegevensreeksen je in één diagram wilt visualiseren, hoe meer individuele visuele eigenschappen de gebruiker moet begrijpen.
8
14-12-12
hoeveel datasets? Visualisaties hebben meestal twee of drie gegevensreeksen Hoe meer gegevensreeksen, hoe lastiger het is om een visualisatie begrijpen.
er is een beperkt aantal ontwerppatronen Er zijn maar een klein aantal ontwerp-patronen waar je als ontwerper uit kunt putten. Je moet werken met beperkte middelen.
Hoe meer datasets en informatiesoorten, hoe scherper je ontwerpkeuzes
9
14-12-12
vorm? Eerst functie, dan vorm Visuele toeters en bellen zijn toegestaan waneer ze de functie verbeteren en versterken. Ze mogen niet afleiden of verwarren.
onderscheidende waarden The second main factor to consider when choosing a visual property is how many distinct values it has that your reader will be able to perceive, differentiate, and possibly remember.
10
14-12-12
kwalitatieve vergelijking Iedere gegevensset bevat een verhaal.
Kwantitatieve vergelijking
Dat verhaal kan er uit gehaald worden door statistiek op de juiste manier toe te passen.
Relaties en processen
Abstracte concepten
kwalitatieve vergelijking
categorische gegevens Categorische gegevens beschrijven eigenschappen van een bepaalde categorie
Wanneer statistiek verkeerd wordt toegepast krijg je ook een verhaal - maar dan wel het verkeerde verhaal.
• man of vrouw • politieke partij • haarkleur • woonplaats Kan niet als getal of meetwaarde worden aangeduid; Vaak weergegeven als percentage; Ook bekend als kwalitatieve gegevens;
11
14-12-12
categorische gegevens • cirkeldiagram • staafdiagram
numerieke gegevens "Quantitative" Bestaat uit getallen: discrete gegevens, afzonderlijk geteld en weergegeven
• •
aantal tanden in je mond aantal pagina's in een boek
continue gegevens, als gebied van waarden of interval weergegeven Ook bekend als kwantitatieve gegevens
numerieke gegevens • lijndiagram • histogram • scatterplot • boxplot
drstat.net
12
14-12-12
natuurlijke ordening bij grafieken • • • •
schalen
Plaats of positie op de assen; Lengte van balken; Lijndikte; Helderheid en verzadiging;
schalen: kwalitatief
schalen: kwantitatief
meetschaal
meetschaal
nominaal
interval
• willekeurige rangorde: m/v
Een meting op intervalniveau betreft een grootheid die wordt uitgedrukt in een numerieke waarde en een eenheid. Verschillen zijn belangrijk.
ordinaal • gestructureerde rangorde: small, medium, large, x large categorische gegevens
ratio Een intervalschaal met een absoluut nulpunt. Daarmee hebben ook verhoudingen (Latijn: ratio) van waarden op deze schaal betekenis. Afstand en lengte zijn voorbeelden.
numerieke gegevens
13
14-12-12
onderscheidende waarden The second main factor to consider when choosing a visual property is how many distinct values it has that your reader will be able to perceive, differentiate, and possibly remember.
kolomdiagram
Een kolomdiagram is vooral bedoeld om een frequentieverdeling van data grafisch weer te geven. Kolomdiagram met één dataset.
kolomdiagram
Een kolomdiagram is vooral bedoeld om een frequentieverdeling van data grafisch weer te geven. Kolomdiagram met drie datasets
14
14-12-12
gestapeld kolomdiagram
Een frequentieverdeling van data uit meerdere gegevensreeksen.
staafdiagram
Een staafdiagram is net als een kolomdiagram vooral bedoeld om een frequentieverdeling van data grafisch weer te geven
handig wanneer ook het totaal van belang is. Staafdiagram met één dataset
staafdiagram
Een staafdiagram is net als een kolomdiagram vooral bedoeld om een frequentieverdeling van data grafisch weer te geven
gestapeld staafdiagram
Een frequentieverdeling van data uit meerdere gegevensreeksen. hierbij is de totale lengte van de staaf steeds 100% en dus steeds even lang. In dit soort diagrammen worden de onderlinge verhoudingen goed zichtbaar.
Staafdiagram met drie datasets
15
14-12-12
cirkeldiagram
het weergeven van procentuele gegevens,
histogram
In een histogram zet je kwantitatieve variabelen met een oplopende volgorde
lijndiagram
vlakdiagram
Verloop van een gemeten waarde (een variabele) met een continu verloop over een bepaald tijdsinterval
Een vlakdiagram wordt gebruikt om de grootte van gebeurtenissen over een bepaalde tijdsperiode weer te geven.
16
14-12-12
D3 spreidingsdiagram of scatterplot
Door naar het verloop van deze punten te kijken kun je zien of er een bepaald verband, een correlatie, tussen de twee variabelen zit.
"easy decoding" Maak het de gebruiker gemakkelijk door een universele vormtaal te gebruiken. Vormen met universele betekenis, en meetbare, onderscheidende eigenschappen.
"easy decoding" Part II p. 21 - 72
Gebruik geen vormen die deze eigenschappenweergeven of daarmee in strijd zijn
17
14-12-12
?
18
