d3.layout.orbit modes

An example of d3.layout.orbit that shows the different modes:

"flat" is the default, demonstrated in earlier examples that use flare.json.

"solar" arranges each satellite in its own ring, equally divided from the set size of the layout.

"atomic" places 2 satellites in orbit in the first ring and 8 in every ring after that.

"custom" is achieved by passing an array of integers. Each integer sets the number of satellites in that ring, with the final value used to set the number of satellites in all remaining rings. Under the hood, "solar" could be achieved by passing [1], "atomic" could be achieved by passing [2,8] and "flat" could be achieved by passing [9999].

forked from emeeks's block: d3.layout.orbit modes

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

#viz, svg {
    width: 600px;
    height: 600px;
    display: block;
    margin:auto;
  }

text {
    pointer-events: none;
  }

#buttons {
    position: absolute;
    top:0;
    left:0;
  }

circle.ring {
    fill: none;
    stroke: white;
    stroke-width: 1px;
    stroke-opacity: .15;

}
      .d3-tip {
   font-family: 'Raleway', sans-serif;
   font-size: .8em;
   line-height: 1;
   padding: 7px;
   background: black;
   color: lightgray;
   border-radius: 20px;
}
  
</style>
<body align=center bgcolor=black>
<div class=dropdown></div>
<div id="buttons"></div>
<div id="viz"></div>

function visualise(data){
      var option = ["marketPercent", "volume", "tapeA", "tapeB", "tapeC"]
    var key = option[0]
    var select = d3.select('.dropdown')
      .append('select')
          .style('font-size', '20px')

.attr('class','select')
      .on('change',onchange);
    var options = select
      .selectAll('option')
      .data(option).enter()
      .append('option')
      .text(function (d) { return d; }); 
      function onchange() {
        drawOrbit(data,d3.select('select').property('value'))
      };
  
  
  
  
  d3.select("#buttons").append("button").html("solar").on("click", function() {newMode("solar")})
  d3.select("#buttons").append("button").html("flat").on("click", function() {newMode("flat")})
  d3.select("#buttons").append("button").html("atomic").on("click", function() {newMode("atomic")})
  d3.select("#buttons").append("button").html("custom").on("click", function() {newMode([4,4])})

orbit = d3.layout.orbit().size([450,450])
  .children(function(d) {return d.values})
  .revolution(function(d) {return 1 / d.orbital_period})
  .orbitSize(function(d) {return orbitScale(d.depth)})
  .speed(1)
  .mode("atomic")
  .nodes(data);

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 newMode(_mode) {
    orbit.mode(_mode)
    .nodes(data);

d3.select("g.viz")
  .selectAll("circle.ring")
  .data(orbit.orbitalRings())
    .exit()
    .transition()
    .duration(500)
    .style("stroke-opacity", 0)
    .style("stroke-width", 3)
    .remove();

d3.select("g.viz")
    .selectAll("circle.ring")
    .data(orbit.orbitalRings())
    .enter()
    .insert("circle", "g")
    .attr("class", "ring");
    
    d3.selectAll("circle.ring")
    .attr("r", function(d) {return d.r})
    .attr("cx", function(d) {return d.x})
    .attr("cy", function(d) {return d.y});

}

function nodeOver(d) {
    orbit.stop();

if (d.depth == 2) {
      d3.select(this).append("text").text(d.label || d.name).style("text-anchor", "middle")
      .attr("y", 15)
      .attr("class", "moon");
    }
    d3.select(this).select("circle").style("stroke", "black").style("stroke-width", 3);
 
   tip.show

}

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

tip.hide
  }

drawOrbit(data,key);

function drawOrbit(_data,key) {
    d3.select("body").selectAll("svg").remove(); 
    //d3.selectAll("g.node").remove();
    //d3.selectAll("text.moon").remove();

var svg =  d3.select("#viz").append("svg");
  
      var circs = []
    _data.forEach(function(d){ circs.push(d[key])})
    var rscale = d3.scale.linear()
           .domain([0,d3.sum(circs)])
           .range([0,100])
    
    _data.forEach(function(d,i) {
     d.name = d.venueName;
     d.radius = rscale(d[key])*2000;
     //d.orbital_period = rscale(d[key])/2;
     d.orbital_period = i+1*2;

});
  
  
  orbitScale = d3.scale.linear().domain([1, 3]).range([3.8, 1.5]).clamp(true);
  radiusScale = d3.scale.linear().domain([210.64,2500,10000,71492.68]).range([2,4,8,16]);

color = d3.scale.category20c();

var format = d3.format(",")

tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d) { return d.name + ": " + format(d[key]) });

svg
.append("g")
.attr("class", "viz")
.attr("transform", "translate(50,50)")
  .selectAll("g.node").data(orbit.nodes())
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"})
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide)
        d3.selectAll(".node").call(tip)

d3.selectAll("g.node")
  .append("circle")
  .attr("r", function(d) {return d.radius ? radiusScale(d.radius) : 0})
              .attr("opacity", .67)

.style("fill", function(d,i){return color(i)});

d3.selectAll("g.node").filter(function(d) {return d.depth == 1})
  .append("text")
  .text(function(d) {return d.depth == 0 ? "Sun" : d.name})
  .attr("y", 20)
    .style("fill", "white")

.style("text-anchor", "middle")

d3.select("g.viz")
  .selectAll("circle.ring")
  .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})

}
}
</script>
<footer>
<script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js to a secure url

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js