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