From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Solution: Add circles for each datapoint

Solution: Add circles for each datapoint - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Solution: Add circles for each datapoint

“

(upbeat music) - [Instructor] So how did that go? As a reminder, your challenge was to add a circle to the SVG for each data point in the data array. And I did say that you could reuse your existing rectangle code. So to add a circle instead, let's just show you the minimum changes required and what I'm going to do is actually copy, paste here because one enter selection can be used to add multiple sets of different shapes. So we're going to say there's no width, there's a radius and I'm going to make the radius quite small and there's no X or Y, there's CX and CY. So they're the minimal changes. Let's that save that and refresh. Now we can see that there are three circles, but it was a requirement that we could see all of the circles. And in this case, we can only see the first half of the leftmost circle. Did you manage to work out why and did you manage to fix it? So when we are positioning a circle horizontally with CX, we are positioning the middle of the circle. When we're…

Contents