La dataviz – sans lib – Une visualisation de données c'est quoi ?
La dataviz – sans lib – Une visualisation de données c'est quoi ?
0 0
html5paris-201403
Mes slides pour le meetup HTML5-Paris de Mars 2014On Github jacomyal / html5paris-201403
La dataviz
sans lib
par Alexis Jacomy / @jacomyal ingénieur JavaScript frontend @ Sciences-Po médialab
Une visualisation de données c'est quoi ?
Pour le designer
Une bonne connaissance du domaine Des données intéressantes Une histoire à raconter Un bon designPour le développeur
Des maths Du dessinPourquoi ne pas utiliser les outils existants
“JavaScript est un langage exigeant faussement facile qui nécessite d’aimer le bricolage, l’artisanat.“
@olivierpenhoat (source)
Et aussi
Pour mieux comprendre comment fonctionnent les outils Quand aucun outil existant ne correspond vraiment Pour avoir plus de contrôle sur l'applicationQu'est-ce qu'il reste?
L'API de dessin d'ActionScript 3
(pour l'exemple, bien sûr)
Les features
Une arborescence (la classe DisplayObjectContainer) Du dessin matriciel (la classe BitmapData) Du dessin vectoriel (la classe Graphics) La classe Sprite qui fait un peu tout çaen pratique
on met des Sprites partout
Un exemple de code AS3
// Créer et afficher un sprite: var sprite:Sprite = new Sprite(); parentSprite.addChild(sprite); // Dessiner sur le sprite: sprite.graphics.beginFill(0x666666); sprite.graphics.drawCircle(100, 100, 50); sprite.graphics.endFill(); // Tracer le sprite sur une Bitmap: var bitmapData:BitmapData = new BitmapData(200, 200, true, 0x0); bitmapData.draw(sprite); var bitmap:Bitmap = new Bitmap(bitmapData); // Remplacer le rendu par la Bitmap: parentSprite.removeChild(sprite); parentSprite.addChild(bitmap);
Au final
L'arbre permet de bien stucturer la scène La gestion du vectoriel facilite l'interactivité On peut cacher des éléments pour gagner en perfs Et tout ça grâce à une API assez simple et unifiéeCanvas
C'est quoi?
Une balise HTML Une API JavaScript La technologie HTML5 dédiée au dessin matricielÀ quoi ça sert?
L'API JavaScript permet de dessiner sur le canvas On peut aussi modifier directement la matrice L'état du canvas n'est stocké que dans sa matriceUn exemple d'utilisation de Canvas
// Récupérer le contexte du canvas:
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
// Dessiner sur le canvas:
context.fillStyle = '#666666';
for (var i = 0; i < 10000; i++)
context.fillRect(
Math.floor(Math.random() * canvas.width),
Math.floor(Math.random() * canvas.height),
1,
1
);
jsfiddle
En pratique
On retrace tout à la moindre modification On cache avec des ImageData ce qui est coûteux On observe nous même la souris pour gérer l'interactivitéC'est bien
Pour afficher beaucoup d'éléments Pour bidouiller le rendu au pixelC'est mal
Pour le rendu des textes Pour tout ce qui est interactif Lorsque la surface d'affichage est grandeSVG
C'est quoi?
Un format XML pour décrire des dessins vectoriels La technologie pour faire du dessin vectoriel sur le WebÀ quoi ça sert?
Ça permet de tracer des formes vectorielles Ça fonctionne comme le DOM Le SVG a sa propre arborescenceUn exemple d'utilisation de SVG
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="400" height="300">
<circle id="myCircle" cx="100" cy="100" r="50" />
</svg>
// Récupérer le cercle SVG:
var circle = document.getElementById('myCircle');
// Déplacer le cercle:
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);
jsfiddle
En pratique
On créé d'abord des éléments, qu'on modifie ensuite On gère tout comme du DOM (CSS, events, etc...)C'est bien
Pour manipuler des contenus vectoriels externes Pour créer des applis très interactivesC'est mal
Pour afficher un grand nombre d'élémentsDOM / CSS3
C'est quoi?
CSS3 permet d'afficher des triangles, des rectangles, des ronds... Beaucoup de graphiques sont traçables simplement grâce à CSS3Mais pourquoi ne pas utiliser SVG???
Le navigateur est optimisé pour le rendu du DOM C'est la solution la plus portableUn cas d'usage
#barchart {
width: 100px;
height: 100px;
position: relative;
}
.bar {
bottom: 0;
width: 10px;
position: absolute;
background: #666666;
}
// Les données et le container:
var data = [12, 3, 189, 134, 56],
barchart = document.getElementById('barchart'),
width = barchart.offsetWidth,
height = barchart.offsetHeight,
barWidth = Math.floor(width / data.length) - 1;
// On trouve le maximum:
var max = Math.max.apply(Math, data);
// On trace le graphique:
data.forEach(function(value, i) {
var bar = document.createElement('DIV');
barchart.appendChild(bar);
bar.setAttribute('class', 'bar');
bar.style.width = barWidth + 'px';
bar.style.left = (i * (barWidth + 1)) + 'px';
bar.style.top = (width - value * width / max) + 'px';
});
jsfiddle