Bring your own idea - Visual learning analytics

Visual learning analytics

Joris Klerkx Research Expert, PhD. @jkofmsk

Sven Charleer Phd candidate @svencharleer

Erik Duval Professor @erikduval

http://www.slideshare.net/jkofmsk

Our teamHCI lab !

technology enhanced learning music research (personal) health

3 http://eng.kuleuven.be/datavislab/

About you…

Why are you interested in this workshop?

Agenda (more or less)

• BEFORE THE BREAK:

• Information visualization (theory)

• Group work - Design & Sketch your first visualizations

• AFTER THE BREAK:

• (Visual) Learning Analytics Dashboards

• Tips `n tricks

• Group work - Design your own learning analytics dashboard

WHAT?

http://www.slideshare.net/infoscape

Information Visualisation is the use of interactive visual representations to amplify

cognition [Card. et. al]

Anscombe`s quartet ! uX = 9.0 uY = 7.5 sigma X = 3.317 sigma Y = 2.03 Y = 3 + 0.5X

Discover patterns in the data

http://en.wikipedia.org/wiki/Anscombe's_quartet

Tell the story behind the data

Will there be enough food?

Communicate data

http

://w

ww.

foot

print

netw

ork.o

rg/e

n/ind

ex.ph

p/gfn

/pag

e/ea

rth_

over

shoo

t_da

y/

http://infosthetics.com/ http://visualizing.org

http://www.visualcomplexity.com/vc/

http://visual.ly/

http://flowingdata.comhttp://www.infovis-wiki.net

http://datastori.es/

http://helpmeviz.com/

…

(Just enough) THEORY

How many circles?

Humans have advanced perceptual abilities

Our brains makes us extremely good at recognizing visual patterns

¡ Law of Symmetry

Objects must be balanced or symmetrical to be seen as complete or whole (Chang, 2002).

Gestalt Principles

http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation

¡ Law of Proximity

The closer objects are to each other, the more likely they are to be perceived as a group (Ehrenstein, 2004)

¡ Law of Similarity

Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986).

Objects are viewed in vertical rows because of their similar attributes.

¡ Law of Common Fate

Objects with a common movement, that move in the same direction, at the same pace , at the same time are organised as a group (Ehrenstein, 2004).

Gestalt Principles

http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation

¡ Law of Continuation

Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002; Lyons, 2001).

¡ Law of Isomorphism !

Is similarity that can be behavioural or perceptual, and can be a response based on the viewers previous experiences (Luchins & Luchins, 1999; Chang, 2002). This law is the basis for symbolism (Schamber, 1986).

There are many more!http://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation

Gestalt Principles

Which visual encodings do you see?

London Tube Map

http://artspilesenglish.blogspot.be/2011/11/gestalt-theory-exercise-for-3rdlevel.htmlhttp://www.slideshare.net/chelsc/gestalt-laws-and-design-presentation

A limited set of visual properties that are detected very rapidly (< 250 ms) in multi-element display and accurately by the low-level visual system.

Pre-attentive characteristics

Find the red dot

<> Hue

Find the dot

<> shape

Find the red dot

conjunction not pre-attentive

http://www.csc.ncsu.edu/faculty/healey/PP/

Pre-attentive characteristics

Line orientation Length, width Closure Size

Curvature Density, contrast Intersection 3D depth

Do not help with showing exact quantitative differences

Pre-attentive characteristics help to spot differences in multi-element display

E.g. size & radius

How to start your visualization?

Data set Visualisation

Step 1. Get to know your data

Time? hierarchical? 1D? 2D? nD? network? …

Quantitive, ordinal, categorical?

S. Stevens “On the theory of scales and measurements” (1946)

What is the average amount of students that bought the course book ?

Step 2. Formulate questions about your data

What? When? How much? How often? (why?)

When did students start looking at the course material?

How much hours did Peter work on this assignment?

(Why did Peter have to redo his assignment?)

How often did Peter retake the course before he passed?

Encode data characteristics into visual form

Step 3: Apply a visual mapping

Simplicity is the ultimate sophistication. Leonardo da Vinci

Each mark (point, line, area,…) represents a data element

Think about relationships between elements (position)

Find all possible ways to visualize a small data set of two numbers { 75, 37 }

http://blog.visual.ly/45-ways-to-communicate-two-quantities/

+/- 15 minutes

Small groups - sketch

EXERCISE

Learning analytics

31

Collecting traces that learners leave behind and using those traces to improve learning

http://erikduval.wordpress.com/2012/01/30/learning-analytics-and-educational-data-mining/

Learning analytics

32

What to measure? Depends on the user

33

Example traces of Students access to learning resourcesposts in discussion foralogins to learning management systemsposts of assignmentsreplies to postsvotes in lecture response systemstime on page in electronic textbooklocation of device used to access course(and thus proximity to other users)software lines producedcontributions to shared documents or wikis

etc.

Who? !

!

What? !

!

When?

34

Analytics for professors

35

email, twitter, facebook, web reading, physical movement, location, proximity, food intake, sleeping, drinking, emotion tracking, weather info, attention, brainwaves, …

As learning moves online, traces also include…

36

EXERCISE1. Brainstorm about a learning analytics data set !

Choose +/- 5 types of user traces

2. Get to know this data !

Time? hierarchical? Quantitative? Categorical? …

3. What questions do you have about this data !

what? when? How much? etc.

4. Apply a visual mapping !

Marks, position, color, shape, gestalt principles, pre-attentive characteristics

Sketch

BREAK

LEARNING DASHBOARDS (SVEN)

Tips `n tricks

Real data is ugly and needs to be cleaned

http://www.netmagazine.com/features/seven-dirty-secrets-data-visualisationhttps://code.google.com/p/google-refine/http://vis.stanford.edu/wrangler/

Pre-process your data

http://hcil2.cs.umd.edu/trs/2011-34/2011-34.pdf

Forget about 3D graphs

Occlusion Complex to interact with Doesn’t add anything

Size & angle are not pre-attentive: difficult to compare Limited Short term (visual) memory

Save the pies for dessert (S.Few)Which student has more blogposts?

0"

5"

10"

15"

20"

25"

30"

blogposts" tweets" comments"on"blogs"

reports"submi6ed"

Student'1'

Student"1"

0"

5"

10"

15"

20"

25"

30"

blogposts" comments"on"blogs"

tweets" reports"submi6ed"

Student'1'

Student"1"

Use common sense

0" 5" 10" 15" 20" 25" 30"

blogposts"

comments"on"blogs"

tweets"

reports"submi6ed"

Student'1'

Student"1"

0" 10" 20" 30" 40" 50" 60"

Student"1"

Student"2"

Student"3"

Student"4"

blogposts"

tweets"

comments"on"blogs"

reports"submi:ed"

0%# 20%# 40%# 60%# 80%# 100%#

Student#1#

Student#2#

Student#3#

Student#4#

blogposts#

tweets#

comments#on#blogs#

reports#submi;ed#

What/how are you comparing?

What story do you get from it?

Use common sense

http://www.perceptualedge.com/

Which graph makes it easier to focus on the pattern of change through time, instead of the individual values?

Choose graph that answers your questions about your data

http://flowingdata.com/category/statistics/mistaken-data/

BP - leak in gulf of mexico

Don`t use misleading visualizations

Don`t use visualizations to lie... http://www.perceptualedge.com/http://flowingdata.com/category/statistics/mistaken-data/

http://flowingdata.com/category/statistics/mistaken-data/http://flowingdata.com/category/statistics/mistaken-data/

Don`t use visualizations to lie...

Humans have little short term (visual) memory

Our brain remembers relatively little of what we perceive

Humans have advanced perceptual abilities

Our brains makes us extremely good at recognizing visual patterns

Interaction techniques and visual cues can help

http://www.youtube.com/watch?v=OVlJv7ZkvGA

http://queue.acm.org/detail.cfm?id=2146416

EXERCISE1. Reiterate over previous visual mappings !

Incorporate feedback, lessons learned

2. Walk around and present your work to each other !