Tip:
Highlight text to annotate it
X
Hi, this is Makoto, and welcome to the joy of d3.js.
Today, I am going to talk about very basic way of drawing circles using d3.js and
Topics, there are three.
First is about setting up environment. Then talks about basic d3 api, like select,
selectAll, data, append, and enter. Then talks about, it's not necessarily about
d3, but more about SVG basic shapes like circle, rectangle, path, and text.
So let's start.
The first step is, so this is our project site, and this is the git address, so what
you do is git clone.
And while we are cloning the project, just to mention that this is more for developers,
so I assume you know how to use git, and you know basic of html, javascript, and css, so
I don't explain too much detail.
Though SVG, I don't think you need to know about it inside out from the very beginning,
because I didn't know much when I started d3.js, so I will try to explain
some of the svg basics when you need it.
ok?
Now we got the project.
First commit is this commit.
And see what's inside.
There is d3 javascript v3 which was recently release.
And here is index, it's about 30 lines of code.
so what it does. Firs, include this d3 javascript.
then you define some width and height variable. then important thing is you have three sets
of data, each has id, x, and y.
ok, after that. it does d3.select.
so what it does is. let's see what it does.
if you go here. so first of all.
I am going to start up Python server in port 8000.
In the very beginning, you can just open html file in the browser, but when you start loading
data from somewhere external like in csv or json, then you have to host it from somewhere,
so I server from the server from the web server, and if I go there, you can see the list of
three circles.
so the selector, if I go back to this one. and if I see that, I can see the element.
If you do select, it returns one element, but if you do selectAll, it returns multiple
elements.
and after that you are appending svg element then after that you are also appending a circle.
but before you are appending a circle, this one is loading data using a function called
data.
And interesting thing is, here you are just select body and appending svg which is straight
forward, but here you are selecting circle element, but you haven't really appended yet.
This is kind of a placeholder. It's kinda declaring that I am going append data into
these elements, and then you do the circle.enter. What it does is that it enter into the each
element of datum, so these, then define what you do. So, what it returns here is actually
each data like that, so if I do something like console.log d, then it does actually
return each datum. ok?
So that's the basic of very very basic of how to use d3 api, such as select, data, enter,
and append. And I gonna talk about how this enter actually
means when I start talking about transitions .
and this is for the circle, and if you actually look into this playground, which jumps to
tributary. This is kind of similar to the three circles, but it also, this circle bit
is exactly same as this one, and also this one define rectangle, and this one define
text.
and what you need is, actually, I will show you.
what element
it's actually rendering. so this is svg elements, and it appends these
circle elements which require central x, central y, and radius. so you can see the circle 10
by 10.
And for this one. If I look into same thing, inspector element.
enter d3.selectAll , data, it has 3 element, and if you go to inspector, you can actually
see, bigger.
Each of them. so this one has a circle, which requires, cx and cy, while rectangle has slightly
different api, it requires y position, width and height.
For text, x, y, and text-anchor, and all that stuff. So each shape is slightly different,
so you can actually play with these things.
One thing good about tributary is that you can change variables, and as soon as you change
these variables, it re-renders immediately. okay, this is the basic way of using svg and
this is it today.