Introduction to D3.js

Translate & Position

Shirley Wu

Shirley Wu

Data Sketches
Introduction to D3.js

Check out a free preview of the full Introduction to D3.js course

The "Translate & Position" Lesson is part of the full, Introduction to D3.js course featured in this preview video. Here's what you'd learn in this lesson:

Shirley explores the translate() method of transformation, and explains that using translate() modifies the coordinates of that element, and adds that translate is useful when positioning an element with precision.

Preview
Close

Transcript from the "Translate & Position" Lesson

[00:00:00]
>> I want to take us through, A little explanation of SVG transform and in particular the translate command. So in SVG when we set translate on an element, what we're actually doing is we're actually setting the coordinate system of that particular element. So let's try kind of seeing what that looks like.

[00:00:32]
[COUGH] Let's play around with these sliders and see kind of try and get an intuitive feel of what that means. So we have these two rectangles. One of them has a transform on it and the other one does not. So this one does not have the transform and this one does have the transform.

[00:01:00]
And let's try, so, You can see that as I'm moving the x and y around, the whole coordinate system for this rectangle is moving around. And then alternatively, if we update the x and y position of this rectangle, then, You can see that even though the x y positions are exactly the same, these two squares are at completely different places in our SVG.

[00:01:45]
Even though it's the same SVG container, just applying this transform translate will change where both of these squares are. And the reason why I wanted to bring that up is because you might have noticed that in our example we used a translate on our paths and translate or transform and translate is very, very useful.

[00:02:12]
Because then what we can do is for our define attribute, our d attribute instead of having to write your pedal path to be let's say this is position 300 by 200 or something. So instead of having to write your pedal path as starting at 300 200 and then going down to 350 200 or something like that.

[00:02:41]
Instead of having to do all of that calculation, you can just pop in this translate and then it will be positioned exactly where you want it to. And you can keep that original kind of d attribute with the string that you've already created. So, and very, very helpful.

[00:02:58]
And we end up using the transform attribute a lot to be able to kind of manipulate these SVG elements and their underlying coordinate system. So make sure to kind of play around so that you have a good grasp on what's happening with this underneath the hood. And also, I'm just really proud of this little interaction.

[00:03:23]
And so, yeah. So if not for nothing else, please just play around with this so that I feel, [LAUGH] I don't know, I feel there was good effort put in for this interaction.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now