From the course: D3.js Essential Training for Data Scientists
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Drawing circles - D3.js Tutorial
From the course: D3.js Essential Training for Data Scientists
Drawing circles
- [Narrator] Now let's add some circles. We're gonna add one circle for each data point using the same array as before, data array. We're going to add the circles in a horizontal line making them bigger or smaller, depending on the data. We use the same SVG again, in fact, we can just copy and paste the first three lines, so let's copy that, and then Atom gives us some weird indentation which I'm gonna remove. Give that a new line, and we just change rect into circle. Circles have three mandatory attributes, so I'm gonna add three placeholders here. This indentation that I'm doing here is just convention, because it shows me that the attributes relate to the circle. That's why I line then up under the circle but you don't have to do that if that doesn't work for you. Finish that off with a semicolon. So, the mandatory attributes here are cx, cy, and r. I think of cx and cy as the x and y coordinates of the center of the circle. I don't know if that's what Mike Bostock had in mind when…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.