D3.js tutorial - 3 - Basic SVG shapes Video Lecture | D3.js Tutorial: A Complete Guide - Web Development

hello there I'm VNO and this is my third
video tutorial on d3 in the previous
video we looked at two basic method
basic methods of d3 and that is the
Select method and the append method and
what they do is well I guess kind of
self-explanatory we select elements with
this like method and we add elements or
append elements with the append method
and in the previous video we use those
two combined to add a paragraph element
to our web page and the result looks
like this right so oops and in this I
mean this is not very exciting and this
is not what d3 was designed to to do and
we want to create really cool
visualizations right and we don't just
want to add elements that we could just
as easily have added with simple HTML so
in this video we're going to take a look
at something called SVG now SVG stands
for scalable vector graphics and it's a
I guess you can call it a way to a way
to create two-dimensional dimensional
graphics on our web page sorry but
before we start with that let me just
show you two real quick things here and
up till now we've written our d3 code in
a single line like this we can actually
divide well separate our methods within
with a new line like this you can indent
this however you like
so right now I mean it doesn't really
seem to matter it's legible anyways but
the more code we'll have the more the
better it will look to separate our our
methods using new lines like this and
also I want to show you how to add style
like stylistic properties to our
elements now there are two ways to do
that well actually one way let's say we
wanted to to change the color of this
paragraph to red I mean right now it's
it's black right which is the default
color the way we change the the color is
using the is using the style method
whenever we use the style method we're
affecting a CSS property of the element
in question so this style method takes
two arguments first of all the property
which is color in this case and the
second one is second one is the value so
let's say we wanted to make it red we
would type red here and if we refresh
you'll see that the paragraph has turned
red and now there's another another
method to change properties of elements
and that is the attribute and method and
you type that like this it's a short for
attribute attribute and
this is attributes are the things that
for instance this source thing here
that's an attribute and you know when
you add a link type a href the hrf thing
is a an attribute so yeah
as you will use style to change the
stylistic properties of elements and we
use attribute or actor to change the
attributes of elements right so with
that knowledge let's start creating some
SVG shapes in this part I'll show you
how to create three basic shapes in SVG
and that is a circle rectangle and a
line first of all whenever we whenever
we want to create SVG shapes we start by
creating a container or in a canvas for
our visualization so you can't just add
a SVG circle onto the HTML document
directly we have to provide it with a
container well it kind of a kind of a
canvas so the way we do that is by
appending a SVG element to our page and
it's really simple it's just append SVG
and let's give it some properties we
need to at least specify the width and
height and you may be surprised by this
I mean we are we are giving it
CSS properties right this width and
height of the of the canvas but we're
using the attribute attribute method and
this is yeah when when when styling SVG
elements we use the attribute method
instead of style and that has its
technical reasons but doesn't really
matter right now right so we have our
SVG container
let's end this with a semicolon and we
can actually start to make use of a good
practice and that is assigning code
snippets to variables so let's assign
this appended SVG elements to a variable
if you haven't worked with JavaScript
before you may not know what a variable
is but it's really simple it's just a
short form for whatever is on the right
side of the variable declaration so
canvas in this case is equal is is
representing this code right here so
let's start by creating a circle we can
first of all create a new variable to
hold our circle element and instead of
typing out d3 select and so on again we
can just start by
typing out canvas since canvas is the
same as this code right here canvas and
we append something to our canvas we
append a circle and let's give it some
properties first of all we want to give
it a the horizontal position and that is
used that is done using the CX property
C stands for Center I think and X is
yeah the horizontal coordinate so CX
let's oh let's give it a CX property of
value of 200 250 pixels so it will begin
it will be positioned in the middle of
our SVG container let's give it the same
property the vertical position and let's
give it a radius of 50 pixels and yea we
can also give it a color and in SVG we
don't use the colors are not called
colors we use the fill properly so fill
will be let's say red and let's save and
refresh and you can see that we have a
circle so let's play this up time is
running out we want to create a
rectangle so the same way as we did when
appending our circle sorry
create a rectangle like this and we give
it similar properties but not the same
properties since it's another shape a
width 100 height of 50 let's say
yeah let's settle with that and since
SVG is created it starts drawing in the
top-left corner or since we haven't
assigned any coordinates to our to our
rectangle it will start it will be drawn
in the in the top-left corner so let's
refresh and as we can see we have a
rectangle now let's wrap this up by
creating a line II create a new variable
and we append a line to our canvas and
this has takes a
let's see we start by giving it the
first horizontal position the first
vertical point let's say 100 and it
moves to second point which will be 400
and y2 400 and we have to give it a
stroke so that we can actually see it
let's say green and let's give the
stroke of width so that it's really
visible stroke width will be 10 and
let's refresh
and you can see that we have a line and
I think you probably understand what
what these properties mean the x1 is the
first horizontal position or point of
the de line so that will be yeah the
furthest to to the left right this is
this is zero and the first vertical
position is 100 pixels from the from the
top this distance here and then the
second point where the line goes to is
400 pixels to the right and that is this
distance and the same for the distance
to the top so yeah that was a short
introduction to to SVG and how you
create SVG shapes using d3 in the next
video we'll I don't know what we'll do
but something even more interesting I
bet so see you then