D3.js tutorial - 20 - Maps in D3 Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hi there I'm vino and this is my 20th
video tutorial on d3 in this tutorial
I'll go over the very basics of creating
maps in d3 so in this case we'll create
a map of Sweden divided by its counties
so whenever you have whenever you you
want to create Maps you need to have
some get some map data obviously so in
my case I have this Sweden dot geo JSON
file and the Geo JSON file format is you
could call this file it JSON as well it
won't matter but they file the way you
store this Geographic data in JSON in
the JSON format is called geo jason
simple as that so we have all these
coordinates here and each of these
objects it's a lot of data each of these
are counties so all this code is one
County and if this looks scary
don't be afraid we we don't have to mess
around with this manually fortunately
and the way I got this data was actually
from a shape file which is another file
format for storing Geographic data and
it's much more common than the than the
Geo JSON file format and I used a
software a program called the QGIS to
convert my shapefile to geo Jason but if
you just want to play around with any
map whatsoever you can just google for
geo Jason Maps or something along those
lines and you'll find some geo JSON
files so enough talking let's begin
creating our map we'll start as usual by
loading our data and creating our
callback function
so we will append the data as usual each
county will be a path so I'll say we'll
store each path in one in separate G
elements so I'll save our group is equal
to 10 with select all G and the data
will be data features since this array
of objects is called features and enter
append G ok ok so we've bound our data
now the next thing ok so as you know the
earth is not flat well I hope you know
that the earth is not flat so whenever
we want to depict it on a flat surface
we need to use some kind of projection
and d3 has a number of different
projections that we can use and as you
can see depending on which one we we
choose the map will look yeah they look
kind of different and in this tutorial
we'll be using this Mercator projection
I don't really know how to pronounce
that but that's that's the name and yeah
that's basically the the only new thing
I'd say in this tutorial the projection
part so we'll create our projection
stored in a variable and we'll say d3 g
u dot Mercator and then we'll also need
to create a path generator which we've
done in a couple of other other videos
so I'll say d3 at Geo
path which is the name of a geographic
path generator and using the projection
method I'll pass in the projection to
that path generator so it knows how to
translate these coordinates to pixels on
our on our canvas okay so let's move on
and append a path to each of our G
elements so oops
I will save our areas group append path
and the path data will come from the
path generator and we can give this a
class so we'll we'll do some CSS CSS
styling later on and let's give them a
fail so let's just say steel blue and
yeah let's take a look at how this looks
so save and
refresh I don't know I don't know if you
can even see this but but we actually
have our map here already and it's that
simple to make it bigger we need to
modify our projection so we can use of
the some of the built-in methods that d3
the d3 projection comes with and one of
those one of those methods is the scale
method so I've done some trial and error
in preparation for this so I know that
the best scale for this particular map
is seven thousand three hundred and
we'll also give it a translate of zero
1980 okay save and refresh okay so we
have our and we have our map here so I
mean from this point on it's really just
it's nothing new nothing that we haven't
looked at before well maybe one thing so
let's let's append some some text so
each of these counties the the J the G
GE o JSON file that we use have apart
from the coordinates it has some
additional properties so for instance
this Ln Nam property stores the name of
the County so we can use that and it's
an
and the name is stored in that
properties property so if we want to
append those labels we can just say
group append text and to just specify
where on the map each of these labels
will be placed we can use another
property of the path generator so we can
say okay so we'll make this a function
of our data and we'll return path dot
centroid D
zero so what this means is the centroid
calculates the the center of the path
and we'll give it the data as an
argument and this returns an array of
two numbers which correspond to the
x-coordinate and the y-coordinate so if
we say zero in between the square
brackets we're returned with the
x-coordinate I hope that makes sense and
of course for the Y Y position we can
just repeat this and replace this by one
and we'll make the text a function of
the data as well
so like I said we'll return deep
properties and okay so let's take a look
at this
and of course you need to apply some
additional styling to make this look
good we can we can settle with just
setting the text anchor for now so I'll
say text anchor middle save and fresh
okay so of course we would do we would
apply some additional styling if this
was a real project that we were working
on but yeah I think I'll settle with
that for now this is this was the very
very basics of creating maps and the
only new part really is these two lines
here the projection and the path the geo
path generator I think this should make
sense
I won't I won't lie and say it's easy to
create Maps because it's well the
difficult part usually is converting
your data to the right format and using
the right coordinate system and so on
but once you've got your geographic data
well formatted and in the proper yeah in
the proper format it's it's quite easy
as you can see so yeah that's it for now
I'll see you later