Radial Gradient Traffic Light

Use SVG's radialGradient element to make circles look like spheres.

The light changes every second using d3.interval().

<html>
  <head>
    <style>
    body {
      margin: 0;
      background: #3a403d;
    }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    var svg = d3.select("body").append("svg"),
      defs = svg.append("defs"),
      on = 0,
      defs = {},
      gradient = {},
      circles = {},
      lights = [
        {
          color: "green",
          on: {
            inner: "#fff",
            outer: "#00FF00"
          },
          off: {
            inner: "#001900",
            outer: "#000"
          }
        },
        {
          color: "yellow",
          on: {
            inner: "#fff",
            outer: "#FFFF00"
          },
          off: {
            inner: "#333300",
            outer: "#000"
          }
        },
        {
          color: "red",
          on: {
            inner: "#fff",
            outer: "#ff0000"
          },
          off: {
            inner: "#330000",
            outer: "#000"
          }
        }
      ];

lights.forEach(function(d, i){

defs[d.color] = svg.append("defs");

gradient[d.color] = defs[d.color].append("radialGradient")
          .attr("id", d.color + "-gradient");

gradient[d.color].append("stop")
          .attr("class", "stop-inner")
          .attr("offset", "10%")
          .attr("stop-color", i == on ? d.on.inner : d.off.inner);

gradient[d.color].append("stop")
          .attr("class", "stop-outer")
          .attr("offset", "95%")
          .attr("stop-color", i == on ? d.on.outer : d.off.outer);

circles[d.color] = svg.append("circle")
          .attr("class", "circle-" + d.color)
          .style("fill", "url(#" + d.color + "-gradient)");

});

function change(on){

lights.forEach(function(d, i){

gradient[d.color].select(".stop-inner")
            .attr("stop-color", i == on ? d.on.inner : d.off.inner);

gradient[d.color].select(".stop-outer")
            .attr("stop-color", i == on ? d.on.outer : d.off.outer);

d3.select(".circle-" + d.color)
            .style("fill", "url(#" + d.color + "-gradient)");
      });

}

d3.interval(function(){
      on = on == 2 ? 0 : on + 1;
      change(on);
    }, 1000);

function draw(){
      var width = window.innerWidth,
        height = window.innerHeight,
        radius = height / 6.666666666667;

svg
          .attr("width", width)
          .attr("height", height);

lights.forEach(function(d){

circles[d.color]
            .attr("cx", width / 2)
            .attr("r", radius);

});

circles.green
          .attr("cy", height / 1.2);

circles.yellow
          .attr("cy", height / 2);

circles.red
          .attr("cy", height / 6);

}

window.onload = draw, window.onresize = draw;

</script>
  </body>
</html>

https://d3js.org/d3.v4.min.js