sans lib

Une visualisation de données c'est quoi ?

Pour le designer

Pour le développeur

Pourquoi 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

L'API de dessin d'ActionScript 3

(pour l'exemple, bien sûr)

Les features

en 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

Canvas

C'est quoi?

À quoi ça sert?

Un 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
  );
            

En pratique

C'est bien

C'est mal

SVG

C'est quoi?

À quoi ça sert?

Un 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);
            

En pratique

C'est bien

C'est mal

DOM / CSS3

C'est quoi?

Mais pourquoi ne pas utiliser SVG???

Un 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';
});
            

En pratique

C'est bien

C'est mal

Conclusion

Comment choisir

Il est pratiquement toujours possible de faire mieux en combinant ces différentes solutions qu'avec les bibliothèques existantes

même si ça demande un investissement certain.

Crédits:

Quelques liens:

Merci beaucoup!

http://jacomyal.github.io/html5paris-201403