![Page 1: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/1.jpg)
INFM 603: Information Technology and Organizational Context
Jimmy LinThe iSchoolUniversity of Maryland
Wednesday, April 2, 2014
Session 9: Visualization
Material borrowed from slides by Ben Shneiderman for his visualization course
![Page 2: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/2.jpg)
Visualization Why visualizations?
Human perceptual skills are remarkable Human image storage storage is fast and vast
What are visualizations for? A good visualization tells a story A great visualization delivers insight
Science as well as an art…
![Page 3: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/3.jpg)
Raw Ingredients Types of data
Categorical data Ordinal data Numerical data
Ways of representing data Height Width Thickness Area Angles Size Shape Color
![Page 4: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/4.jpg)
![Page 5: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/5.jpg)
Static vs. Interactive Interactive visualizations allow users to “explore”
the data Overview Zoom and filter Details-on-demand
Brushing and linking is a powerful technique
![Page 6: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/6.jpg)
Info Porn Informative visualizations vs. info porn
Beware of infographics and chart junk
![Page 7: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/7.jpg)
http://infosthetics.com/archives/chart_junk_effective.jpg
![Page 8: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/8.jpg)
http://thedoublethink.com/wp-content/uploads/2009/07/keynote-chartjunk.jpg
![Page 9: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/9.jpg)
http://www.captech.org/vcp/mathmania/February/images/GasGraph.jpg
![Page 10: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/10.jpg)
Compare: New York Times interactive visualization
http://junkcharts.typepad.com/junk_charts/music/
![Page 11: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/11.jpg)
Line Graphs (+ Variants) Suitable for what types of data?
What makes a good line graph?
http://nces.ed.gov/nceskids/help/user_guide/graph/images/line.jpg
![Page 12: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/12.jpg)
Stacked Graphs Multiple time-series data “stacked” on top of each
other Useful for showing aggregates
Sometimes called “stream graphs”
![Page 13: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/13.jpg)
![Page 14: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/14.jpg)
http://www.babynamewizard.com/voyager#
![Page 15: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/15.jpg)
http://hci.stanford.edu/jheer/files/zoo/
![Page 16: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/16.jpg)
http://hci.stanford.edu/jheer/files/zoo/
![Page 17: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/17.jpg)
Small Multiples Multiple small graphs arranged in a grid
Advantages and disadvantages?
![Page 18: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/18.jpg)
http://informationdesignmdippold.files.wordpress.com/2011/06/good-id-1.jpg
![Page 19: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/19.jpg)
Spark Lines
http://www.plainlanguage.com.au/sparklines.png
![Page 20: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/20.jpg)
Bar Graphs (+ Variants) Suitable for what types of data?
Following examples from d3.js
![Page 21: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/21.jpg)
![Page 22: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/22.jpg)
![Page 23: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/23.jpg)
![Page 24: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/24.jpg)
![Page 25: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/25.jpg)
Scatterplots Suitable for what types of data?
Note availability of other ways to encode data at points
![Page 26: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/26.jpg)
http://www.gapminder.org/
![Page 27: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/27.jpg)
Pie Charts (+ Variants) Suitable for what types of data?
Different ways for labeling
![Page 28: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/28.jpg)
More Chart Junk
![Page 29: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/29.jpg)
Sunburst Trees
http://hci.stanford.edu/jheer/files/zoo/
![Page 30: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/30.jpg)
Icicle Diagrams
http://hci.stanford.edu/jheer/files/zoo/
![Page 31: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/31.jpg)
Visualizing Hierarchies
http://hci.stanford.edu/jheer/files/zoo/
![Page 32: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/32.jpg)
TreeMaps Useful for representing hierarchical relationships
Two mechanisms for coding information: Size and Color Physical location of boxes not usually meaningful
Requires learning to read
![Page 33: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/33.jpg)
http://www.smartmoney.com/map-of-the-market/
![Page 34: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/34.jpg)
Market mixed, February 8, 2008:Energy & Technology up, Financial & Health Care down
![Page 35: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/35.jpg)
Market rises 319 points, November 13, 2007:Five exceptions
![Page 36: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/36.jpg)
Heatmaps Data represented in a matrix
Matrix values are code coded
![Page 37: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/37.jpg)
http://eyetools.com/images/blog/2/google/eyetools_google_search.jpg
![Page 38: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/38.jpg)
Miguel Rios and Jimmy Lin. Visualizing the “Pulse” of World Cities on Twitter. ICWSM 2013.
![Page 39: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/39.jpg)
Miguel Rios and Jimmy Lin. Visualizing the “Pulse” of World Cities on Twitter. ICWSM 2013.
![Page 40: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/40.jpg)
Miguel Rios and Jimmy Lin. Visualizing the “Pulse” of World Cities on Twitter. ICWSM 2013.
![Page 41: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/41.jpg)
Miguel Rios and Jimmy Lin. Visualizing the “Pulse” of World Cities on Twitter. ICWSM 2013.
![Page 42: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/42.jpg)
Miguel Rios and Jimmy Lin. Visualizing the “Pulse” of World Cities on Twitter. ICWSM 2013.
![Page 43: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/43.jpg)
Choropleth Maps
http://hci.stanford.edu/jheer/files/zoo/
![Page 44: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/44.jpg)
http://www.geog.ucsb.edu/~jeff/gis/choropleth_maps.html
![Page 45: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/45.jpg)
http://www.excelcharts.com/blog/animation-small-multiples-growth-walmart-excel-edition/
![Page 46: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/46.jpg)
Small Multiples vs. Animations Advantages and disadvantages?
![Page 47: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/47.jpg)
Visualizing Networks Types of networks: social networks, interaction
networks, biological networks, computer networks, etc.
Standard algorithm uses force-directed layout
![Page 48: INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, April 2, 2014 Session 9: Visualization](https://reader038.vdocuments.us/reader038/viewer/2022103021/56649c775503460f9492c2a8/html5/thumbnails/48.jpg)