D3 Examples - visfest experiment #2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="sampler.js"></script>
</head>
​
<body>
<svg width=960 height=500>
  <g transform="translate(-50,0)">
    <path id="outer" fill="none" stroke="#000000" stroke-width="0.8" stroke-miterlimit="10" d="M174.7,85c-24.5,14-57,18-45.8,45.7
        c9.5,23.4-28.2,15.1-45.8-25.7s20.5-65.8,45.8-65.8S196.7,72.5,174.7,85Z"/>
    <path id="inner" fill="none" stroke="#000000" stroke-width="0.8" stroke-miterlimit="10" d="M128.4,64.4c-1.9-0.1-5.9,6-5.9,6s-2.3-3.6-1-7.4
        c1.4-3.8,3.4-3.5,5-3.1C128.3,60.2,141.8,65.1,128.4,64.4z"/>
  </g>
  <g id="output" transform="scale(3)translate(30,0)">
  </g>
</svg>
​
​
  <script>
    var svg = d3.select("svg");
    var inner = d3.select("#inner")
    var outer = d3.select("#outer")
    var numSamples = 20;
    var numLines = 12;
    
    var line = d3.svg.line()
      .x(function(d) { return d.x })
      .y(function(d) { return d.y })
      //.interpolate("linear-closed")
      .interpolate("cardinal-closed")
      .interpolate("basis-closed")
    
    var ins = Sampler.getSamples(inner.node(), numSamples);
    var outs = Sampler.getSamples(outer.node(), numSamples);
    
    var output = d3.select("#output")
    
    
    var lines = [ins];
    d3.range(numLines).forEach(function(index) {
      var samples = []
      var ratio = index / numLines;
      var i, x, y;
      for(i = 0; i < numSamples; i++) {
        x = ins[i].x * ratio + outs[i].x * (1 - ratio);
        y = ins[i].y * ratio + outs[i].y * (1 - ratio);
        samples.push({ x: x, y: y})
      }
      lines.push(samples)
    })
    
    output.selectAll("path.blend")
    .data(lines)
    .enter()
    .append("path").classed("blend", true)
    .attr({
      d: function(d) { return line(d) },
      fill: "none",
      stroke: "#ff005d"
    })
    
   
    
​
 
    
    
  </script>
</body>
​
​
​
​
​
​
​
​
​
​
    