Orbit Layout 4

Mouseover nodes to get details and stop the animation. An example of d3.layout.orbit that demonstrates different revolution speeds, different orbital scales and animation available in the layout.

forked from slattery's block: Orbit Layout 4

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Orbits 3</title>
  <meta charset="utf-8" />
</head>
<style>

#viz, svg {
    width: 1000px;
    height: 1000px;
  }
  
</style>
<script>

function makeViz() {

d3.json("flare.json", function(data) {drawOrbit(data)});

}

function drawOrbit(_data) {

//down with category20a()!!
  colors = d3.scale.category20b();

orbitScale = d3.scale.linear().domain([1, 3]).range([3.8, 1.5]).clamp(true);
  radiusScale = d3.scale.linear().domain([0,1,2,3]).range([20,10,3,1]).clamp(true);

orbit = d3.layout.orbit().size([1000,1000])
  .children(function(d) {return d.children})
  .revolution(function(d) {return d.depth})
  .orbitSize(function(d) {return orbitScale(d.depth)})
  .speed(.1)
  .nodes(_data);

d3.select("svg").selectAll("g.node").data(orbit.nodes())
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"})
  .on("mouseover", nodeOver)
  .on("mouseout", nodeOut)

d3.selectAll("g.node")
  .append("circle")
  .attr("r", function(d) {return radiusScale(d.depth)})
  .style("fill", function(d) {return colors(d.depth)})

d3.select("svg").selectAll("circle.orbits")
  .data(orbit.orbitalRings())
  .enter()
  .insert("circle", "g")
  .attr("class", "ring")
  .attr("r", function(d) {return d.r})
  .attr("cx", function(d) {return d.x})
  .attr("cy", function(d) {return d.y})
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", "1px")
  .style("stroke-opacity", .15)

orbit.on("tick", function() {
    d3.selectAll("g.node")
      .attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"});

d3.selectAll("circle.ring")
    .attr("cx", function(d) {return d.x})
    .attr("cy", function(d) {return d.y});
  });

orbit.start();

function nodeOver(d) {
    orbit.stop();
    d3.select(this).append("text").text(d.name).style("text-anchor", "middle").attr("y", 35);
    d3.select(this).select("circle").style("stroke", "black").style("stroke-width", 3);
  }

function nodeOut() {
    orbit.start();
    d3.selectAll("text").remove();
    d3.selectAll("g.node > circle").style("stroke", "none").style("stroke-width", 0);    
  }

}

</script>
<body onload="makeViz()">
<div id="viz"><svg></svg></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js