movable point on circle

_.md

[ Launch: movable point on circle ] 10907432 by karlin
[ Launch: movable point on circle ] 9845680 by i-blis

config.json

{"description":"movable point on circle","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}},"fullscreen":false,"play":false,"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,"ajax-caching":true}

inlet.js

var svg = d3.select("svg");

var cx = tributary.sw/2,
    cy = tributary.sh/2,
    r = 200;

var orbit = svg.append("circle")
	.attr({
      cx: cx,
      cy: cy,
      r: r,
      fill: "none",
      stroke: "#5e5e5e",
      "stroke-width": 5
    });

var point = svg.append("circle")
	.attr({
      cx: cx + r,
      cy: cy,
      r: r/20
});

var drag = d3.behavior.drag()
	.on("drag", function() {
      var mx = d3.mouse(this)[0] - cx;
      var my = d3.mouse(this)[1] - cy;
      
      var angle = Math.atan2(mx, my);
      var nx = r * Math.sin(angle) + cx;
      var ny = r * Math.cos(angle) + cy;
      
      point.attr({
        cx: nx,
        cy: ny
      })
 
    });

point.call(drag);