Tributary inlet

_.md

[ Launch: Tributary inlet ] 5433795 by Y4suyuki

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

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

var drag = d3.behavior.drag()
  .on("drag", function(){
    var dx = d3.event.dx;
    var dy = d3.event.dy;
    //console.log(dx, dy);
    var circle = svg.append("circle")
    .datum({x: tributary.sw/2, y: tributary.sh/2})
    .attr({
      r: 10,
      cx: function(d){ return d.x },
      cy: function(d){ return d.y },
      fill: "#F3CE0B"
    })
    .transition()
    .duration(1000)
    .attr("r", 0)
    .attrTween("cx", function(d){
      return function(t){
        d.x += dx;
        return d.x;
      }
    })
    .attrTween("cy", function(d){
      return function(t){
        d.y += dy;
        return d.y;
      }
    })
    })
               

var rect = svg.append("rect")
.attr({
  width: "100%",
  height: "100%",
  fill: "#0F2670"})

rect.call(drag);