legend = (g) => {
let w = 35;
let h = 20;
let rects = d3.range(0, 11).map(d => ({
i: d,
f: c(d/10),
t: t(d3.hcl(c(d/10)).l),
x: d*w,
y: 10,
text: (d/10).toFixed(3)
}));
g.style("font-family", "sans-serif")
.style("font-size", 10)
.style("font-weight", "bold");
g.selectAll('rect')
.data(rects)
.join("rect")
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("rx", 3)
.attr("ry", 3)
.attr("width", w-1)
.attr("height", h)
.attr("fill", d=>d.f);
g.selectAll('text')
.data(rects)
.join("text")
.attr("dx", d => d.x + (w/2))
.attr("dy", d => d.y+13)
.attr("fill", d=>d.t)
.attr("text-anchor", "middle")
.text(d => d.text);
g.append("text")
.attr("text-anchor", "end")
.attr("dx", -4)
.attr("dy", 24)
.text("WIN%")
}