D3.js tutorial - 2 - Select and Append Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hi and welcome to the second part of
this tutorial series on d3 in this part
we'll explore some of the basic
functionality in d3 and that is
selecting and appending elements to our
web page so yeah
let's start right off the bat and first
of all what we want to do is to actually
fetch the library or include the library
so that we can use it and that is done
with pay script tag and if you haven't
used JavaScript before then
then I can tell you that whenever you
use JavaScript you have to include the
code between an opening and a closed
closing a script tag so and in this case
since we are not we just want to include
the whole library we will add this
source attribute attribute to our tag
and specify the source the location of
our library and you can do this either
by downloading the d3 library or you can
reference it through an a URL like I'm
doing now so let's see d3.js
think
this is the right address
so what I'm doing here is simply letting
the browser know where to where to find
the library so and the actual d3 code or
whenever you're writing JavaScript code
like I said just included between script
tags and let's begin writing some code
so first of all let's try and select an
element on our webpage as some now we
don't we don't really have any elements
we just have these well the body element
and the head element but let's add a
paragraph outside the d3 code so this is
a paragraph and let's do something to it
using d3 first of all when we're writing
d3 code the first thing to to note is
that we start by typing out d3 and then
simply select which is the name of the
select method and we specify between
brackets and quotes what we want to
select so as of now we have selected the
paragraph element but we haven't done
anything to it so if we head over to the
browser and refresh yeah we we see the
paragraph here since we added it using
HTML but this d3 code doesn't really do
anything to it so let's do something to
it I'll use the text method and replace
the text within the
paragraph tags so let's say hello world
and we hit refresh
and you can see that the text has
changed from this is a paragraph to
hello world now before I explain how
this code we actually works let me show
you another basic example so let's say
we don't have any paragraph elements on
on our web page so I'll remove that and
I'll remove this and let's try to add a
new paragraph element the way we do this
is again and typing out d3 and select
but this time we select the body and we
append something to it and of course we
append a very paragraph and we need to
supply it with some text so that we can
see it
hi what's up and save and then head over
to our browser and refresh and we have a
new paragraph element now of course you
don't need d3 to perform these basic
operations and this is not what t3 was
designed to do but it provides a good
starting point in my view for explaining
how D 3 works so let's review this code
what is this first of all this d3 these
two characters what so if you have some
knowledge about JavaScript you'll
understand this easier but I'm gonna try
to explain that what's happening even
even to the rest of you d3 actually
refers to something called
an object an object is simply well not
simply but it's it's a complex
collection of data and we can actually
take a look at t3 and see like inspected
further and the way we do this is by
using something called the console and
the console is provided by the browser
and I'm using Google Chrome and the way
I click up the console is by
right-clicking on the page and selecting
inspect element if you're using Firefox
then you you can just install the
Firebug plug-in and you'll have the same
options and I'm sure there's other
alternatives in Safari and the rest of
the browsers
so the first section we're provided with
is the elements section which is simply
it's showing us our the original source
code and also the elements that we have
dynamic dynamically added to our webpage
but the the section that I want to show
you right now is this one called the
console right now it's empty but let's
try I'm gonna show you something
so let's write console.log d3 save and
refresh
and you see that we are provided here
with well it's an may look like just a
random line collection of characters but
this is actually the d3 object itself so
if we click this little arrow thing we
see everything that yeah this is the d3
object and all of these are as you can
see functions functions and objects of
different sort and here in the top you
can see that d3 is an object as I said
before so I wasn't lying yeah this this
this looks complicated and we won't be
inspecting the d3 object itself but
we'll be using this console to in the
future to inspect various things
one thing that I want to show you is
that one of these functions is actually
the Select function which you'll
remember from our example we are using
the d3 object and one of its inherent
methods with which is select and as you
can see in the console yeah yeah this
this basically shows you the properties
of well how the Select function works
but we won't go into detail as to what
this means because it's quite
complicated but yeah I hope you get the
picture that you can actually review and
inspect any element that we're using in
d3 and as we move on you'll be able to
understand more and more what this
actually means so a quick review our
code here
you know what we're doing we are we are
selecting the body and we're appending a
paragraph to it with the text hi what's
up and in more technical terms we are
calling the d3 object we are using one
of its inherent function and functions
or methods they're basically synonyms
and within brackets and quotes we are
providing it with an argument and this
is we are simply stating that we are
selecting the body element right and
this returns a selection which we can do
stuff with and we are appending
something to the selection so we are
appending a paragraph element to the
body element kind of straightforward and
then we can use another method called
the text method and specify what text
should be added within the paragraph
tags yeah and you start to see this
pattern of every method and object being
separated by a dot and there this is
called method chaining and yeah this is
just this is the way we we connect our
selections and the method we want to use
on them
so I hope that's relatively clear and
we'll take a look at some more basic
examples in the next video