Making a map of the United States with D3

alright so we just finished making this
map of the entire world and now we're
gonna apply some of those same skills on
but tweak it a little bit and just to
make a map of the United States so right
now it looks like absolutely nothing but
we're gonna be reusing a lot of the same
code so if we look at our index file
it's pretty much the same as it was last
time we have d3 included we have topo
JSON library included just a quick
review topo JSON is a format that is
wonderfully small that you can use to
pass around Geographic data so when
you're serving Maps on the web which is
the time where you don't want to send
people megabytes and megabytes and
megabytes of information using topo JSON
is really good because you get a really
detailed map but not have it be a huge
file so then we are also including
visualization j/s which is our
JavaScript here so what we have done is
we have our standard method of starting
off a d3 visualization this is kind of
our boilerplate where we select a div on
the page we put an SVG on the inside we
put a G inside of that we've transformed
it translated but in this case for all
maps it really doesn't matter if you do
transform and translate because it isn't
going to affect anything so we should
probably do is I've just set all of my
margins to be 0 we could get rid of all
the margin stuff but it's comforting to
me to just use the same boilerplate
every single time we make a
visualization then we read in our data
the data this time is a file called us
JSON and you say so last time we had
world Capo JSON this is just us JSON is
this some sort of different file the
answer is no generally when you get a
topo JSON file the file format or the
file extension rather is just going to
be dot JSON it's not going to be topo
JSON sometimes it is sometimes people
named geo JSON geo JSON top o je
tsongkhapa JSON
probably the majority of the time it'll
just be JSON let's see what else do we
have I stole this projection from the
last visual we made and this one is
based on the whole world so we're going
to end up changing it it one sees a
projection is the way that you translate
the latitude and longitude of a globe so
the globe is a sphere and oddly enough
our computer screens are not spheres our
computer screens are flat so you need
some way to kind of cut apart and
stretch apart that globe to make it fit
onto your screen and that's what a
projection does for you and then down
here there's a little piece that will
take that projection and help convert it
into a something that can take a series
of latitude and longitudes and draw a
shape for you so this is the way that we
ended up setting the D attribute of the
paths last time and if you're like what
are you talking about go back and watch
the last video or just watch this video
because literally every time you make a
map you are gonna use this exact same
code and a lot of the time you'll use
code that looks pretty much like this so
you're not missing much except knees
hang on and on a long time for a for the
other video so alright first thing we're
gonna do we are going to console dot log
data because you should always see what
data is coming in this is your data here
which is directly related to your u.s.
JSON so US JSON gets read in and then
gets turned into this data so save
refresh Oh No why isn't it showing up
what did I do wrong
our files there okay add the force
refresh had the hold on shift so it
would acknowledge my change so alright
we have an object that as arcs as
objects that is transforming as a type
every single time talked about this last
time every single time you pull in topo
JSON the thing that is important to you
is what is inside of objects here we're
gonna open it up
we have counties we have land and we
have States so let's start off by
drawing States and then maybe we can go
in and draw some counties later so last
time we drew a visualization let's look
at our other visualization yes we did
this here we did var countries equals
topo JSON feature data data objects not
countries dot features
yes it's stupid there's feature here in
features there and there's data here and
data objects here every time you do topo
JSON you're gonna be doing this same
thing so here's what we're gonna do we
are pulling out the states of our
state's equals topo json dot feature and
you need to send it the root of all of
your data which is data and then what we
what specific piece of the topo json we
would like to process so as i said
before it is in objects States is what
we're after so we're gonna do data
objects States and we're gonna say give
me the features so if we console dot log
States save or fresh we end up with a
big long list of a bunch of different
states they don't have names that's so
sad why they not have names well I guess
have the shortcoming of our data such is
life I guess all right so let's draw
those dates so whenever you draw shapes
on an SVG you're going to be drawing
pads pads are lines that are complicated
lines
and if you fill them in they become
shapes so we are going to SVG select all
and we'll call these states and we're
gonna bind the state's data to it enter
append we're gonna add a path one path
for every single state and we're gonna
make sure it has the class of state now
if we say and we refresh we're going to
see that nothing has shown up on the
page we have an SVG here and there are a
bunch of pads inside but the path needs
a D in order to actually have a
definition I don't know what it is in
order to have a series of points that it
follows along in order to get drawn so
every single time you are drawing a
shape and you have a projection and you
have a Geo path generator here
attr D path it's all you gonna do we're
gonna save it we're gonna refresh look
at that it's beautiful
except it's not beautiful because it's
way up on the top left hand corner now
what we could do is play around with our
projection so if we played around with
what it was pointing at let's say we
zoomed in a little bit and leave but we
had centered it around the US we could
do that sure but generally speaking the
United States is so wonderful that it
has a special projection in d3 that will
just Center itself around the United
States
so geo dot Albers USA all-caps USA and
we are going to so now instead of being
about the entire world it is just about
the United States and no it is a
lowercase si let me change this one to
alright so we look at this
and sure enough it is not only just the
United States but it is also taken
Alaska and Hawaii and pop them down in
the bottom corner
so now what we need to do is we're gonna
need to change this scale in order to
zoom in on this so our scale is 100 if
we made it 500 it'll be a bit bigger but
not quite big enough for us maybe we'll
go to 850 and it will probably look a
bit better how do you pick the right
number you just make up things you just
go in and out one thing you could do is
make sure the aspect ratio of your
background SVG is correct so you can see
now we have a little bit of space on the
left hand and the right hand side so we
could make it fit right inside of our
SVG but we don't care enough about that
right now so in order to pull this into
a graphic that is just about the United
States all we had to do was import a
different set of data and then change
our projection to be geo Albers USA the
one downside about geo Albers USA is if
you try to feed it any information that
is not in the United States it will
freak out it will break it won't just
let's say normally when you have dots
and you're trying to put a bunch of
circles on a map if you do something
wrong with it end up in the top left
hand corner at zero zero because they'll
have not another not a number as their
coordinates if you try to feed latitude
and longitude to the geo Alvers USA
projection and let's say it's a Puerto
Rico which sometimes comes in with
census Atlas or with census data it will
stop working and it will you know freeze
your computer it will not process
anything and you won't be able to see
anything on your visualization and which
would be very sad so if you were getting
a very strange error when you are trying
to map stuff that is just in the USA you
might have some data points that are not
actually inside of the USA so let's
change let's use some CSS in order to
change what this map looks like let's
see it is with the class of state so
let's go into our index and we'll say
dot state
let's say Phil let's make it even
lighter III seems to be a nice one there
you go
but when you want to see the lines
between it so let's say stroke three
three three and make it nice and thin
and there we go we have the United
States well yes we do at the United
States but we also have some more
information that's hiding inside of our
top edge a song so a great thing about
top o JSON is instead of just having one
file as one data set you can have a ton
of extra information in there so for
example if we open up objects here this
is our top of JSON because we console
dot log that a long time ago and we have
counties and we have land and we have
States
so let's look let's take counties let's
graph the counties it's gonna be the
same thing that we did here except
instead of extracting the states and
mapping the states for going to extract
the counties and map the counties so if
we look it's objects counties well back
to our visualization Tijs
we are going to say bar counties equals
topo json dot feature data data objects
dot again objects dot counties every
time you pull in a different type of
json a file you're gonna want to console
dot log it to see what your different
options are that county is not features
and now we can honestly just cut and
paste this code here and change state to
county state to county and we will find
counties to it so now we are adding all
of these states and then they're adding
all of these counties so i'm gonna save
and refresh and there you go right on
top of everything we now have all of the
counties in the United States so
whatever I want to do
is let's make these maybe transparent
and then we will give them a stroke that
is white so there will be problems with
this later on but you'll see so if we
look here the class is County so I'll
say dot county fill nine stroke ffs and
we'll make it also breathe them okay so
we now see that we have a ton of
counties on here but the issue is that
the county lines are interfering with
the state line so let's say if we made
these state lines on kind of thick two
point five we will see the the county
lines are running on top of and through
the state lines and this becomes an
issue with draw order I'm about what
layers are on top of what other layers
d3 actually has a way for you to raise
and lower specific layers but what we
are gonna do instead the problem we're
having right now is you have state
layers that have a gray in the
background on the bottom and then you
have transparent counties on top that
have a white line and that white line is
getting the way of the black line of the
state's so we're gonna switch this up
we're gonna put the counties on the
bottom we're gonna give them the gray
and then we're gonna put the black line
two states on top so first let's switch
this around so we'll draw the counties
before we draw the states you're gonna
be so surprised when i refresh this
they're gonna say oh the counties have
all disappeared
the county has disappeared because these
states have a fill color and that fill
color doesn't let you see the counties
underneath so what we're gonna do is
we're gonna get rid of the fill color
for the states we're gonna give it no
fill color and we are going to instead
give the counties on the bottom that
fill color
say that
and there you go I mean this looks
tragic because our stroke is Israel
think but yes now you have a map of all
the states and then all the counties
inside of it and they look rather
splendid I mean just to top this all off
let's go ahead and add a CSV into this
it's the exact same stuff we did last
time with the world map but we're gonna
do it again
so my favorite dataset in the world is
this data set with a ton of different
waffle houses in America so they each
have a latitude and longitude and a
score and a location this is the score
I made that score up sorry I think it's
how close they are to to Atlanta so we
now need to along with reading and US
dot JSON we're gonna read in a CSV file
called waffle houses dot CSV so when we
add a new thing to defer we get a new
data set here so we're gonna call this
waffle houses we're gonna go down to the
bottom and we're gonna console dot log
waffle houses just to make sure the data
came in okay before we try to try it so
to save refresh roll down does this look
like a bunch of waffle houses yes it
does latitude longitude location score
beautiful so we are going to plot these
on the map which means we need to
convert all of those latitude and
longitudes into X&Y; coordinates so first
off let's do SVG dot select all and
we're gonna call this each one of these
is going to be a waffle house we're
gonna bind our data and add a circle for
each one of these now in order to this
is dot waffle house here so we're going
to do attr class waffle house and we're
just gonna give them an a radius of
let's eat it that should be fine we now
need to set the CX and CY though we'll
set them each just to 10 right now save
it and then there will be a ton of
circles that are right there there's
some one top of each other they become a
square so what we need to do is we need
to take the latitude longitude convert
it to an x and y so that it will show up
on this page and the way that we do that
is we use our projection so if we
consult out log D
you
this is each one of our walk model is
there's a column called lat and there's
a column called long and we just feed
that to the projection and the
projection turns it into an x and a y so
vark Awards equals projection d dot long
d dot lat
and let's just look at the coordinates
that we get back from that
so there we go
we have an X and we have a y so right
now we are just trying to get the x
value so we are going to return towards
zero now it's kind of weird that you
need both the latitude and the longitude
in order to just get the ax but that's
how projections work so every single
time you are mapping something with
latitude and longitude and putting it on
to a map as a dot you are going to use
this you are also going to use this
we're going to set the C Y and we're
going to return not the first coordinate
but rather the second coordinate so the
first one is the X the second one is the
Y we'll save it will refresh and Hey
look at that we've got a lot of waffle
houses maybe we throw a little opacity
on there
so we can see through them
maybe a little
a less opaque and then you can see
wonderfully enough where waffle houses
are focused around America so yes we
changed our projection to being America
we use several different layers inside
of our topo JSON in order to draw both
states and the counties underneath we
adjusted the draw order between the two
and the CSS so that we would be able to
see state lines without having to be
interfered by County lines and then we
added some dots on top of that so not
too bad at all the next video we are
going to look at these shapes here which
is just a bunch of clusters and instead
of having it be oddly distributed around
we are going to break these into
different segments and then count the
number of waffle houses in each one of
those bins and if you say what just look
at the next video in the series know
what I'm talking about