legend = g => {
const width = 240;
g.append("image")
.attr("width", width)
.attr("height", 8)
.attr("preserveAspectRatio", "none")
.attr("xlink:href", ramp(color.interpolator()).toDataURL());
g.append("text")
.attr("class", "caption")
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(candidates[0] +"% (purple) vs. " + candidates[1] + "% (orange)" );
g.call(d3.axisBottom(d3.scaleLinear(color.domain(), [0, width / 2, width]))
.ticks(6)
.tickFormat(d => `+${(Math.abs((d-0.5) * 100)+50).toFixed(0)}%`)
.tickSize(13))
.select(".domain")
.remove();
}