more than a 1000 words
DESCRIPTION
More than a 1000 words: scripts and techniques for putting interactive graphics on webpages.TRANSCRIPT
More than a 1000 words: scripts and techniques for putting interactive graphics on webpages.
Timothy M. Kunau, MS
c: +011 1 612 701 0735e: [email protected]: http://kunau.us/t: @tkunau
1
2
Data is all over the web
3
... and it is getting more complex over time.
4
5
6
Semiology – the study of symbols and signs
7
Semiotics
From the Greek semeiotikos, which means “interpreter of signs”.
Signs underly all forms of communication.
Anything used for human communication is defined as a sign: gestures, facial expressions, poetry, rituals, clothes, food, music, morse code, color, shape, etc.
σημειωτικός
8
What is a sign?
• Anything that carries meaning - whether it’s a word, a symbol/image, or a sound.
• Signs form part of a coded system within media and text
http://www.cs.dartmouth.edu/~rockmore/semaphore.html
9
Trouser Semaphore
http://thechap.net/
10
Everything is a sign
Signs can be read
Signs exist in a structure and context
11
The ability of the audience to decode and understand a graphic design becomes a major limitation governing its form and content.
From Type and Image: The Language of Graphic Design, Philip B. Meggs
12
Semiology of Graphics
• Properties of information
• Properties of image
• Rules mapping information to images
• Analytical tasks
• First and most broad effort to provide a theoretical foundation for Information Visualization
Jacques Bertin
1967
(1918-2010)
13
Language Perspective
• Semiology – the study of symbol systems
• Sender and receiver use a language with symbols
• Establish code and conventions
• Sender encodes information in these symbols
• Receiver decodes information from these symbols
14
Bertin, J. (1983). Semiology of graphics. Madison, Wis.: University of Wisconsin Press.
• [x,y]
• Position
• [z]
• Shape
• Size
• Texture
• Intensity/Value
• Color/Hue
• Orientation
15
Data will dictate display.
16
Story will dictate display.
17
Bertin, J. (1983). Semiology of graphics. Madison, Wis.: University of Wisconsin Press.
• [x,y]
• Position
• [z]
• Shape
• Size
• Texture
• Intensity/Value
• Color/Hue
• Orientation
18
So, how does this apply to interactive graphics on webpages?
There are some new techniques and tools that take advantage of Javascript API and HTML5: <canvas>.
Bertin’s Semiology of Graphics can help us form the best context for our data and the broadest range of receivers.
19
Tools
• InfoViz
• Raphaël
• jQuery Visualize Plugin
• Protovis
• Processing.js
20
InfoViz
• Author: Nicolas Garcia Belmonte
• Available: http://thejit.org/
• License: GNU GPL v3
• Current Release: 2.0.0 - beta
• Acquired by Sencha: www.sencha.com
21
InfoViz: joys
• Data embedded as JSON objects. (http://json.org)
• On-line API doc: http://thejit.org/static/v20/Docs/files/Core/Core-js.html
• http://groups.google.com/group/javascript-information-visualization-toolkit/topics
• Open Source: https://github.com/philogb/jit
•
22
InfoViz: demo
• President Obama's proposed budget for 2012,
• http://www.whitehouse.gov/winning-the-future/interactive-budget
23
InfoViz: concerns
• .onClick events and multi-touch and label stacking
• Larger graphs can be slow to render and navigate in < IE9.
• Larger datasets can produce mixed results (5677 nodes in this example)
• Recent purchase by Sencha.
Image: http://www.flickr.com/photos/nsomnac/5427000353/
24
Raphaël
• Authors: Dmitry Baranovskiy
• Available: http://raphaeljs.com/
• License: MIT license, http://raphaeljs.com/license.html
25
Raphaël: joys
• Light-weight file size
• Less complex than InfoViz and Protovis
• Open Source: https://github.com/DmitryBaranovskiy/raphael/
• Animated transitions*
• Multi-touch friendly (ios/webkit)
26
Raphaël: demo
27
Raphaël: example
• Data for this and the previous object is coded into an HTML table, not a JSON object.
• Fail-back is useful even when JavaScript is not available.
28
Raphaël: concerns
• Not all graph formats fail-back gracefully.
• Embedded data relies on cleverness using HTML <table> declarations (like jQuery Visualize plugin) -- clever kills.
• Recent purchase by Sencha.
29
jQuery Visualize Plugin
• Authors: the Filament Group (the core developers of jQuery UI)
• Available: http://dwpe.googlecode.com/files/dwpe-code-public-latest.zip
• License: MIT License
30
jQuery Visualize Plugin: joys
• Bases chart on data already in the page in an HTML table element
• Fails gracefully
• Works with screen-readers
• Written by the jQuery UI group, it will likely incorporate support for multi-touch environments
• Packaged as a downloadable jQuery plugin called Visualize
31
jQuery Visualize Plugin: demo
.addTouch();
.draggable();
32
jQuery Visualize Plugin: concerns
• Small range of possible charts
• Cleverness (though possibly out-weighed by the breadth of the jQuery community)
• Multi-touch interaction is buggy
• Work-arounds require third-party plugins (jPooky, TouchSwipe, et al.)
33
Protovis
• Authors: Mike Bostock and Jeff Heer of the Stanford Visualization Group
• Available: http://vis.stanford.edu/protovis/
• License: BSD License
34
Protovis: joys
• JavaScript and SVG
• Mature, v3.2 (881KB)
• All things to all people.
• Interactivity is very good.
35
Protovis: conventional
36
Protovis: maps
37
Protovis: hierarchies
38
Protovis: custom
39
Protovis: statistics
Note: if you are really into stats vis, look at R and MATLAB.
40
Protovis: networks
41
Protovis: art
42
Protovis: interactive
43
Demo
44
Protovis: concerns
• All things to all people.
• Complexity rises quickly for composition graphs.
• Download heavy for handheld devices.
• No multi-touch support, yet.
45
46
47
Processing.js
• Authors: Originally developed by Ben Fry and Casey Reas, ported to Javascript by John Resig (the creator of jQuery).
• Available: http://processingjs.org/
• License: MIT
• Version: Release 1.1, available March 1st, 2011.
• This is a raster graphics framework.
48
Processing.js: joys
• JavaScript port of the Java-based Processing graphics API and language which renders to HTML 5 canvas.
• Code using the Processing language, include it in your web page, and Processing.js does the rest
• Great for novel visualizations
• Active project and communities of users
49
Processing.js: joys
• Release 1.1 adds:
• Webkit native touch events on webkit browsers and iOS devices
• mouseOver and mouseOut events were added to allow events to take place when the user enters and leaves a canvas
50
Processing.js: demo
http://askken.heroku.com/
51
Processing.js: concerns
• JAVA-like, in the bad ways too
• Raster primitives feel like building with an Erector Set.
• You can use JavaScript to write processing code that is translated by Processing.js into HTML5.
• Nearly all, though not entirely Processing compatible. The community is working towards a 100% compatible API.
52
What’s next?
53
WebGL
54
http://media.tojicode.com/q3bsp/
55
http://plumegraph.org/
56
Limitations of interactive graphics on the web
•Sender encodes information in symbols
•Receiver decodes information from symbols
•Browsers, in all their many forms
•Consumers, in all their many forms
57
http://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
58
Bertin, J. (1983). Semiology of graphics. Madison, Wis.: University of Wisconsin Press.
• [x,y]
• Position
• [z]
• Shape
• Size
• Texture
• Intensity/Value
• Color/Hue
• Orientation
59
[When] you see excellent graphics, find out how they were done. Borrow strength from demonstrated excellence. The idea for information design is: Don’t get it original, get it right.
—Edward Tufte
60
Interactive analysis should consider
• Selection (multi-touch)
• Filtering
• Sorting
• Calculation
• Grouping and Aggregation
61
Questions
62
More than a 1000 words: scripts and techniques for putting interactive graphics on webpages.
Thank you!
Timothy M. Kunau, MS
c: +011 1 612 701 0735e: [email protected]: http://kunau.us/t: @tkunau
63