Upgrade to Pro — share decks privately, control downloads, hide ads and more …

d3 ce que j'aurais aimé savoir avant de commencer

AlainRo
February 16, 2017

d3 ce que j'aurais aimé savoir avant de commencer

AlainRo

February 16, 2017
Tweet

More Decks by AlainRo

Other Decks in Programming

Transcript

  1. D3js Toulouse
    16 Février 2017
    Alain Roan d3js Toulouse 16/02/17
    Ce que j’aurai aimé que l’on m’explique quand j’ai commencé d3
    (Version courte)

    View full-size slide

  2. •  Mon contexte à l’époque:
    –  En train d’expérimenter Protovis avec des résultats et beaucoup
    d’espoir – grosse décepIon
    –  documentaIon d3js très succincte, peu de tuto, mais déjà de
    nombreux exemples
    –  Une connaissance très superficielle de html, js, css, svg
    •  Le premier contact est brutal !
    –  Juste besoin d’un éditeur de texte et de Chrome
    –  Les exemples font 50 lignes et produisent des résultats
    époustouflants
    –  Incompréhension quasi-complète de ‘comment ça marche’
    –  Beaucoup de nuits blanches a débugger un code par essai/
    erreur
    Alain Roan d3js Toulouse 16/02/17
    Mes premières impressions de d3js en 2011

    View full-size slide

  3. o  1989 – html (CERN)
    o  1994 – css (CERN, W3C)
    o  1995 – javascript (Netscape)
    o  2000 – svg, json (W3C)
    o  2004 – DOM (W3C)
    o  2008 – Chrome V8 (Google)
    o  2009 – Protovis (Standford University)
    o  2010 – npm, nodejs
    o  2011 – d3js
    o  2016 – d3js v4 sur npm
    Historique et fonda8ons de d3
    [email protected] - d3js Toulouse 16/02/17

    View full-size slide

  4. hips://source.opennews.org/en-US/arIcles/what-i-
    learned-recreaIng-one-chart-using-24-tools/
    D3 n’est PAS une librairie
    graphique, c’est une technologie
    de manipula8on du DOM
    Alain Roan d3js Toulouse 16/02/17

    View full-size slide

  5. D3 v4
    - 30 composants indépendants
    + format de nombre
    + format de date
    + échelles
    + drag, brush
    + projecIon géographique
    + …
    + le joyau de la couronne :
    selectAll/data/enter/exit
    - 250 ko minimifié
    Anatomie de d3
    Alain Roan d3js Toulouse 16/02/17

    View full-size slide

  6. •  Sélec8on/Ac8on
    d3.select(‘circle’).style(‘fill’,’red’);
    d3.selectAll(‘circle’).style(‘fill’,’red’);
    •  Style déclara8f/ fonc8onnel
    circle
    .air(‘r’,10)
    .style(‘fill’,’red’)
    .air(‘cx’, 100)
    .air(‘cy’, 100);
    •  Propriétés dynamiques
    circle
    .air(‘r’, d => Math.sqrt(d))
    .air(‘cx’, (d, i) => i *100 +30)
    .air(‘cy’, 100);
    d3: des concepts simples et puissants, un style de programma8on
    Alain Roan d3js Toulouse 16/02/17
    •  selectAll() /data() – lien DOM/ data
    var data = [32,57,112,293];
    var circles = d3.select('svg')
    .selectAll('circle')
    .data(data);
    •  enter() – ajout de données
    circles
    .enter()
    .append(‘circle’)
    .air(‘cy’, 60)
    .air(‘cx’, , (d, i) => i *100 +30)
    .air(‘r’, d = > Math.sqrt(d));
    •  exit() – retrait de données
    circles
    .exit()
    .remove();
    en javascript, un objet a des a=ributs accessibles par obj.a=r. Un a=ribut peut être une foncBon que l’on appelle obj.a=r(param)
    La grande élégance du concept est que le même code
    sert à créer, me=re à jour et faire disparaître
    (avec transiBons animées)

    View full-size slide