1. Computer-Mediated Communication
Visual Interfaces and Visualizations
15 February 2012

2. Cheshire & Fiore — Computer-Mediated Communication
Assignment #1 due
2/15/12
Cheshire & Fiore — Computer-Mediated Communication

3. What can visualization do for you (or your users)?
…provide a broad overview
…reveal patterns
…permit comparisons
…tell stories
…permit reflection (on history, activity, relationships, etc)
Ask not what you can do for visualization…
Provide a broad overview
Reveal patterns — using the power of the human visual system to do the heavy lifting semi-automatically
Permit comparisons
Tell stories — sometimes quite selectively.
Permit reflection — on history, on activity, on relationships.
11/29/201811/29/2018
Computer-Mediated Communication

4. Designing visual social interfaces
Create affordances with social translucence
Use rich media deliberately, when warranted
Represent humans and their faces carefully
Be ambiguous: users can interpret just fine
Reflect users’ actions back to them
Let the big picture emerge from details
Consider whether customization is worth it
A bit of a cheat sheet, drawing on Erickson, Erickson & Kellogg, Donath, and a few extra thoughts…
11/29/201811/29/2018
Computer-Mediated Communication

5. Computer-Mediated Communication
A couple of classics
11/29/201811/29/2018
Computer-Mediated Communication

6. Computer-Mediated Communication
Physician John Snow’s map of cholera cases around the Broad Street Pump, Evidence for waterborne transmission of cholera. Importance of aggregation (Monmonier).
11/29/201811/29/2018
Computer-Mediated Communication

7. Computer-Mediated Communication
Marco Cozzi’s point: map “lying” and election maps
Regular by state
Population cartogram (size proportional to population)
By county (a favored map for showing Rep support)
By county cartogram
Amy’s suggested map…
(All 2004 political maps from politicalmaps.org)
11/29/201811/29/2018
Computer-Mediated Communication

8. Computer-Mediated Communication
From Tufte’s site: “Probably the best statistical graphic ever drawn, this map by Charles Joseph Minard portrays the losses suffered by Napoleon's army in the Russian campaign of Beginning at the Polish-Russian border, the thick band shows the size of the army at each position. The path of Napoleon's retreat from Moscow in the bitterly cold winter is depicted by the dark lower band, which is tied to temperature and time scales.“
11/29/201811/29/2018
Computer-Mediated Communication

9. Computer-Mediated Communication
One millimeter = 10,000 men.
11/29/201811/29/2018
Computer-Mediated Communication

10. Computer-Mediated Communication
Edward Tufte
Overarching theme: clear, rich, data-dense visualizations.
Some principles:
Show the data
Encourage visual comparisons
Avoid distorting what the data have to say
Present many numbers in a small space
Make large data sets coherent
Reveal the data at several levels of detail
Serve a reasonably clear purpose
Be closely integrated with the statistical and verbal descriptions of data
11/29/201811/29/2018
Computer-Mediated Communication

11. Small multiples 10/19/10 MSU — TC 375 — Fiore
Enforce visual comparisons. Take advantage of the incredible human ability to detect differences.
10/19/10
MSU — TC 375 — Fiore

12. Let big picture emerge from agglomeration of details
Micro/macro designs
Let big picture emerge from agglomeration of details
From Edward Tufte’s series on information design. Other major themes: Use small multiples. Enforce visual comparisons.
Source: David H. Hathaway, Marshall Space Flight Center, NASA
10/19/10
MSU — TC 375 — Fiore

13. Notes on size, color, and transformation
10/19/10
MSU — TC 375 — Fiore

14. 10/19/10
MSU — TC 375 — Fiore

15. r = 1 r = 2 r = 3 A = π A = 4π A = 9π 10/19/10 MSU — TC 375 — Fiore
Encourage visual comparison. Areal vs. linear increases in size.
A = 9π
10/19/10
MSU — TC 375 — Fiore

16. (J.B. Krygier) 10/19/10 MSU — TC 375 — Fiore
Qualities of points, lines, and areas should be deliberately chosen.
10/19/10
MSU — TC 375 — Fiore

17. Some of Monmonier’s operations.
10/19/10
MSU — TC 375 — Fiore

18. Hue + saturation (same brightness)
10/19/10
MSU — TC 375 — Fiore

19. (J.B. Krygier) 10/19/10 MSU — TC 375 — Fiore
Colors have semantic meaning.
(J.B. Krygier)
10/19/10
MSU — TC 375 — Fiore

20. Fiore & Smith
10/19/10
MSU — TC 375 — Fiore

21. Saturation 80, Brightness 80
10/19/10
MSU — TC 375 — Fiore

22. Visualizing digital histories
11/29/201811/29/2018
Computer-Mediated Communication

23. Computer-Mediated Communication
Fernanda Viégas’s PostHistory
11/29/201811/29/2018
Computer-Mediated Communication

24. Computer-Mediated Communication
Viegas, Golder, and Donath 2006: Th
Circles indicate messages of varying length — Scaling area, not radius, helps visual comparison.
This is one user’s exchange with a friend over 18 months.
11/29/201811/29/2018
Computer-Mediated Communication

25. Computer-Mediated Communication
11/29/201811/29/2018
Computer-Mediated Communication

26. HistoryFlow
10/19/10
MSU — TC 375 — Fiore

27. Evolution Viégas, Wattenberg, and Dave 10/19/10 MSU — TC 375 — Fiore

28. Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

29. Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

30. Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

31. Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

32. Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

33. Spacing by revision 10/19/10 MSU — TC 375 — Fiore
HistoryFlow
10/19/10
MSU — TC 375 — Fiore
Viégas, Wattenberg, and Dave

34. Spacing by time 10/19/10 MSU — TC 375 — Fiore
Viégas, Wattenberg, and Dave

35. Chocolate Viégas, Wattenberg, and Dave 10/19/10 MSU — TC 375 — Fiore
To our surprise we found that edit wars are not confined to controversial topics. One such example is the page on Chocolate [Fig. 6]: two users fought over whether a kind of chocolate sculpture called “coulage” really existed and consequently, whether or not the paragraph about it should appear on the page. This discussion resulted in 12 consecutive versions of reverting back and forth between two versions. Eventually the paragraph was taken out for good.4
Chocolate
Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

36. Abortion (by revision)
Viégas, Wattenberg, and Dave
10/19/10
MSU — TC 375 — Fiore

37. Abortion (by date) Viégas, Wattenberg, and Dave 10/19/10
MSU — TC 375 — Fiore

38. Threaded conversations
11/29/201811/29/2018
Computer-Mediated Communication

39. Computer-Mediated Communication
Sack’s Conversation Map (1999): could be run on archive to show relationships. Usenet newsgroups
As Sack argues, an important part of successfully
navigating large-scale discussions involves linking the
“forest” of the discussion space to the “trees” of
Content.
11/29/201811/29/2018
Computer-Mediated Communication

40. Computer-Mediated Communication
Smith and Fiore 2001; Interactivity in visualizations
11/29/201811/29/2018
Computer-Mediated Communication

41. Computer-Mediated Communication
Smith and Fiore 2001
11/29/201811/29/2018
Computer-Mediated Communication

42. Computer-Mediated Communication
Wattenberg and Millen 2003: Conversation Thumbnails
11/29/201811/29/2018
Computer-Mediated Communication

43. Computer-Mediated Communication
Early TLDR interface, directly building on Wattenberg’s work
A, B, and C represent different types of patterns.
11/29/201811/29/2018
Computer-Mediated Communication

44. Computer-Mediated Communication
Filters put some control into the hands of users…but…
The next step is linking to the data (worked in prototype, drop Srikanth a line if you want to help continue the work!)
11/29/201811/29/2018
Computer-Mediated Communication

45. Computer-Mediated Communication
Network views
11/29/201811/29/2018
Computer-Mediated Communication

46. Computer-Mediated Communication
Vizster, Heer and Boyd
11/29/201811/29/2018
Computer-Mediated Communication

47. Computer-Mediated Communication
Vizster, Heer and Boyd
11/29/201811/29/2018
Computer-Mediated Communication

48. Computer-Mediated Communication
Vizster, Heer and Boyd
The automatic community boundaries violate Erickson’s rule about letting the users do the interpretation. Note especially “algorithmically determined optimum.”
11/29/201811/29/2018
Computer-Mediated Communication

49. Computer-Mediated Communication
Fiore, “Romantic Regressions” MIT MA Thesis
At top, geographic distribution of users of dating site
Users, each represented by a point.
Intensity of color indicates population density.
At bottom, an overlay is added showing the communications between users. Brighter paths indicate communication between
those locations by multiple pairs of users. Broader paths indicate greater numbers of messages exchanged by a
dyad.
11/29/201811/29/2018
Computer-Mediated Communication

50. Computer-Mediated Communication
Ben Fry’s rather awesome zip code map.
11/29/201811/29/2018
Computer-Mediated Communication

51. Cheshire & Fiore — Computer-Mediated Communication
Design activity
2/15/12
Cheshire & Fiore — Computer-Mediated Communication

52. Cheshire & Fiore — Computer-Mediated Communication
For next Wednesday…
Visualizations and Visual Interfaces
Nissenbaum, H. (2004) Will Security Enhance Trust Online, or Supplant It?. In In R. Kramer and K. Cook (eds.) Trust and Distrust Within Organizations: Emerging Perspectives, Enduring Questions. Russell Sage Publications.
Cheshire, C. (2011) Online Trust, Trustworthiness, or Assurance?. In Daedalus 140 (4):
Bos N., Olson J., Gergle D., Olson G., and W. Wright. (2002) Effects of four computer-mediated communication channels on trust development.. In Proceedings of ACM CHI 2002.
2/15/12
Cheshire & Fiore — Computer-Mediated Communication