Curve interpolation of radial lines

Effect of curve interpolation types on radial lines.

forked from owenr's block: Curve interpolation of radial lines

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <select id="curve">
  </select>
  <p>Number of points: <input id="points" type="range" value="4" min="4" max="100" /></p>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
  	    .attr("width", 960)
	      .attr("height", 500)
    	.append("g")
    		.attr("transform", "translate(479.5, 249.5)")

svg.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 120)
      .attr("fill", "#fff")
      .attr("stroke", "#ddd")
    
    var path = svg.append("path")
    var markers = svg.append("g").attr("class", "markers")
    var points = 4;

function redraw(curve) {
      if(!curve) curve = d3.curveLinear;
      var data = d3.range(points)
      var scale = d3.scaleLinear().domain(d3.extent(data)).range([0, 2 * Math.PI])
      var line = d3.radialLine()
        .angle(function(d,i) { return scale(d) })
        .radius(120)
      	.curve(curve)

path
        .attr("d", line(data))
        .attr("fill", "#fff")
        .attr("stroke", "steelblue")
     	
      var sel = markers.selectAll("circle").data(data)
      sel.enter().append("circle")
      	.merge(sel)
      		.attr("r", "3")
      		.attr("cy", function(d,i) { return Math.cos(scale(d)) * -120 })
      		.attr("cx", function(d,i) { return Math.sin(scale(d)) * 120 })
      		.attr("fill", "#f00")
      		.style("opacity", 0.2)
      sel.exit().remove()
    };
    redraw()
    d3.select("select").on("change", function(d, i) {
      opt = d3.select(this.options[this.selectedIndex]);
      redraw(opt.datum().func)
    })
    	.selectAll("option").data([
        {name: "curveLinear", func: d3.curveLinear },
        {name: "curveBasis", func: d3.curveBasis },
        {name: "curveBasisClosed", func: d3.curveBasisClosed },
        {name: "curveBasisOpen", func: d3.curveBasisOpen },
        {name: "curveBundle", func: d3.curveBundle },
        {name: "curveCardinal", func: d3.curveCardinal },
        {name: "curveCardinalClosed", func: d3.curveCardinalClosed },
        {name: "curveCardinalOpen", func: d3.curveCardinalOpen },
        {name: "curveCatmullRom", func: d3.curveCatmullRom },
        {name: "curveCatmullRomClosed", func: d3.curveCatmullRomClosed },
        {name: "curveCatmullRomOpen", func: d3.curveCatmullRomOpen },
        {name: "curveMonotoneX", func: d3.curveMonotoneX },
        {name: "curveMonotoneY", func: d3.curveMonotoneY },
        {name: "curveNatural", func: d3.curveNatural },
        {name: "curveStep", func: d3.curveStep },
        {name: "curveStepAfter", func: d3.curveStepAfter },
        {name: "curveStepBefore", func: d3.curveStepBefore },
      ])
      .enter()
    		.append("option")
    		.text(function(d) { return d.name })
    d3.select("#points").on("change", function() {
      points = +this.value
      redraw()
    })
  </script>
</body>

https://d3js.org/d3.v4.min.js