{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", 600);
const curves = [
{ c: [40, 1, 2, 2], transform: "translate(100, 100)" },
{ c: [40, 1, 4, 2], transform: "translate(400, 100)" },
{ c: [40, 1, 8, 2], transform: "translate(700, 100)" },
{ c: [40, 1, 16, 2], transform: "translate(100, 400)" },
{ c: [40, 1, 32, 2], transform: "translate(400, 400)" },
{ c: [40, 1, 64, 2], transform: "translate(700, 400)" }
];
svg
.selectAll("path")
.data(curves)
.enter()
.append("path")
.attr("stroke", "black")
.attr("stroke-width", "1")
.attr("fill", "none")
.attr("d", d =>
ButterflyCurvesFamily.constants(d.c).path(0, 8 * Math.PI, 0.001 * Math.PI)
)
.attr("transform", d => d.transform);
svg
.selectAll("text")
.data(curves)
.enter()
.append("text")
.attr("stroke", "black")
.attr("x", -50)
.attr("y", 175)
.text(d => `a/b = ${d.c[1]}/${d.c[2]}`)
.attr("transform", d => d.transform);
return svg.node();
}