Visualisation de données avec D3.js
Adresses derrière les liens

D3 pour les Data Driven Documents
Écran 2
  1. GitHub pour télécharger D3 https://github.com/mbostock/d3
  2. wiki avec documentation D3 https://github.com/mbostock/d3/wiki
  3. d3js.org http://d3js.org/
  4. API D3 https://github.com/mbostock/d3/wiki/API-Reference
Références
Écran 4
  1. Interactive Data Visualization for the Web http://chimera.labs.oreilly.com/books/1230000000345/
  2. D3 cheat sheet https://github.com/alignedleft/strata-d3-tutorial/blob/master/d3%20Cheat%20Sheet.pdf
  3. Getting beyond hello world with D3 http://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/
Types de constructions
Écran 5
  1. galerie D3 https://github.com/mbostock/d3/wiki/Gallery
Objectif de la formation
Écran 6
  1. The Big List of D3.js Examples http://christopheviau.com/d3list/
Créer les axes
Écran 11
  1. D3 SVG Axes https://github.com/mbostock/d3/wiki/SVG-Axes
Faire l'importation de données
Écran 12
  1. D3 Time Formatting https://github.com/mbostock/d3/wiki/Time-Formatting
Types de requêtes pour les données
Écran 15
  1. D3 Requests https://github.com/mbostock/d3/wiki/Requests
Faire l'importation
Écran 17
  1. D3 Time Formatting https://github.com/mbostock/d3/wiki/Time-Formatting
Chaîner des opérations asynchrones
Écran 19
  1. queue.js https://github.com/mbostock/queue/blob/master/README.md
Sélecteurs
Écran 21
  1. D3 Selections https://github.com/mbostock/d3/wiki/Selections
Exemple de manipulation DOM : ajouter et retirer des noeuds
Écran 22
  1. Selections in d3 – the long story http://www.jeromecukier.net/blog/2013/03/
Appliquer une fonction avec un sélecteur
Écran 23
  1. D3 Selections https://github.com/mbostock/d3/wiki/Selections
Entrée et sortie
Écran 25
  1. Thinking with joins http://bost.ocks.org/mike/join/
  2. section Data du chapitre des sélections https://github.com/mbostock/d3/wiki/Selections#data
Une philosophie de construction (p2)
Écran 28
  1. Getting beyond the Hello World with D3 http://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/
Plan de match
Écran 30
  1. SVG Basic Shapes and D3.js https://www.dashingd3js.com/svg-basic-shapes-and-d3js
Stylisation des dessins par les attributs
Écran 39
  1. stroke-dasharray https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
  2. shape-rendering https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
Représentation des couleurs
Écran 42
  1. nom de couleur http://fr.wikipedia.org/wiki/Couleurs_du_Web
  2. Colors with D3 https://github.com/mbostock/d3/wiki/Colors
Vocabulaire pour les chemins
Écran 46
  1. Paths in SVG 1.1 standard http://www.w3.org/TR/SVG/paths.html#PathElement
Transformations
Écran 49
  1. matrice de transformation http://en.wikipedia.org/wiki/Transformation_matrix
  2. Transform Attribute sur la norme SVG http://www.w3.org/TR/SVG/coords.html#TransformAttribute
JavaScript fonctionnel
Écran 52
  1. JavaScript closures http://jibbering.com/faq/faq_notes/closures.html
  2. Getting beyond the Hello World in D3 http://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/
Exemple de code JavaScript fonctionnel
Écran 53
  1. module JavaScript http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
Approche de Jerome Cukier
Écran 56
  1. Getting beyond the Hello World with D3 http://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/
Principe des échelles
Écran 58
  1. article de Wikipedia sur les domaines et codomaines http://en.wikipedia.org/wiki/Domain_and_range
Échelles ordinales
Écran 60
  1. Ordinal Scales https://github.com/mbostock/d3/wiki/Ordinal-Scales
Palettes de couleurs
Écran 63
  1. 4 palettes de couleurs prédéterminées https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
  2. D3 Scales and Colors http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
Échelles quantitatives
Écran 64
  1. Quantitative Scales https://github.com/mbostock/d3/wiki/Quantitative-Scales
Échelles linéaires
Écran 65
  1. Linear Scales https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear-scales
Fonctions pour échelles linéaires (suite)
Écran 67
  1. spécification de format https://github.com/mbostock/d3/wiki/Formatting#d3_format
Axes
Écran 68
  1. D3 SVG Axes https://github.com/mbostock/d3/wiki/SVG-Axes
Échelles temporelles
Écran 73
  1. Time Scales adresse privée
Formats temporels
Écran 74
  1. seconde intercalaire http://fr.wikipedia.org/wiki/Seconde_intercalaire
  2. éférence complète pour les formats temporels https://github.com/mbostock/d3/wiki/Time-Formatting
  3. locale.timeFormat() https://github.com/mbostock/d3/wiki/Localization#locale_timeFormat
Interpolateurs
Écran 79
  1. d3.interpolate(a,b) https://github.com/mbostock/d3/wiki/Transitions#d3_interpolate
  2. interpolateRgb() https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateRgb
  3. interpolateString() https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateString
  4. interpolateArray() https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateArray
  5. interpolateObject() https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateObject
  6. interpolateNumber() https://github.com/mbostock/d3/wiki/Transitions#d3_interpolateNumber
Fonctions utilitaires pour générer certains types de chemins
Écran 82
  1. Path Data Generators https://github.com/mbostock/d3/wiki/SVG-Shapes#user-content-path-data-generators
Fonction line()
Écran 83
  1. définition de Cardinal-spline sur Wikipedia http://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
Fonction diagonal()
Écran 93
  1. astuce de projection http://stackoverflow.com/questions/15007877/how-to-use-the-d3-diagonal-function-to-draw-curved-lines
Principe de base des animations dans D3
Écran 98
  1. D3 Transitions https://github.com/mbostock/d3/wiki/Transitions
  2. Working with transitions http://bost.ocks.org/mike/transition/
Ajouter un délai
Écran 103
  1. Starting transitions https://github.com/mbostock/d3/wiki/Transitions#starting-transitions
Easing
Écran 105
  1. liste complète des fonctions de easing https://github.com/mbostock/d3/wiki/Transitions#easing
Illustrer les fonction de easing
Écran 106
  1. Easing Functions Guide de référence http://easings.net/fr
Tweening
Écran 107
  1. technique utilisée en animation http://en.wikipedia.org/wiki/Inbetweening
Concept clé : la constance
Écran 110
  1. Object constancy http://bost.ocks.org/mike/constancy/
Lire la souris et les événements de gestuelle
Écran 113
  1. d3.event https://github.com/mbostock/d3/wiki/Selections#d3_event
  2. d3.mouse https://github.com/mbostock/d3/wiki/Selections#d3_mouse
  3. d3:touches https://github.com/mbostock/d3/wiki/Selections#d3_touches
  4. Documentation Mozilla pour événements tactiles (touch) adresse privée
Fonctions d'interaction avec les données
Écran 115
  1. fonctions de comportement (behaviors) https://github.com/mbostock/d3/wiki/Behaviors
  2. événement SVG appelé brush https://github.com/mbostock/d3/wiki/SVG-Controls#brush_event
Interaction drag
Écran 116
  1. documentation pour interaction drag https://github.com/mbostock/d3/wiki/Drag-Behavior
  2. exemple d'implantation de drag simple http://bl.ocks.org/mbostock/1557377
Exemple d'interaction drag
Écran 117
  1. exemple d'implantation de drag sur layout force http://bl.ocks.org/norrs/2883411
Interaction zoom
Écran 118
  1. documentation pour interaction zoom https://github.com/mbostock/d3/wiki/Zoom-Behavior
Exemple d'interaction zoom
Écran 119
  1. zoom avec zoom.x() et zoom.y() http://bl.ocks.org/mbostock/3892919
Diagrammes étudiés
Écran 122
  1. liste complète des layouts https://github.com/mbostock/d3/wiki/Layouts
Diagrammes en camembert
Écran 123
  1. d3.layout.pie() adresse privée
  2. Pie Chart de michael Bostock http://bl.ocks.org/mbostock/3887235
Diagrammes d'histogrammes
Écran 126
  1. d3.layout.histogram() https://github.com/mbostock/d3/wiki/Histogram-Layout
  2. Histogram de mbostock adresse privée
Diagrammes de cordes
Écran 128
  1. Tableau explicatif des différentes représentations de diagrammes de cordes http://circos.ca/guide/tables/
  2. What is a D3jS Chord diagram? adresse privée
Diagrammes de cordes (suite)
Écran 130
  1. d3.layout.chord() adresse privée
Exercice : appliquer la recette des cordes
Écran 134
  1. exemple de diagramme de cordes de Michael Bostock http://bl.ocks.org/mbostock/4062006
Diagrammes de forces
Écran 135
  1. d3.layout.force() https://github.com/mbostock/d3/wiki/Force-Layout
Exemple d'un diagramme de forces
Écran 136
  1. Code flowers http://www.redotheweb.com/CodeFlower/
Exercice : analyser un diagramme de forces
Écran 139
  1. Labeled Force Layout http://bl.ocks.org/mbostock/950642
  2. A D3 plug-in for automatic label placement using simulated annealing http://vis.berkeley.edu/courses/cs294-10-fa13/wiki/images/5/55/FP_EvanWang_paper.pdf
Diagrammes arborescents
Écran 140
  1. d3.layout.tree() https://github.com/mbostock/d3/wiki/Tree-Layout
  2. Hierarchical layout https://github.com/mbostock/d3/wiki/Hierarchy-Layout
  3. Cluster https://github.com/mbostock/d3/wiki/Cluster-Layout
  4. Pack https://github.com/mbostock/d3/wiki/Pack-Layout
  5. Partition https://github.com/mbostock/d3/wiki/Partition-Layout
  6. Treemap https://github.com/mbostock/d3/wiki/Treemap-Layout
D3 et les données géospatiales
Écran 149
  1. GeoJSON http://geojson.org/
  2. TopoJSON https://github.com/mbostock/topojson/wiki
Types de projections
Écran 152
  1. série de fonctions de projection https://github.com/mbostock/d3/wiki/Geo-Projections
Étape 1 : obtenir les fonds de carte
Écran 154
  1. Natural Earth http://www.naturalearthdata.com/
  2. Geogratis http://geogratis.cgdi.gc.ca/
Étape 2 : chargement des données cartographiques
Écran 155
  1. queue() et defer() http://giscollective.org/d3-queue-js/
Faire des graphiques sans programmer
Écran 164
  1. HighCharts http://www.highcharts.com/
  2. Rickshaw http://code.shutterstock.com/rickshaw/
Tous droits réservés 2015, Espace Courbe Formation inc. —25 février 2015 — 16:10:05