d3-moon-generator.js

_.md

[ Launch: d3-moon-generator.js ] 5c28dbe599ba3347295a3abcd7e13b21 by lgrkvst

config.json

{"description":"d3-moon-generator.js","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"slask":{"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,"thumbnail":"http://i.imgur.com/OHXcowU.png"}

inlet.js

var svg = d3.select("svg")

function circleGen() {
  //set defaults
  var r = function(d) { return d.radius; },
      x = function(d) { return d.x; },
      y = function(d) { return d.y; },
      s = function(d) { return d.shadow; };

  //returned function to generate circle path
  function circle(d) {
    var cx = d3.functor(x).call(this, d),
        cy = d3.functor(y).call(this, d),
        myr = d3.functor(r).call(this, d),
        s = d3.functor(shadow).call(this, d),
        sweepflag;
    if (s < 0.5) {
  sweepflag=1;
  s = d3.scale.linear().domain([0,0.5]).range([myr, 5*myr])(s);
} else {
  sweepflag=0;
  s = d3.scale.linear().domain([0.5,1]).range([5*myr, myr])(s);
}
  
    return "M" + cx + "," + cy + " " +
           "m0, " + -myr +
           " a" + myr + "," + myr + " 0 1 0 0 " + myr*2 +
           " a" + s + "," + s + " 1 0 "+sweepflag+" 0 " + -myr*2 + " Z";
  }

  //getter-setter methods
  circle.r = function(value) {
    if (!arguments.length) return r; r = value; return circle;
  };
  circle.x = function(value) {
    if (!arguments.length) return x; x = value; return circle;
  };
  circle.y = function(value) {
    if (!arguments.length) return y; y = value; return circle;
  };
  circle.shadow = function(value) {
    if (!arguments.length) return shadow; shadow = value; return circle;
  };

  return circle;
}

var myC = circleGen()
   .x(function(d) { return d.x; })
   .y(function(d) { return d.y; })
   .r(function(d) { return d.r; })
   .shadow(function(d) { return d.shadow; });

var data = [
  {x: 300, y: 300, r: 200, shadow:0.01}
];

svg.selectAll("path.circle")
    .data(data)
  .enter().append("path")
	.attr("class", "circle")
    .attr("d", myC)
    .style("stroke", function(d) { return d.fill; })
	.style("fill", "red").style("stroke-width", "5.2px");

svg.append("g").attr("transform", "translate(98,542)").append("text").text(myC(data[0]))