D3.js tutorial - 5 - Scales Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hello there I'm VNO and this is my fifth
video tutorial on d3 in this video we're
going to take a look at something called
scales which are really useful to tool
in d3
and yeah so let's just dive right into
it the in the previous video we set up
this bar chart which looks like this in
the browser and what we're doing
essentially is binding this small data
set up here which is stored in the data
array variable and we set the width we
let the width be a function of the data
right so for each bar the width is a
function of the data the corresponding
data value times 10 so the width of the
first bar is 200 pixels the second one
is 400 and the third one is 500 but what
if something a strange value would enter
into our data set but a lot of strange
value but let's say a larger value let's
say 600 now since our container our SVG
container here has these properties
dimensions 500 in width and 500 in
height I guess you can already guess
what will happen so let's save this and
refresh
you can see that we have an additional
bar here but the width of the bar is the
same as for the previous one so let's
take a look at this again but well
actually let's just say 60 and refresh
and we have the same result so the
reason why this is is that since we're
multiplying each value by 10 this value
right here will be 600 right because 60
times 10 is 600 but the width of our
container is only 500 pixels so
everything that exceeds this limits will
be chopped off so this one is actually
it goes to like here but since we our
container ends right here
it doesn't fit and this provides a good
example of when to use scales so scales
are basically well they're both
functions and objects at the same time
and what that means is that we treat
them as functions we make use of their
functionality but they at the same time
they return additional methods that we
can use to alter their behavior but
let's let's take a look at how scales
actually behave so let's set up a basic
scale and what we want to use this scale
for is to take an input range which is
our data right here and transform that
range into a new range with which will
fit into our container so the largest
value we want the largest value to have
the maximum width and and for each data
point to be recalculated so that they
all fit nicely together in this
in our container and the way we do this
is by so first of all let's let's start
with a good practice of knots and
determining not setting our width and
heights in the container directly in the
attribute instead we create a couple of
new variables so let's say the width
variable is 500 and a height variable is
500 as well and then we can just type in
the name of the variables here right and
let's create our scale variable let's
call this the width scale and the way
you define scales is like this you type
out d3 and make use of the scale method
and then you have a number of different
scales to choose from and the most
common one is the linear scale and what
what this means is basically that the
values in the calculated range are the
result of a linear function applied
applied to the domain values so this
range right here is actually called a
domain in d3 and the resulting range is
called the range so what we need to do
now is let the scale know where to fetch
the data from where what the original
range is and the way we do that
it's make is to make use of the domain
method
and this simply well like I said this
defines our original range and you need
to include this range between brackets
and square brackets like this and the
first value we want to type in is the
minimum minimal value and that will be
zero in our case and the second one will
be the largest value in our data set so
right now it's 60 so let's type in 60
and the next method we want to make use
of works in the same way but this time
we define what the resulting range
should be so zero zero should still be
zero but and the maximum value should
always should never exceed 500 so let's
say let's set the maximum value here to
correspond to the width of our container
so let's sit now we can actually make
use of our newly created variable right
here and finish this off with a
semicolon now down here in our our
anonymous function which determines the
width of each bar instead of letting the
width be a function of the data and
directly we can erase all this and make
use of our scale so the way we do that
is we return the scale and input the
value
that the scale will transform so we
simply type in D here so for each data
for each data point here the data will
go into the scale and the scale will
produce a new range which will fit into
our container and this anonymous
function here here will return the new
value right so let's save this and take
a look at what it looks like in the
browser so as you can see all the bars
fit fit nicely into our container and
yeah I guess you understand what what
the scale does by now and scales can
actually they don't need to only deal
with numbers let's say right now all all
our bars here are black let's say we
wanted to give them a color the way we
do that is make use of the fill property
so we can just could just type in red
here and save and refresh and they
they'd all be red but we can actually
make use of scales when it comes to
colors as well so let's define a new
color scale let's just call that color
and that will be a linear scale as well
and the domain will be the same
let's see here
it will go from zero to sixty but the
range in this case will be a range of
colors so let's say we wanted the colors
to go from red for the smallest values
to blue for the largest values let's try
this and instead of letting the field be
red let's create a new anonymous
function and let that function return
for each value
pass it on to our our color scale and
return a color shade within this range
right so let's save and refresh and as
you can see the smallest value has their
reddest shade and this one is completely
blue because it's it's the maximum value
so if we if we were to change this to
let's say five
it's even redder right because it's
closer to our minimal minimum value yes
so that was a short introduction to
scales and this is something that we
will use extensively from now on so yeah
I'll see you in the next video