![Page 1: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/1.jpg)
(Moderately) Complex Information Visualizations for the Non-‐Programmer
Michael Cohen & Thomas Schluchter
![Page 2: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/2.jpg)
![Page 3: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/3.jpg)
![Page 4: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/4.jpg)
3h
+1h
=∞
![Page 5: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/5.jpg)
~1d = success! ~1d + = success! years of software development experience
![Page 6: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/6.jpg)
http://vis.stanford.edu/protovis/docs/
![Page 7: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/7.jpg)
http://www.adobe.com/devnet/logged_in/sfegette_dwcs5.html
![Page 8: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/8.jpg)
+
à more expressive success for more people
![Page 9: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/9.jpg)
![Page 10: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/10.jpg)
C. Ahlberg and B. Shneiderman, “Visual Information Seeking: Tight Coupling of Dynamic Query Filters with Starfield Displays.”[Online]. Available: ftp://ftp.cs.umd.edu/pub/hcil/Reports-‐Abstracts-‐Bibliography/3131html/3131.html. [Accessed: 06-‐Apr-‐2011].
![Page 11: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/11.jpg)
C. Stolte, D. Tang, and P. Hanrahan, “Polaris: A system for query, analysis, and visualization of multidimensional relational databases,” IEEE Transactions on Visualization and Computer Graphics, p. 52–65, 2002.
![Page 12: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/12.jpg)
Michael Bostock, Jeffrey Heer, "Protovis: A Graphical Toolkit for Visualization," IEEE Transactions on Visualization and Computer Graphics, vol. 15, no. 6, pp. 1121-‐1128, Nov./Dec. 2009
![Page 13: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/13.jpg)
J. H. Maloney, K. Peppler, Y. Kafai, M. Resnick, and N. Rusk, “Programming by choice: urban youth learning programming with scratch,” ACM SIGCSE Bulletin, vol. 40, no. 1, p. 367–371, 2008.
![Page 14: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/14.jpg)
¡ Protovis visualizations consist of marks ¡ Graphical decomposition is the way Protovis “thinks”.
![Page 15: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/15.jpg)
¡ We can think of graphical decomposition as exploding a graphic into layers…
![Page 16: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/16.jpg)
¡ We can think of graphical decomposition as exploding a graphic into layers…
![Page 17: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/17.jpg)
Library of visual elements (marks)
Layers stack
Canvas and data settings
![Page 18: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/18.jpg)
• Mark is immediately drawn • Fed with dummy data • Using all defaults
![Page 19: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/19.jpg)
• Clicking a mark’s layer entry reveals the mark’s properties
• Each mark has different properties associated, the form reflects this
![Page 20: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/20.jpg)
• Properties are immediately editable
![Page 21: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/21.jpg)
• Data sources can be hooked up from within the editing panel
• Mark type determines which properties are available to be generated from data
![Page 22: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/22.jpg)
¡ Scales § Scales are generated separate from marks § Reusable and editable
¡ Functions § Excel-‐style formula editor for creating simple functions to transform values
§ Writing code directly should also be supported
![Page 23: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/23.jpg)
¡ Can we help users understand how Protovis works?
¡ How to support interactions/behavior? ¡ What are the limits of GUIs for this kind of programming task?
![Page 24: (Moderately),Complex,Information,Visualizations,forthe…vis.berkeley.edu/courses/cs294-10-sp11/wiki/images/...presentation.pdf · (Moderately),Complex,Information,Visualizations,forthe,Non;Programmer](https://reader031.vdocument.in/reader031/viewer/2022030407/5a87502d7f8b9afc5d8db522/html5/thumbnails/24.jpg)
¡ Problem definition and mockups (done) ¡ Complete Protovis code generator (in progress) ¡ Develop UI in HTML/CSS (to be done) ¡ Test with users (to be done) ¡ Write paper (to be done)