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