Hovering Planets

_.md

[ Launch: Tributary inlet ] 6722715 by poezn

circles.svg

<svg xmlns="http://www.w3.org/2000/svg" xlink:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="100%" height="100%"><g><circle cx="280" cy="300" r="57.79644730092272" style="fill: #614c4c;"></circle></g><g><circle cx="560" cy="300" r="79.76143046671967" style="fill: #614c4c;"></circle></g><g><circle cx="840" cy="300" r="120" style="fill: #614c4c;"></circle></g></svg>

config.json

{"description":"Hovering Planets","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"circles.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/f7UO8XS.png","inline-console":true}

inlet.js

/*
var hover = function() {
  var numTicksPassed = (Date.now() - startTime)/1000;
  
  g.selectAll("g")
  .attr({
    "transform": function(d, i) {
      var angle = numTicksPassed % 2 * Math.PI;
      var tx = 50 + Math.sin(angle) * 99;
          ty = 50 + Math.cos(angle) * 20;
      return "translate(" + [tx, ty] + ")"
    }
  });
}

d3.timer(hover);
*/


tributary.init = function(g) {
  var scale = d3.scale.sqrt()
  .domain([0, 70])
  .range([20, 120]);
   
  var master = g.append("g").attr({"id": "master"});
  
  var grps = master.selectAll("circle")
  .data([10, 25, 70])
  .enter().append("circle").attr({
    "cx" : function(d, i) {
      return (i+1) * 280
    },
    "cy" : function(d, i) {
      return 300
    },
    "r": scale
  })
  .style({
    "fill": "#614C4C"
  });
};

tributary.run = function(g, t) {
  var numTicksPassed = t;

  var rad = t % (2 * Math.PI);
  console.log(rad);

  g.selectAll("circle")
  .attr({
    "transform": function(d, i) {
      var tx = 50 + Math.sin(rad) * 99;
          ty = 50 + Math.cos(rad) * 20;
      return "translate(" + [tx, ty] + ")"
    }
  });
}