use ↔ to navigate
did you get the
#flu this year?
do you know
###anyone else who did
?
I'm gussing
#YES
I kept hearing how bad it was this year
and wanted to
#see
and
#compare
for myself
[this](http://abenrob.com/Grippe-Narrative/ "Grippe-Narrative")
is what I came up with
Whoa - that's cool!
How did I
#DO that?
#D3
js
What is
#D3
js?
#d
ata
#d
riven
#d
ocuments
##created by
###Mike Bostock
(NYTimes)
but first, a little
###housekeeping
my name is
#Adam Roberts
and I build
##spatial applications
for [SpatialDev](http://www.spatialdev.com "SpatialDev")
and as a
##freelancer
I also started the
[alpine chapter](http://maptime-alpes.com/ "Maptime-Alpes") of
[#Maptime!](http://maptime.io/ "is totally awesome")
You should tell
##more people
about us!!!
Back to
#D3
js...
#Documents
SVGs are
##human readable,
which works well for us because
###we aren't computers
#Data
So you can write a
###simple SVG.
how about
#a scatterplot with 150 points
?
[demo](http://bl.ocks.org/mbostock/3887118 "iris scatterplot")
#Driven
Unlike other
visualization workflows,
#D3
##binds (joins)
the data
to the actual
###document components
the
##circle
we saw
###isn't just a circle
with x,y and r.
it is the
#data
that defined the
##circle
change the
#data
change the
##circle
so back to our
##app...
we have our
##data
let's look at the
###timeline
we have a
#line,
several
##circles
and some
###text
#line
##circles
###text
did you see
where we
##bound
the
#data
to each
###component
?
now for the
#map
#D3
is going to make an
###svg polygon
for
##each region
with
#region name
##bound
to the
###svg
we load the
##data
define the
###projection
and define the
#map
on to the
##narrative/charts
this part is
####cool
becasue we used
#D3
to add
###HTML
also
####cool
because we used
the
#data
to make
##lots of charts
what about
the
#interaction?
we use
#D3
selections to
##tie
our
###components
together
did you catch
the part where
we
#changed
the
##region
###colors?
##Resources
*[D3 documentation](http://d3js.org/)
*[Jason Davies](http://www.jasondavies.com/maps/)
*[Jason Davies!](http://www.jasondavies.com/maps/transition/)
*[Let's Make a Map](http://bost.ocks.org/mike/map/)
*[Americas Cup Final](http://www.nytimes.com/interactive/2013/09/25/sports/americas-cup-course.html)
*[examples](http://christopheviau.com/d3list/gallery.html)
#Sources
*[Circles demos](http://bost.ocks.org/mike/circles/)
*[Some intro text](http://maptimesea.github.io/2015/01/07/d3-mapping.html)
*[Grippe-Narrative inspiration](https://github.com/SimonbJohnson/Ebola-Narrative/)
##Thanks!