More than a 1000 words

  • 3,576 views
Uploaded on

More than a 1000 words: scripts and techniques for putting interactive graphics on webpages.

More than a 1000 words: scripts and techniques for putting interactive graphics on webpages.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Here is the final stack from the MinneWebCon 2011 conference. Many links are included in the text, but if something is unclear let me know if there is any other information I can provide.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,576
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
54
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. More than a 1000 words:scripts and techniques for putting interactivegraphics on webpages.Timothy M. Kunau, MSc: +011 1 612 701 0735e: tkunau@gmail.comw: 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. σημειωτικόςSemioticsFrom 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 signSigns can be readSigns exist in a structureand context 11
  • 12. The ability of the audience to decode andunderstand a graphic design becomes a majorlimitation 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 • OrientationBertin, 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 • OrientationBertin, J. (1983). Semiology of graphics.Madison, Wis.: University of Wisconsin Press. 18
  • 19. So, how does this apply to interactive graphics onwebpages?There are some new techniques and tools that take advantage ofJavascript API and HTML5: <canvas>.Bertin’s Semiology of Graphics can help us form the best contextfor 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 Obamas 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 • OrientationBertin, J. (1983). Semiology of graphics.Madison, Wis.: University of Wisconsin Press. 59
  • 60. [When] you see excellent graphics, find out howthey were done. Borrow strength fromdemonstrated excellence. The idea for informationdesign 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 interactivegraphics on webpages.Thank you!Timothy M. Kunau, MSc: +011 1 612 701 0735e: tkunau@gmail.comw: http://kunau.us/t: @tkunau 63