#401 geom daily

_.md

[ Launch: #401 geom daily ] 5342452 by enjalot

config.json

{"description":"#401 geom daily","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/9qHef5T.png"}

inlet.js

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

var outerR = 288;
var innerR = outerR / 2.28096;
var insideR = outerR - innerR;

var w = tributary.sw;
var h = tributary.sh;

var cx = w/2;
var cy = h/2;

//outer
svg.append("circle")
.attr({
  cx: cx,
  cy: cy,
  r: outerR
})
.classed("circle", true);


function innerCircle(d, i) {
  var g = d3.select(this);
  
  var theta = i * Math.PI/4;
  var x = cx + insideR * Math.cos(theta);
  var y = cy + insideR * Math.sin(theta);
  
  /*
  g.append("circle")
    .classed("inner", true)
    .classed("circle", true)
    .attr({
      cx: x,
      cy: y,
      r: innerR
    })
    */
  
  var inc = i * Math.PI / 4;
  var start =  Math.PI/2 + inc;
  var end = start + 2 * Math.PI * 0.443
  var d = {
    startAngle: start,
    endAngle: end,
    innerRadius: innerR,
    outerRadius: innerR
  }
  start = 2 * Math.PI * -0.268 + inc;
  end = start + Math.PI/4 * 1.72;
  var d2 = {
    startAngle: start,
    endAngle:  end,
    innerRadius: innerR,
    outerRadius: innerR
  }
  var arc = d3.svg.arc();
  
  g.append("path")
  .classed("inner", true)
  .classed("circle", true)
  .attr("d", arc(d))
  .attr("transform", "translate(" + [ x, y ] + ")")
  
  g.append("path")
  .classed("inner", true)
  .classed("circle", true)
  .attr("d", arc(d2))
  .attr("transform", "translate(" + [ x, y ] + ")")

}

var circles = svg.selectAll(".in")
.data(d3.range(8))
.enter()
.append("g")
.classed("in", true)
.each(innerCircle)

style.css

.circle {
  fill: none;
  stroke: #DF138D;
  stroke-width: 1;
}