2f:T509,{ const height = 500; const svg = d3 .create("svg") .attr("width", width) .attr("height", height); const fullCircle = 2 * Math.PI; const x = d3.scaleLinear().range([0, fullCircle]); const innerRadius = 0.1 * Math.min(height, width); const outerRadius = 0.5 * Math.min(height, width); const r = d3.scaleRadial().range([innerRadius, outerRadius]); const generators = Array.from({ length: L }, (d, i) => d3.randomUniform(i / L, (i + 1) / L) ); const line = d3 .lineRadial() .curve(d3[curve]) .angle(function(d) { return x(d[0]); }) .radius(function(d) { return r(d[1]); }); const data = Array.from({ length: L }, (d1, i) => { return Array.from({ length: N }, (d2, j) => [(1 / N) * j, generators[i]()]); }); const g = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); const shapes = g .selectAll("g") .data(data) .enter() .append("g"); const interpolator = d3.interpolateRgb("black", "blue"); const linePlot = shapes.each(function(d, i) { d3.select(this) .append("path") .attr("fill", d3.color(interpolator(i)).copy({ opacity: 0.1 })) .attr("stroke", "white") .attr("d", line(d) + " Z"); }); return svg.node(); }30:[] 2d:{"title":"Interpolators","cells":[{"id":0,"value":"md`# Interpolators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof N = slider({\n min: 10,\n max: 100,\n value: 50,\n step: 10,\n title: \"Num. of Dots\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof L = slider({\n min: 1,\n max: 20,\n value: 10,\n step: 1,\n title: \"Num. of Layers\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof curve = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}