La dataviz sans d3.js

Human Talks @ Nantes, mardi 9 juin 2015

Alexis Jacomy

(twitter|github).com/jacomyal

<troll>

  d3.js est le jQuery de la dataviz

</troll>

"Ça résout tous les problèmes"

Et c'est monolithique

d3.js embarque :

Ça fait beaucoup de trucs

pour afficher un camembert

c'est en train d'évoluer !

Néanmoins...

Vanilla Web development

en attendant...

FTW !

Pour tracer un graphique, il faut :

Un design

Un algorithme

Un moteur de rendu

DOM + CSS

pour les formes les plus simples

- rectangles, cercles, triangles
- transitions / animations
- applications très portables

- usages limités
- peu adapté pour beaucoup d'éléments graphiques

Exemple :

Canvas (rendu matriciel)

pour les rendus complexes ou avec beaucoup d'éléments

- API riche, caching possible
- une forme tracée n'affecte plus les performances

- interactivité "difficile"
- non accessible
- adapté à de petites tailles

Exemple :

SVG (rendu vectoriel)

pour les rendus complexes interactifs

- spécifications riches
- accessible et indexable
- adapté à de grandes tailles

- alourdit le DOM
- peu adapté à trop d'éléments

Exemple :

Mon choix personnel

React.js
DOM diff
SVG / DOM

Autre solution pour choisir :

Merci beaucoup !

slides disponibles à l'adresse :

slides.com/jacomyal/la-dataviz-sans-d3

Crédits :

La dataviz sans d3.js

By Alexis Jacomy

La dataviz sans d3.js

Human Talks @ Nantes, mardi 9 juin 2015

  • 2,653