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

forked from malcolm-decuire'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: 1000px;
    height: 1000px;
  }

text {
    pointer-events: none;
  }

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

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

}
  
</style>
<script>

function makeViz() {

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

}

function drawOrbit(_data) {

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]);

planetColors = {Mercury: "gray", Venus: "#d6bb87", Earth: "#677188", Mars: "#7c5541", Jupiter: "#a36a3e", Saturn: "#e9ba85", Uranus: "#73cbf0", Neptune: "#6383d1"}

orbit = d3.layout.orbit().size([500,500])
  .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);

d3.select("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", nodeOver)
  .on("mouseout", nodeOut)

d3.selectAll("g.node")
  .append("circle")
  .attr("r", function(d) {return d.radius ? radiusScale(d.radius) : 20})
  .style("fill", function(d) {return d.depth == 0 ? "#FFCC00" : d.depth == 1 ? planetColors[d.key] : "lightgray"});

d3.selectAll("g.node").filter(function(d) {return d.depth == 1})
  .append("text")
  .text(function(d) {return d.depth == 0 ? "Sun" : d.key})
  .attr("y", 20)
  .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})

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.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.key).style("text-anchor", "middle")
      .attr("y", 15)
      .attr("class", "moon");
    }
    d3.select(this).select("circle").style("stroke", "black").style("stroke-width", 3);
  }

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

}

</script>
<body onload="makeViz()">
<div id="viz"><svg></svg><div id="buttons"></div></div>
<footer>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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