function renderSplines(controlPointsArray, width, height, straightenedPointsArray = null) {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const xScale = d3.scaleLinear()
.domain([-1, 1])
.range([50, width - 50]);
const yScale = d3.scaleLinear()
.domain([-1, 1])
.range([height - 50, 50]);
const line = d3.line()
.x(d => xScale(d[0]))
.y(d => yScale(d[1]))
.curve(d3.curveBasis);
controlPointsArray.forEach((controlPoints, index) => {
svg.append('path')
.datum(controlPoints)
.attr('d', line)
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');
svg.selectAll(`circle-start-end-${index}`)
.data(controlPoints.filter((_, i) => i !== 1))
.join('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 5)
.attr('fill', 'red');
svg.selectAll(`circle-middle-${index}`)
.data(controlPoints.filter((_, i) => i === 1))
.join('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 5)
.attr('fill', 'green');
});
if (straightenedPointsArray) {
const straightLine = d3.line()
.x(d => xScale(d[0]))
.y(d => yScale(d[1]));
straightenedPointsArray.forEach(straightenedPoints => {
svg.append('path')
.datum(straightenedPoints)
.attr('d', straightLine)
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
});
}
return svg.node();
}