more than a 1000 words
DESCRIPTION
More than a 1000 words: scripts and techniques for putting interactive graphics on webpages.TRANSCRIPT
![Page 1: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/1.jpg)
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
![Page 2: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/2.jpg)
2
![Page 3: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/3.jpg)
Data is all over the web
3
![Page 4: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/4.jpg)
... and it is getting more complex over time.
4
![Page 5: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/5.jpg)
5
![Page 6: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/6.jpg)
6
![Page 7: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/7.jpg)
Semiology – the study of symbols and signs
7
![Page 8: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/8.jpg)
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
![Page 9: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/9.jpg)
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
![Page 10: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/10.jpg)
Trouser Semaphore
http://thechap.net/
10
![Page 11: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/11.jpg)
Everything is a sign
Signs can be read
Signs exist in a structure and context
11
![Page 12: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/12.jpg)
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
![Page 13: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/13.jpg)
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
![Page 14: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/14.jpg)
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
![Page 15: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/15.jpg)
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
![Page 16: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/16.jpg)
Data will dictate display.
16
![Page 17: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/17.jpg)
Story will dictate display.
17
![Page 18: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/18.jpg)
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
![Page 19: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/19.jpg)
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
![Page 20: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/20.jpg)
Tools
• InfoViz
• Raphaël
• jQuery Visualize Plugin
• Protovis
• Processing.js
20
![Page 21: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/21.jpg)
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
![Page 22: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/22.jpg)
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
![Page 23: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/23.jpg)
InfoViz: demo
• President Obama's proposed budget for 2012,
• http://www.whitehouse.gov/winning-the-future/interactive-budget
23
![Page 24: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/24.jpg)
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
![Page 25: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/25.jpg)
Raphaël
• Authors: Dmitry Baranovskiy
• Available: http://raphaeljs.com/
• License: MIT license, http://raphaeljs.com/license.html
25
![Page 26: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/26.jpg)
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
![Page 27: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/27.jpg)
Raphaël: demo
27
![Page 28: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/28.jpg)
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
![Page 29: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/29.jpg)
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
![Page 30: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/30.jpg)
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
![Page 31: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/31.jpg)
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
![Page 32: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/32.jpg)
jQuery Visualize Plugin: demo
.addTouch();
.draggable();
32
![Page 33: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/33.jpg)
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
![Page 34: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/34.jpg)
Protovis
• Authors: Mike Bostock and Jeff Heer of the Stanford Visualization Group
• Available: http://vis.stanford.edu/protovis/
• License: BSD License
34
![Page 35: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/35.jpg)
Protovis: joys
• JavaScript and SVG
• Mature, v3.2 (881KB)
• All things to all people.
• Interactivity is very good.
35
![Page 36: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/36.jpg)
Protovis: conventional
36
![Page 37: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/37.jpg)
Protovis: maps
37
![Page 38: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/38.jpg)
Protovis: hierarchies
38
![Page 39: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/39.jpg)
Protovis: custom
39
![Page 40: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/40.jpg)
Protovis: statistics
Note: if you are really into stats vis, look at R and MATLAB.
40
![Page 41: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/41.jpg)
Protovis: networks
41
![Page 42: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/42.jpg)
Protovis: art
42
![Page 43: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/43.jpg)
Protovis: interactive
43
![Page 44: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/44.jpg)
Demo
44
![Page 45: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/45.jpg)
Protovis: concerns
• All things to all people.
• Complexity rises quickly for composition graphs.
• Download heavy for handheld devices.
• No multi-touch support, yet.
45
![Page 46: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/46.jpg)
46
![Page 47: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/47.jpg)
47
![Page 48: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/48.jpg)
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
![Page 49: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/49.jpg)
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
![Page 50: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/50.jpg)
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
![Page 51: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/51.jpg)
Processing.js: demo
http://askken.heroku.com/
51
![Page 52: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/52.jpg)
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
![Page 53: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/53.jpg)
What’s next?
53
![Page 54: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/54.jpg)
WebGL
54
![Page 55: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/55.jpg)
http://media.tojicode.com/q3bsp/
55
![Page 56: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/56.jpg)
http://plumegraph.org/
56
![Page 57: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/57.jpg)
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
![Page 58: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/58.jpg)
http://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
58
![Page 59: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/59.jpg)
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
![Page 60: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/60.jpg)
[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
![Page 61: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/61.jpg)
Interactive analysis should consider
• Selection (multi-touch)
• Filtering
• Sorting
• Calculation
• Grouping and Aggregation
61
![Page 62: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/62.jpg)
Questions
62
![Page 63: More than a 1000 words](https://reader034.vdocuments.mx/reader034/viewer/2022052410/55561c7cd8b42ae0238b5194/html5/thumbnails/63.jpg)
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