TEST

#DATAVISAJ

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 faire

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 !

émo

démo

Workflöw SVG

Mais tout ça n’est intéressant que si ça devient interactif.

émo

démo

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

Bref,

Fais le grand saut !

Voilà, merci.

Là : https://github.com/boblemarin/-datavisaj

Là aussi : http://boblemarin.github.com/-datavisaj/

Et surtout : http://google.com