Des outils et des hommes
Des outils et des tâches
Des outils, des tâcheset des hommes
Voilà...
Souviens-toi de Michaël...
Parce que, parfois,c’est compliqué
Savoir quoi vouloir faire
Savoir vouloir faire
dataviz : interactive ?
dataviz : interactive ?
NON ?Alors tu fais ce que tu veux,
tout est bon.
dataviz : interactive ?
OUI ?Super !
Reste plus qu’à souffrir...
dataviz : interactive ?
OUI ?Super !
Reste plus qu’à rigoler :)
Une forme, un espoir
Un choix, des critères
Facilité de mise en place
Interactivité Performance
Facilité de mise en place
Interactivité Performance
Facilité de mise en place
Interactivité Performance
DOM
SVG
PNG
Canvas
PNG
• un tag <img> et on est bon
• position via CSS, transitions et animations
• :hover, bien pour actions simples
• jouer avec les <map> pour faire plus complexe dans l’interaction
• c’est écrit png, mais jpg et gif aussi, hein...
DOM
• “dessiner” avec des <div>s
• souple, simple, terrain connu, aucun risque
• ça va, quoi.
DOM et PNG sont sympa, mais limités
ils sont un peu trop carrés, quand même.
Pour faire des choses pointues, il faut des outils pointus
Pour faire des choses pointues, il faut des outils pointus
comme ton zizi
Pour faire des choses pointues, il faut des outils pointus
des trucs de pro, quoi...
Pour faire des choses pointues, il faut des outils pointus
des trucs de pro, quoi...
SVG
• mise en oeuvre “relativement” simple
• haut niveau de potentiel interactif
• librairies là pour aider
• ça va aller
SVG
• mise en oeuvre “relativement” simple
• haut niveau de potentiel interactif
• librairies là pour aider
• ça va aller
SVG, c’est quoi ?
Le SVG, c’est du vectoriel dans la page HTML.
Donc :- le rendu est en temps réel (attention performance)- les formes “existent” dans le DOM (events)- on peut les modifier à la volée
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
TOUTE UTILISATION UN TANT SOIT PEU AVANCÉE NÉCESSITE L’UTILISATION DE LA PROGRAMMATION,DU CODE : ÉVÉNEMENTS, VARIABLES, INSTANCES...
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
TOUTE UTILISATION UN TANT SOIT PEU AVANCÉE NÉCESSITE L’UTILISATION DE LA PROGRAMMATION,DU CODE : ÉVÉNEMENTS, VARIABLES, INSTANCES...
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
ATTENTION CODE ATTENTION CODE ATTENTION
Mais bon,on s’en fout,
hein ?
Workflöw SVG
• Adobe Illustrator
• Exporter en SVG
• Récupérer le code, le placer dans sa page
• et voilà...
Workflöw SVG
• Adobe Illustrator
• Exporter en SVG
• Récupérer le code, le placer dans sa page
• et voilà...
- Trop facile !
Workflöw SVG
Mais tout ça n’est intéressant que si ça devient interactif.
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Conclusion: c’est une question de style...
Fais le grand saut !
Voilà, merci.
Là : https://github.com/boblemarin/-datavisaj
Là aussi : http://boblemarin.github.com/-datavisaj/
Et surtout : http://google.com