Circular Layout (Slider)

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #333;
}

input {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 240px;
}

</style>
<input type="range" min="0" max="358" step="2">
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var radius = d3.scale.linear()
    .domain([0, 9])
    .range([120, 240]);

var fill = d3.scale.linear()
    .domain([0, 1])
    .range(["brown", "steelblue"]);

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
  .append("g")
    .attr("transform", "translate(480,250)");

var g = svg.selectAll("g")
    .data(d3.range(0, 360, 2))
  .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + d + ")"; });

path.transition()
    .delay(function(d) { return d.z * 1500; })
    .attr("fill-opacity", 1);

d3.select("input")
    .on("input", changed)
    .on("change", changed);

function changed() {
  var value = this.value;
  path.attr("fill-opacity", function(d) {
    return Math.max(0, 1 - Math.sqrt(Math.abs(d.x - value) / 80));
  });
}

</script>

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