owenr/.block

## .block
license: mit
scrolling: no

## README.md

      
    Raw
  

              README.md
            
          
    Effect of curve interpolation types on radial lines.
Built with blockbuilder.org

  
## index.html
<!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>
	<!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>