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: Create a traffic light

Solution: Create a traffic light - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Solution: Create a traffic light

“

(lively upbeat music) - [Instructor] So how did your challenge go? This one was a bit trickier than our first challenge. So I am going to add some new data. There's lots of ways of tackling this, and you don't have to do it exactly as I have done it, but I'm going to create, I'm going to call it labelArray, and I'm going to use that to drive the addition of my circles. Okay, so I'm saying go to the SVG, find any circles, and compare them against the data, the labelArray, sorry. And then my enter selection is just accessing the enter property of that bound data. So I'm going to reuse this line code or some as much of it as I can. For each item in the enter selection, I want to append a circle to begin with, so I'm not tackling the text yet. And cx, or cy and cx and r like so. Okay, to begin with, these are just going to be black. So we want them vertically aligned, which means they should all have the same cx value, and they're all going to have a radius of, let's say, 20. See how that…

Contents