D3.js tutorial - 9 - Working With Arrays Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hi there I'm vno and this is my ninth
video tutorial on d3 so we're getting
close to actually being able to produce
really useful and interesting visual
visualizations using d3 but I thought
that before we get into the really heavy
stuff I would just show you show you
some quick tips and tricks on how to
work with arrays in d3 since all of our
data is somehow going to consist of an
array or multiple arrays I thought this
would be a good point to to look at a
number of techniques we can alter or
modify our our arrays so if you've
worked with a JavaScript before I'm sure
you're familiar with a number of
techniques we can use to you know like
remove elements from our array we can
add append elements we can shift them
around shuffle them and so on
for instance actually let's just save
this and we're gonna work in the console
in the inspector this video so if you
don't know how this inspector tool works
just go back to my I think it was the
second tutorial or the third where we
looked at how this console application
works but yeah we only have this in our
documents we have this simple array
consisting of five elements now if you
were to use raw JavaScript you could do
something like data which is the name of
our array shift
like that and that would get give us the
first value in the array now d3 has a
number of these array functions or array
yeah let's let's call them functions on
its own so for instance let's try out
let's try to sort our array I mean right
now it begins with 10 and ends with 15
but what if we want to need to be
descending instead of ascending well we
could do something like this we could do
data sort and then use the inherent
method d3 descending and we would get oh
yeah we took we took away the first
value here but yeah as you can see we've
shifted the the order of the values in
our array now another method would be
let me refresh this another method we
could use is and this is really useful
it will be really useful later on d3 min
which gives us the smallest value in our
array and yeah same thing goes for d3
max data gives us the largest value we
could also use the extent method and
that's but this is how you write that
and that gives us both the minimum and
the maximum value in our array we could
do d3 sum which conveniently sums up all
the values for us for us and the result
is 150 in this case we could
type III mean to get the mean of the
array which is 30 and also the median in
this case they're the same and yeah you
know there's a lot of there are a lot of
these methods and later on it will be
useful to to know at least the basic
ones and the rest of them you can just
go to the API reference and check it out
so I think we'll end with one last fun
array method which is the shuffle method
and as the name suggests this simply
shuffles around the values in our array
so yeah you can see that they are in a
random order and when we do it again
they they're randomly ordered again so I
think we'll settle with that this was a
short video but it's I think it's good
to know this stuff before we move up so
I'll see you in the next video