JTELSS - pimp your learning analytics with proper visualisation techniques

526 views

Published on

Workshop at the JTEL SS in Cyprus - together with Sten Govaerts & Erik Duval

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
526
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JTELSS - pimp your learning analytics with proper visualisation techniques

  1. 1. PIMPYOUR LEARNING ANALYTICSWITH PROPER INFORMATIONVISUALISATIONJoris Klerkxjoris.klerkx@cs.kuleuven.beJTEL Summerschool 2013, LimassolSten Govaerts Erik Duvalerik.duval@cs.kuleuven.besten.govaerts@epfl.chWednesday 5 June 13
  2. 2. Actionable dashboardsWednesday 5 June 13
  3. 3. Some design basicsgraphvisualizationOn the menu.Create your own learning analytics dashboardWednesday 5 June 13
  4. 4. Find out what a data set is aboutInformation Visualisation is the use of interactivevisual representations to amplify cognition [Card. et. al]What are the stories behind the data?Communicating dataFacilitate human interaction for exploration and understandingEmpower people to make informed decisions andchange their learning behaviourDiscover patterns & errors in the dataWednesday 5 June 13
  5. 5. Anscombe’s quartet•uX = 9.0•uY = 7.5• sigma X = 3.317• sigma Y = 2.03• Y = 3 + 0.5X• R2 = 0.67Find the patterns...Wednesday 5 June 13
  6. 6. Anscombe’s quartet•uX = 9.0•uY = 7.5• sigma X = 3.317• sigma Y = 2.03• Y = 3 + 0.5X• R2 = 0.67Wednesday 5 June 13
  7. 7. http://www.datavis.ca/milestones/Not new.Wednesday 5 June 13
  8. 8. Some facts to keep in mind.Wednesday 5 June 13
  9. 9. Our brains makes us extremely good at recognizing visual patternsHumans have advanced perceptual abilities.Wednesday 5 June 13
  10. 10. Our brains makes us extremely good at recognizing visual patternsHumans have advanced perceptual abilities.Wednesday 5 June 13
  11. 11. Humans have little short term memoryOur brains remember relatively little of what we perceiveMake it interactive, provide visual helpWednesday 5 June 13
  12. 12. Real data is ugly and needs to be cleaned.Pre-process your data with existing tools, eg. google refinehttp://www.netmagazine.com/features/seven-dirty-secrets-data-visualisationhttps://code.google.com/p/google-refine/Wednesday 5 June 13
  13. 13. Which of these line graphs is easier to read?Forget about 3D graphs, we see in 2,05DOcclusion.Complex to interact with.Doesn’t add anything to the story."""""""""""5/27/15/28/15/29/15/30/15/31/16/1/13"6/2/13"6/3/13"6/4/13"6/5/13"6/6/13"6/7/13"Student"1"Student"2""Student"3"Student"4"Student1Student3051015202530354045505/27/135/28/135/29/135/30/135/31/136/1/136/2/136/3/136/4/136/5/136/6/136/7/13Student1Student2Student3Student4Cumulative hours spent in a course Cumulative hours spent in a courseWednesday 5 June 13
  14. 14. Size & angle are not pre-attentive: difficult to compareLimited short term (visual) memoryWho wrote more blogposts? Student 1 or student 4?blogposts(Student1Student2Student3Student48"10"10"10"blogposts(Student"1"Student"2"Student"3"Student"4"blogposts(Student1Student2Student3Student4Forget about 3D graphs“Save the pies for dessert” S. FewWednesday 5 June 13
  15. 15. Use pre-attentive characteristicsAbility of low-level human visual systemto rapidly identify certain basic visual propertieshttp://www.csc.ncsu.edu/faculty/healey/PP/e.g. find yourself as studentBe careful with combinations (serial search)Wednesday 5 June 13
  16. 16. USE COMMON SENSE0"5"10"15"20"25"30"tweets" blogposts" comments"on"blogs" Reports"submi7ed"AmountStudent activity0"5"10"15"20"25"30"blogposts" tweets" comments"on"blogs" Reports"submi7ed"Amount0"5"10"15"20"25"30"blogposts" tweets" comments"on"blogs" Reports"submi7ed"AmountWednesday 5 June 13
  17. 17. Provides someimpressions aboutstudent activity0"10"20"30"40"50"60"Student"1" Student"2" Student"3" Student"4"Reports"submi7ed"comments"on"blogs"tweets"blogposts"0%#10%#20%#30%#40%#50%#60%#70%#80%#90%#100%#Student#1# Student#2# Student#3# Student#4#Reports#submi;ed#comments#on#blogs#tweets#blogposts#What/how are you comparing?What story do you get from it?Wednesday 5 June 13
  18. 18. 0" 5" 10" 15" 20" 25"Student"1"Student"2"Student"3"Student"4"comments(on(blogs(Provides impressionsabout student activityProvides actual values0" 5" 10" 15" 20"Student"1"Student"2"Student"3"Student"4"blogposts(0" 5" 10" 15" 20" 25" 30" 35"1"2"3"4"tweets%+Coordinated graphsWednesday 5 June 13
  19. 19. Step 1: Formulate initial questions“where” “when’’ “how much” “how many” “How often” (“why”)Who are your intended users? (teachers? students? researchers?)Wednesday 5 June 13
  20. 20. Step 2: Understand the datasetDefine the characteristics of the dataTime? hierarchical? 1D? 2D? nD? network data?Quantitative, Ordinal, Categorical?S. Stevens “On the theory of scales and measurements” (1946)Wednesday 5 June 13
  21. 21. Encode data points into visual formStep 3: Apply a visual mappingSimplicity is the ultimate sophistication.Leonardo da VinciEach mark (point, line, are, ...) represents adata elementThink about relationships between elementsWednesday 5 June 13
  22. 22. Sizemost commonly used (?)Wednesday 5 June 13
  23. 23. used for identifying patterns & anomalies in big datasetsColorsUse maximum +/- 5 colors (for categories,.. )Use colorbrewer2.org to select appropriate color schemeEvery square = studentcolors: progress in courseWednesday 5 June 13
  24. 24. ¡ Law  of    ProximityThe closer objects are to each other,the more likely they are to beperceived as a group (Ehrenstein,2004)Gestalt Principleshttp://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationEg. student interestsWednesday 5 June 13
  25. 25. ¡ Law  of    SimilarityObjects that are similar, with likecomponents or attributes are morelikely to be organised together(Schamber, 1986).Objects are viewed in vertical rows becauseof their similar attributes.¡ Law  of  Common  FateObjects with a common movement, that movein the same direction, at the same pace , at thesame time are organised as a group(Ehrenstein, 2004).Gestalt Principleshttp://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 5 June 13
  26. 26. ¡ Law  of  IsomorphismIs similarity that can be behavioural orperceptual, and can be a response basedon the viewers previous experiences(Luchins & Luchins, 1999; Chang, 2002).This law is the basis for symbolism(Schamber, 1986).There are more!Gestalt Principleshttp://www.slideshare.net/chelsc/gestalt-laws-and-design-presentationWednesday 5 June 13
  27. 27. SOME HELPWednesday 5 June 13
  28. 28. SOME HELPWednesday 5 June 13
  29. 29. http://jlsantoso.blogspot.com/2013/05/reveal-it-applied-in-educational-context.htmlExample 1Wednesday 5 June 13
  30. 30. Example 2Wednesday 5 June 13
  31. 31. Example 3 (not Learning analytics but just nice...)Wednesday 5 June 13
  32. 32. Some design basicsgraphvisualizationCreate your own learning analytics dashboardTODAYs workshopWednesday 5 June 13
  33. 33. Form teams of 4-5 personsGOAL: Sketch your own learning analyticsdashboard on paperWednesday 5 June 13
  34. 34. we created a model...Wednesday 5 June 13
  35. 35. Wednesday 5 June 13
  36. 36. you can extend/change it!Wednesday 5 June 13
  37. 37. It’s time to work!Wednesday 5 June 13
  38. 38. Step 3: Apply a visual mapping to your datasetSketch on paper(Step 4: Think about interaction of visualisation app)e.g. what kind of filtering mechanisms?Step 2: Understand the datasetData characteristics (‘actionable’ ones)Step 1: Formulate initial questions“where” “when’’ “how much” “how many” “How often” (“why”)Who are your intended users? (teachers? students? researchers?)Step 5: How to evaluate visualisations?Wednesday 5 June 13
  39. 39. Present your dashboards.Wednesday 5 June 13
  40. 40. Build Usable & Useful VisualisationsStep 5: How to evaluate visualisations?Wednesday 5 June 13
  41. 41. Step 5: How to evaluate visualisations?Not so easy: how to measure improved insights?Typical HCI metrics don’t always work that well•time required to learn the system•time required to achieve a goal•error rates•retention of the use of the interface over timeWednesday 5 June 13
  42. 42. Step 5: How to evaluate visualisations?Evaluate the right thingMunzner, 2009Wednesday 5 June 13
  43. 43. FURTHER READINGS• ATour through theVisualization Zoo, Jeffrey Heer, MichaelBostock,Vadim Ogievetsky• http://queue.acm.org/detail.cfm?id=1805128• Interactive dynamics for visual analysis, a taxonomy of toolsthat support the fluent and flexible use of visualizations, JeffreyHeer, Ben Schneiderman• http://queue.acm.org/detail.cfm?id=2146416Wednesday 5 June 13
  44. 44. POINTERS• http://wearecolorblind.com/articles/quick-tips/• http://infosthetics.com• http://www.visualcomplexity.com/vc/• http://bestario.org/research/remap• ... (a lot more online! )Wednesday 5 June 13
  45. 45. LIBRARIES• D3.js• http://www.jerryvermanen.nl/datajournalismlist/• Processing• http://wiki.okfn.org/OpenVisualisation• http://flare.prefuse.org/• http://iv.slis.indiana.edu/sw/• http://abeautifulwww.com/2008/09/08/20-useful-visualization-libraries/• Tableau software• R• Multitouch4J• Manyeyes...• ...Wednesday 5 June 13
  46. 46. FURTHER READINGS• “Readings in InformationVisualization: UsingVision toThink”,Card, S et al• “Now i see”,“Show Me the Numbers”, Few, S.• “Beautiful Evidence”,Tufte, E.• “InformationVisualization. Perception for design”,Ware, C.• BeautifulVisualization: Looking at Data through the Eyes ofExperts (Theory in Practice): Julie Steele, Noah IliinskyWednesday 5 June 13
  47. 47. SLIDE ACKNOWLEDGMENTS• Jan Aerts• Sven Charleer• Stephen FewWednesday 5 June 13
  48. 48. THANKYOU FORYOURATTENTION!joris.klerkx@cs.kuleuven.be@jkofmsk48Wednesday 5 June 13

×