utiliser ↔ pour naviguer avez vous eu la
#grippe cette année? connaissez vous
###quelqu'un d'autre qui l'a eu ? je suppose que
#OUI j'ai entendu dire qu'elle a été terrible
cette année et j'ai voulu
#voir et #comparer
![backgrounds](../img/app-landing.png "background") [ceci](http://abenrob.com/Grippe-Narrative/ "Grippe-Narrative")
est le résultat Super - c'est cool!
Comment ai-je #FAIT cela? #D3 js Qu'est-ce que #D3 js? #d ata
#d riven
#d ocuments

###d onnées- ###d irigées- ###d ocuments ##créé par
###Mike Bostock
(NY Times) mais pour commencer, une petite
###présentation je m'appelle #Adam Roberts
et je conçois des ##applications géographiques
pour [SpatialDev](http://www.spatialdev.com "SpatialDev")
et en ##freelance je suis à l'origine du
[chapitre alpin](http://maptime-alpes.com/ "Maptime-Alpes") de
[#Maptime!](http://maptime.io/ "est vraiment fantastique") vous devriez le dire
##à tout le monde
autour de vous!!! Revenons à #D3 js... #Documents Les SVG sont ##compréhensibles,
ce qui est parfait
###nous ne sommes pas des ordinateurs ![cercles](../img/3simpleCircles.png "en ligne") #Données ![scatter](../img/Scatterplot.png "background") Donc nous pouvons écrire un ###simple SVG.
mais qu'en est-il pour
#un nuage de 150 points ?
[demo](http://bl.ocks.org/mbostock/3887118 "nuage d'iris") #Dirigée Contrairement aux autres
systèmes de visualisation,
#D3 ##lie (associe) la donnée
aux
###composants du document le ##cercle que nous avons vu
###n'est pas juste qu'un cercle
avec x,y et r.
il porte les #données
définissant les ##cercles ![cercles](../img/3complexCircles.png "background") changer les #données
change les ##cercles revenons à notre ##application... nous avons nos
##données ![data](../img/data.png "background") maintenant regardons
###la chronologie ![timeline](../img/timeline.png "background") nous avons une #ligne,
quelques ##cercles
et du ###texte #ligne
![line](../img/line.png "inline") ##cercles
![line](../img/circles.png "inline") ###texte
![line](../img/text.png "inline") avez vous vu
où nous ##lions les #données
à chaque ###composant ? maintenant pour la
#carte ![map](../img/map.png "background") #D3 va réalise un
###polygone svg
pour ##chaque région avec le #nom de la région
##associé au ###svg nous chargeons les ##données
![dataload](../img/dataload.png "inline") définissons la ###projection
![projection](../img/proj.png "inline") et définissons la #carte
![dataload](../img/region.png "inline") sur les
##descriptions/graphiques ![narrative](../img/narrative.png "background") cette partie est ####excellente
parce que nous utilisons
#D3 pour ajouter le ###HTML ![narrative code](../img/narr-code.png "inline") tout aussi ####excellent
nous utilisons
les #données pour réaliser de
##nombreux graphiques
![week-append](../img/week-append.png "inline") qu'en est-il
de #interractivité ? nous utilisons les sélections #D3
pour
##attacher nos
###composants ensemble ![selections](../img/selections.png "background") avez vous vu
où nous avons
#changé les
##couleurs des ###regions ? ![choropleth](../img/choro.png "inset") ##Ressources
*[documentation D3](http://d3js.org/)
*[Jason Davies](http://www.jasondavies.com/maps/)
*[Jason Davies!](http://www.jasondavies.com/maps/transition/)
*[Faisons une carte](http://bost.ocks.org/mike/map/)
*[Americas Cup Final](http://www.nytimes.com/interactive/2013/09/25/sports/americas-cup-course.html)
*[exemples](http://christopheviau.com/d3list/gallery.html) #Sources
*[Demos Cercles](http://bost.ocks.org/mike/circles/)
*[Texte d'introduction](http://maptimesea.github.io/2015/01/07/d3-mapping.html)
*[Inspiration Grippe-Narrative](https://github.com/SimonbJohnson/Ebola-Narrative/) #Merci