More than a 1000 words

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

Data is all over the web

3

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

4

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 deﬁned 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
Jacques Bertin
• First and most broad effort
(1918-2010)
to provide a theoretical
foundation for Information
Visualization
1967

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

• [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

Data will dictate display.

16

Story will dictate display.

17

• [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/ﬁles/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.ﬂickr.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 ﬁle size • Animated transitions*

• Less complex than InfoViz and • Multi-touch friendly (ios/webkit)
Protovis

• Open Source: https://github.com/
DmitryBaranovskiy/raphael/

26

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/ﬁles/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 • 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

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 • All things to all people.

• Mature, v3.2 (881KB) • Interactivity is very good.

35

Protovis: conventional

36

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: interactive

43

Protovis: concerns

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

45

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

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

• [x,y]

• Position

• [z]

• Shape

• Size

• Texture

• Intensity/Value

• Color/Hue

• Orientation


59

[When] you see excellent graphics, ﬁnd 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) • Calculation

• Filtering • Grouping and Aggregation

• Sorting

61

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

More than a 1000 words

More Related Content

More than a 1000 words