Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

visfest experiment #1

hello markdown

<!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="scale(3)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">
  </g>
</svg>

<script>
    var svg = d3.select("svg");
    var inner = d3.select("#inner")
    var outer = d3.select("#outer")
    var numSamples = 100;
    
    var line = d3.svg.line()
      .x(function(d) { return d.point.x })
      .y(function(d) { return d.point.y })
      //.interpolate("cardinal")
      .interpolate("basis-closed")
    
    var ins = Sampler.getSamples(inner.node(), numSamples);
    var outs = Sampler.getSamples(outer.node(), numSamples);
    
    var output = d3.select("#output")
    .attr("transform", "scale(3)translate(100,0)")
    
    output.selectAll("path.output")
    .data([ins, outs])
    .enter()
    .append("path").classed("output", true)
    .attr({
      d: function(d) { return line(d) },
      fill: "none",
      stroke: "#f00"
    })
    
    output.selectAll("line.connect")
    .data(ins)
    .enter().append("line").classed("connect", true)
    .attr({
      x1: function(d,i) { return d.point.x },
      y1: function(d,i) { return d.point.y },
      x2: function(d,i) { return outs[i].point.x },
      y2: function(d,i) { return outs[i].point.y },
      stroke: "#000",
      "stroke-width": 1
      
    })
    output.selectAll("circle.inner")
      .data(ins)
      .enter()
      .append("circle").classed("inner", true)
      .attr({
        r: 1,
        cx: function(d) { return d.point.x },
        cy: function(d) { return d.point.y },
        fill: "none",
        stroke: "#000"
    	})
    
    output.selectAll("circle.outer")
      .data(outs)
      .enter()
      .append("circle").classed("outer", true)
      .attr({
        r: 1,
        cx: function(d) { return d.point.x },
        cy: function(d) { return d.point.y },
        fill: "none",
        stroke: "#000"
    	})
    
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js