Downloaded 18 times
![Information Visualisation is the use
of interactive visual
representations to amplify
cognition [Card. et. al]
Definition
56](https://image.slidesharecdn.com/20160208infovisles1joris-160208164607/85/20160208-informatie-visualisatie-les-1-56-320.jpg)
![From data.. to interactive
visualisations
[4, 8, 15, 16, 23, 42];
function(d) {
return d3.time.days(new Date(2012, 0, 1),
new Date(2013, 0, 1));
})
name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year
AMC Ambassador Brougham,13,8,360,175,3821,11,73
AMC Ambassador DPL,15,8,390,190,3850,8.5,70
AMC Ambassador SST,17,8,304,150,3672,11.5,72
AMC Concord DL 6,20.2,6,232,90,3265,18.2,79
AMC Concord DL,18.1,6,258,120,3410,15.1,78
AMC Concord DL,23,4,151,,3035,20.5,82
AMC Concord,19.4,6,232,90,3210,17.2,78
AMC Concord,24.3,4,151,90,3003,20.1,80
CSV
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
JSON
65
javascript](https://image.slidesharecdn.com/20160208infovisles1joris-160208164607/85/20160208-informatie-visualisatie-les-1-65-320.jpg)
Uploaded byJoris Klerkx
20160208 informatie visualisatie les 1
This document provides an introduction to an information visualization course. It outlines the goals of the course, which are to provide insights into fundamentals of infovis and its applications, as well as concrete skills for designing, implementing, and evaluating infovis applications. It discusses topics that will be covered like data abundance, visualization examples, the definition of infovis, and introduces the D3.js library. Students are expected to complete a group project, write a paper, and provide feedback to other groups.
EducationâŚ
More Related Content
Similar to 20160208 informatie visualisatie les 1
20160208 informatie visualisatie les 1
- 1. Informatie visualisatie: Les 1 JorisKlerkx - Erik Duval http://hci.cs.kuleuven.be joris.klerkx@cs.kuleuven.be Human-Computer Interaction Dept. Computerwetenschappen KU Leuven
- 2. To research, design,create and evaluate useful tools that augment the human intellect By âaugmen+ng human intellectâ we mean increasing the capability of a man to approach a complex problem situa+on, to gain comprehension to suit his particular needs, and to derive solu+ons to problems (Douglas Engelbart, 1962). 2 Augment group - HCI research lab Dept. Computerwetenschappen KU Leuven https://augmenthuman.wordpress.com Music Technology Enhanced Learning e-health Research 2.0 Health Media (Consumption) Technology Enhanced Learning Science 2.0
- 3.
- 4.
- 5. Waarom zitten julliehier? Wat verwachten jullie? 5
- 6. ⢠inzicht verwervenin⨠de fundamenten van informatie-visualisatie⨠en hoe je die kan toepassen ⢠inzicht verwerven in⨠de toepassingsgebieden⨠van informatie visualisatie ⢠concrete vaardigheden verwerven⨠voor het ontwerpen, implementeren en evalueren⨠van toepassingen die steunen op informatie visualisatie 6
- 7.
- 8.
- 9. ⢠Project-vak, geenexamen (evt. bespreking) ⢠20 studenten = 6 groepen van 3 & 1 groep van 2 ⢠ieder van jullie moet ontwerpen, programmeren en tekst schrijven! 9
- 10. Beoordeling: ⢠Visualisatie &paper (â50-50â) ⢠Feedback aan andere groepjes in studio-sessies ⢠Belangrijk is blijk te geven van inzicht & concrete vaardigheden https://onderwijsaanbod.kuleuven.be/2015/syllabi/n/H04I2AN.htm
- 11.
- 12.
- 13.
- 15.
- 16. 4 stp⨠= 120u⨠=9u/week⨠= 6u buiten zitting! 16
- 17.
- 18. toledo blog + wiki+ slack + spreadsheet 18 Leeromgeving
- 19.
- 20.
- 21.
- 22.
- 23. ? 23 Team vorming, wiki& spreadsheet! http://augment.cs.kuleuven.be/wiki/index.php/InfoVis-1516
- 24.
- 25. DATA ABUNDANCE -BIG DATA 25
- 26. +/- 40% ofworld population 26
- 27.
- 28. Multi-variate data with100s to 1000s of variables âWideâ data
- 29. How to createvalue from of such data? 29
- 30. How to generateinsights from this data? 30
- 31. How to facilitatehuman interaction for exploration with and understanding of data? 31
- 32.
- 33.
- 34.
- 35.
- 36. self driving car <> gps+ dashboard 36
- 37.
- 38.
- 39. Anscombe`s quartet http://en.wikipedia.org/wiki/Anscombe's_quartet Enables discoveryof visual patterns in data sets Graphics reveal data (Tufte, 2001) 39
- 40. World Population Growth Atremendous change occurred with the industrial revolution: whereas it had taken all of human history until around 1800 for world population to reach one billion, the second billion was achieved in only 130 years (1930), the third billion in less than 30 years (1959), the fourth billion in 15 years (1974), and the fifth billion in only 13 years (1987). During the 20th century alone, the population in the world has grown from 1.65 billion to 6 billion. Seeing is understanding40
- 41.
- 42.
- 43.
- 44. Facilitates human interactionfor exploration and understanding http://www.bbc.co.uk/news/world-15391515 44
- 45. T. Nagel, M.Maitan, E. Duval,A.Vande Moere, J. Klerkx, K. Kloeckl, and C. Ratti.Touching transport - a case study on visualizing metropolitan public transit on interactive tabletops. In AVI2014: 12th ACM International Working Conference on AdvancedVisual Interfaces, pages 281â288, 2014. http://www.youtube.com/watch?v=wQpTM7ASc-w Facilitates human interaction for exploration and understanding 45
- 46. http://terror.periscopic.com Shows patterns &triggers questions 46
- 47.
- 48. http://blog.stephenwolfram.com/2012/03/the-personal-analytics-of-my-life/ Shows trends &anomalies in the data, therefore triggers questions 48
- 49. Helps to ďŹndstories, see trends BelgiumBrazil USA India 49
- 50. Sentiment analysis inenterprise social network (slack) Shows patterns 50
- 51. Sentiment analysis inenterprise social network (slack) Triggers questions & creates awareness Should we trust SOTA NLP-algorithms? 51
- 52. Empowers users tomake informed decisions Positive Badges Negative Badges 52
- 53. ⨠Khaled Bachour, FredericKaplan, Pierre Dillenbourg, "An Interactive Table for Supporting Participation Balance in Face-to-Face Collaborative Learning," IEEE Transactions on Learning Technologies, vol. 3, no. 3, pp. 203-213, July-September, 2010 Creates awareness 53
- 54.
- 55.
- 56. Information Visualisation isthe use of interactive visual representations to amplify cognition [Card. et. al] Definition 56
- 57.
- 58. InformationVisualisation Concerned with datathat does not have a well-deďŹned representation in 2D or 3D space (i.e.,âabstract dataâ) Slide source: Robert Putman 58
- 59. ScientiďŹc visualisation SpeciďŹcally concernedwith data that has a well-deďŹned representation in 2D or 3D space (e.g., from simulation mesh or scanner). Slide source: Robert Putman 59
- 60.
- 61. ? 61 Pauze nodig? ofeerder stoppen?
- 62. D3.js Joris Klerkx -@jkofmsk http://d3js.org/ Data-Driven Documents Intro tot... 62
- 63.
- 64. What? Bind arbitrary datado a Document Object Model (DOM) Apply data-driven transformations to the DOM 64
- 65. From data.. tointeractive visualisations [4, 8, 15, 16, 23, 42]; function(d) { return d3.time.days(new Date(2012, 0, 1), new Date(2013, 0, 1)); }) name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year AMC Ambassador Brougham,13,8,360,175,3821,11,73 AMC Ambassador DPL,15,8,390,190,3850,8.5,70 AMC Ambassador SST,17,8,304,150,3672,11.5,72 AMC Concord DL 6,20.2,6,232,90,3265,18.2,79 AMC Concord DL,18.1,6,258,120,3410,15.1,78 AMC Concord DL,23,4,151,,3035,20.5,82 AMC Concord,19.4,6,232,90,3210,17.2,78 AMC Concord,24.3,4,151,90,3003,20.1,80 CSV { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] } JSON 65 javascript
- 66. Advantages Web standards HTML, SVG,CSS All (modern) browsers & platforms Well-known web technologies javascript, json, CSV, ... Extensive API + examples https://github.com/mbostock/d3/wiki/API-Reference IE9, Chrome, FF, Safari, ... mobile, desktop https://github.com/mbostock/d3/wiki/Gallery 66
- 67. Who knows? ⢠HTML? â˘CSS? ⢠http://www.w3schools.com/css/ ⢠Javascript? ⢠http://www.w3schools.com/js/ ⢠SVG? ⢠http://www.w3schools.com/svg/67
- 68. Tools you need â˘Text Editor or IDE ⢠Browser(s) ⢠Developer Tools - embedded in Chrome (or ďŹrebug in FF) 68
- 69. Look out 69 Quite asteep learning curve
- 70.
- 71.
- 72.
- 73. Tegen volgende week â˘Individueel: ⢠d3.js aanleren ⢠d3.js van spreadsheet als simpele case study ⢠kort presenteren in volgende sessie ⢠Spreadsheet aanvullen ⢠Per team: ⢠blog opzetten en op slack aankondigen ⢠Wiki pagina aanvullen ⢠Infovis van de week posten op blog ⢠(digitaal/analoog, individueel)
- 74.