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

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 alain.roan@percepIble.fr - 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)