{
const svg = d3.create("svg")
.attr("width", 400)
.attr("height", 400)
const legend = svg.append("g")
.attr("transform", "translate(100, 100)")
const size = 20;
const border_padding = 15;
const item_padding = 5;
const text_offset = 2;
legend
.append('rect')
.attr("width", 120)
.attr("height", 125)
.style("fill", "none")
.style("stroke-width", 1)
.style("stroke", "black");
legend.selectAll("boxes")
.data(domains)
.enter()
.append("rect")
.attr("x", border_padding)
.attr("y", (d, i) => border_padding + (i * (size + item_padding)))
.attr("width", size)
.attr("height", size)
.style("fill", (d) => color(d));
legend.selectAll("labels")
.data(domains)
.enter()
.append("text")
.attr("x", border_padding + size + item_padding)
.attr("y", (d, i) => border_padding + i * (size + item_padding) + (size / 2) + text_offset)
.text((d) => d)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.style("font-family", "sans-serif");
return svg.node();
}