From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Drawing ellipses

Drawing ellipses - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Drawing ellipses

“

- [Instructor] Now for an ellipse. An ellipse is an oval shape, symmetrical horizontally and vertically. It's not an egg shape. An ellipse has four mandatory attributes in D3: Cx and Cy, which position the center of the shape, and Rx and Ry. Rx is the horizontal radius and Ry is the vertical radius. Let's start by copying the circle code and changing newX to 600. So I just copied that, and you can see that that has indented weirdly, so let's remove that. And change newX to 600 and save. So now you'd think if we checked Firefox, we ought to be able to see six circles, right? 'Cause we've got two batches of code adding circles. But I've just gone to Firefox and refreshed, and I can still only see three. And if I look for them in the DOM, which is always the first port of call, you can see there's only three been added, the three that we had before. They're not even added as sort of semi elements, as we might expect. So let's have a look at what's going on here. Let's bring this up a…

Contents