Interactive visualization
with html+javascript
Densitydesign lab, Milano
Summary
1. from flash to "html5"
2. javascript & graphic libraries overview
3. browsing+visualization interesting cases
4. interaction perspectives with new web technologies
From flash to "html5"
What is "html5"?
Html 5
What's new:
- Portable device handling
- Video and audio native handling
- More precise semantic description of content
- Drag & drop from computer
- Canvas tag = Dynamic PNG image
- …
CSS 3
What's new:
- More complex graphic features (shadows, gradients, …)
- Better typography handling (web fonts)
- Animations & transitions
- Interactivity handling
- …
Javascript
Not so new! but:
- More and more libraries
- Better handling by new browsers (Chrome!)
- More powerful computers = new perspectives
"html5" organisation : the DOM
Interacting with the DOM
flash vs html5
flash vs html5
A flash object is a “black box” to the web, while an “html5” interactive webpage is far more connected and opened.
- No plugins needed
- Search engines friendly
- Open source friendly!
Javascript flaws
- Browser-dependent(unlike flash or java)
- Interpreted language = power consuming
- Scripting language = often wired and illogic
What is at stake with html5-powered visualizations
Some new design throwdowns
- Improving graphical freedom while staying in the DOM/html tagging logic
- Producing visualizations and webpages whose content is meaningful for machines and reusable by humans
- Handling differences between browsers and computers (is it a flaw or an opportunity?) ?
- Managing multi-screen interfaces (phones, tablets, ...)
Two fundamental technologies for drawing things with browser
SVG and Canvas
SVG technology
- xml-like tagging langage
- DOM-compatible
- CSS-compatible
Advantages:
- Vector content = zoom friendly
- Illustrator and Inkscape compatible
- Once a shape is drawn, it is memorized in the computer
- Text in a svg can be searched in the web-page and browsed by search engine robots
Disadvantages:
- Interactivity seems difficult
- Animation possible, but limited on its own
A tiny example of SVG here
Canvas tag
- dynamic png image displayed in a block
- commanded with functions (ie "drawing" metaphoras : "draw a circle here", ...)
Advantages:
- very free drawing capabilities
- very good for pixels manipulations, animation, ...
- pretty good to handle complex interactions and game-style applications
Disadvantages:
- initially a "black box for DOM
- no memory of shapes
- interaction based on objects-events is difficult
A canvas example
SVG vs Canvas comparison
| Canvas | SVG | |
| Abstraction level | Pixel-based | Vector-based |
| Elements | One html element, similar to img tags | Many graphical elements, integrated in DOM |
| Programming logic | Functions | Tags |
| Interaction | Script | Script+CSS |
| Event model | Granular interaction(mouse x, y) | Abstract interaction(DOM-based) |
| Performances- best for: | lots of objects and simple shapes | not so much objects (<10k) but large surfaces of drawing |
So in order to display interactive dataviz with browsers, I can:
- directly manipulate the DOM to change html/css properties in real time
- produce svg code into my html page to make vector-driven animations and interactions
- display canvas tags so I can program dynamic & interactive PNG in it
Javascript & graphic libraries overview
several possibilities
- using native javascript
- generalist libraries: jquery, mootools ...
- web-drawing libraries : paper.js, raphael.js, processing.js ...
- dataviz-oriented libraries : javascript viz toolkit, d3.js
Processing.js
- Translated from a java library
- Hosted into a canvas tag
- Based on the metaphora of drawing
+ Intuitive and understandable
+ A lot of freedom to make complex and unique images and animations
+ Very active community
+ Translatable to other media (phones, installations, ...)
- Natively, it's a black box for html (as flash)
- Quickly power-consuming
- Interactivity based on objects-events (is clicked, ...) is (very) difficult
- Typography and texts are not html elements and not easy to manipulate
Raphael.js
- made to manipulate and create SVG shapes
+ pretty fast and not power-consuming (thanks to svg)
+ supports ALL browsers (including IE<9)
+ SVG = illustrator and inkscape-friendly
- displays only vector graphics
- not good for shapes' transformation
Paper.js
- Displayed in a canvas tag
- Scene-graph model (similar to DOM)
- Built with Adobe's Illustrator in mind
+ Handles vector and raster graphics
+ Complex functions for gesture-based and event-based interactivity
+ Very easy to manipulate complex shapes
+ Scriptographer's compatible
- as Raphael, it is an object-based representation, this can be a limit
- didn't see any complex mix between raster and vector graphics with paper.js
Graphical libraries overview
| Processing.js | Raphael.js | Paper.js | |
| Technology | Canvas | SVG | Canvas |
| Language | "Processing script"" | Javascript | Paperscript |
| Browsers | IE9 | IE7 | IE9 |
| Mobile | Yes | iOs only? | Yes |
| Size | 64 kb | 20 kb | 56 kb |
| Best for | Graphical freedom | Content structuration | Polyvalence |
| Worst for | Interactivity handling, DOM compatibility | Visual complexity | ?? |
| Remarks | Processing = several medias | Structured content = search engine friendly | Scriptographer-friendly, and DOM-compatible |
Dataviz javascript libs
- Javascript infoviz toolkit
- Protoviz
- jQuery visualize
- ...
d3.js
For "data-driven document"
- Binds data to DOM!
- Data-parsing is very easy
- Uses html, svg and css very cleverly
- Tween-like smooth transformations thanks to interactivity
- Very powerfull but natively graphics functions are a bit limited!
All is in the mix!
Some interesting people
Hakim.se
Uses creatively the complementarity between html, css and javascript
Some interesting experiments:
Gildas P
has developped a very impressive cross-lib framework that combines:
- interactivity-handling with mootools and tween.js
- DOM-handling and non-graphical functionalities with jQuery
- Drawing with processing.js
Some examples:
- DOM+Processing here or here
- Interactive processing background
Browsing
+
visualization interesting cases
Database navigation
Budget 4 change
Network-based browsing
Gods, acheans and trojans
Timeline browsing
Evolution of the web
Search-query based visualization
Ask Ken
Geographical metaphora
World of Merix
Data-based but not so visualized
Le véritomètre
Browsing an experiment
The sexperiment
Presentation-like plugin
Impress.js
Interaction perspectives with new web technologies
3D handling
Playing with browsers!
With javascript you are able to interact directly with browsers
Some old browser-based artworks
Windows as interface's elements : browser pong
Chrome plugin are javascript-made! exemple of sketchPad webapp
Adaptive interfaces
to behavior : eye tracking
to context : geoloc
to be continued ...
go to the survey's visualization
go to the survey's pearltree
Presentation realized with reveal.js library by Hakim El Hattab / hakim.se
First slide's animation realized with processing.js