{
const data = mf
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + 75, height]);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickFormat(d3.format("d")))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(data.x))
svg.append("g")
.call(yAxis);
svg.append("g")
.call(grid);
svg.append("g")
.attr("stroke", "steelblue")
.attr("stroke-width", 0)
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("fill", d => color(d.binary))
.attr("r", 3);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("text")
.data(data)
.join("text")
.attr("dy", "0.35em")
.attr("x", d => x(d.x))
.attr("y", d => y(d.y) - 10)
.attr("text-anchor", "middle")
.text(d => d.name);
const legend = d3Legend
.legendColor()
.shape("path", d3.symbol().type(d3.symbolCircle).size(25)())
.shapePadding(15)
.labelOffset(5)
.scale(color)
.labels(["Pass", "Fail"]);
svg.append("g")
.attr("class", "legend_auto")
.style('font-size', 18)
.style('font-family', 'sans-serif')
.attr("transform", `translate(${width - margin.right - 30}, ${margin.top})`)
.call(legend)
return svg.node();
}