Effect of curve interpolation types on radial lines.
Built with blockbuilder.org
-
-
Save davidstenstroem/14eb3d77f02404fbb9f92455517ef918 to your computer and use it in GitHub Desktop.
Curve interpolation of radial lines
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| scrolling: no |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="10" /></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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment