There are several techniques and tools for creating interactive graphics on webpages, including InfoViz, Raphaël, jQuery Visualize Plugin, Protovis, and Processing.js. Jacques Bertin's Semiology of Graphics provides a theoretical foundation for understanding how data can be visually encoded and decoded through signs and symbols. WebGL is an emerging technology that may allow for more advanced 3D graphics directly in the browser without plugins.

1. More than a 1000 words:
scripts and techniques for putting interactive
graphics on webpages.
Timothy M. Kunau, MS
c: +011 1 612 701 0735
e: tkunau@gmail.com
w: http://kunau.us/
t: @tkunau
1

2. 2

3. Data is all over the web
3

4. ... and it is getting more complex over time.
4

5. 5

6. 6

7. Semiology – the study of symbols and signs
7

8. σημειωτικός
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

9. 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

10. Trouser Semaphore
http://thechap.net/
10

11. Everything is a sign
Signs can be read
Signs exist in a structure
and context
11

12. 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

13. Semiology of Graphics
• Properties of information
• Properties of image
• Rules mapping information
to images
• Analytical tasks
Jacques Bertin
• First and most broad effort
(1918-2010)
to provide a theoretical
foundation for Information
Visualization
1967
13

14. 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

15. • [x,y]
• Position
• [z]
• Shape
• Size
• Texture
• Intensity/Value
• Color/Hue
• Orientation
Bertin, J. (1983). Semiology of graphics.
Madison, Wis.: University of Wisconsin Press.
15

16. Data will dictate display.
16

17. Story will dictate display.
17

18. • [x,y]
• Position
• [z]
• Shape
• Size
• Texture
• Intensity/Value
• Color/Hue
• Orientation
Bertin, J. (1983). Semiology of graphics.
Madison, Wis.: University of Wisconsin Press.
18

19. 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

20. Tools
• InfoViz
• Raphaël
• jQuery
Visualize
Plugin
• Protovis
• Processing.js
20

21. 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

22. 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

23. InfoViz: demo
• President Obama's proposed budget for 2012,
• http://www.whitehouse.gov/winning-the-future/interactive-budget
23

24. 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

25. Raphaël
• Authors: Dmitry Baranovskiy
• Available: http://raphaeljs.com/
• License: MIT license, http://
raphaeljs.com/license.html
25

26. Raphaël: joys
• Light-weight file size • Animated transitions*
• Less complex than InfoViz and • Multi-touch friendly (ios/webkit)
Protovis
• Open Source: https://github.com/
DmitryBaranovskiy/raphael/
26

27. Raphaël: demo
27

28. 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

29. 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

30. 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

31. 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

32. jQuery Visualize Plugin:
demo
.addTouch();
.draggable();
32

33. jQuery Visualize Plugin: concerns
• Small range of possible charts • Multi-touch interaction is buggy
• Cleverness (though possibly out- • Work-arounds require third-party
weighed by the breadth of the plugins (jPooky, TouchSwipe, et al.)
jQuery community)
33

34. Protovis
• Authors: Mike Bostock and Jeff Heer of the Stanford Visualization Group
• Available: http://vis.stanford.edu/protovis/
• License: BSD License
34

35. Protovis: joys
• JavaScript and SVG • All things to all people.
• Mature, v3.2 (881KB) • Interactivity is very good.
35

36. Protovis: conventional
36

37. Protovis: maps
37

38. Protovis: hierarchies
38

39. Protovis: custom
39

40. Protovis: statistics
Note: if you are really into stats vis, look at R and MATLAB.
40

41. Protovis: networks
41

42. Protovis: art
42

43. Protovis: interactive
43

44. Demo
44

45. Protovis: concerns
• All things to all people. • Download heavy for handheld
devices.
• Complexity rises quickly for
composition graphs. • No multi-touch support, yet.
45

46. 46

47. 47

48. 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

49. 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

50. 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

51. Processing.js: demo
http://askken.heroku.com/
51

52. 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

53. What’s next?
53

54. WebGL
54

55. http://media.tojicode.com/q3bsp/
55

56. http://plumegraph.org/
56

57. 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

58. http://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
58

59. • [x,y]
• Position
• [z]
• Shape
• Size
• Texture
• Intensity/Value
• Color/Hue
• Orientation
Bertin, J. (1983). Semiology of graphics.
Madison, Wis.: University of Wisconsin Press.
59

60. [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

61. Interactive analysis should consider
• Selection (multi-touch) • Calculation
• Filtering • Grouping and Aggregation
• Sorting
61

62. Questions
62

63. 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 0735
e: tkunau@gmail.com
w: http://kunau.us/
t: @tkunau
63