function Swatches(
color,
{
columns = null,
format,
unknown: formatUnknown,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0
} = {}
) {
const id = `-swatches-${Math.random().toString(16).slice(2)}`;
const unknown = formatUnknown == null ? undefined : color.unknown();
const unknowns =
unknown == null || unknown === d3.scaleImplicit ? [] : [unknown];
const domain = color.domain().concat(unknowns);
if (format === undefined) format = (x) => (x === unknown ? formatUnknown : x);
let inner_array = domain.map((d) => {
return {
name: d,
col: color(d)
};
});
const border_padding = 15;
const item_padding = 20;
let height = (item_padding + border_padding) * inner_array.length;
let svg = d3.create("svg").attr("width", width).attr("height", height);
let legend = svg.append("g");
legend
.selectAll("boxes")
.data(inner_array)
.join("rect")
.attr("x", border_padding - swatchSize)
.attr("y", (d, i) => border_padding + i * (swatchSize + item_padding))
.attr("width", swatchWidth)
.attr("height", swatchHeight)
.style("fill", (d) => color(d.col));
legend
.selectAll("labels")
.data(inner_array)
.join("text")
.attr("x", border_padding + 16)
.attr(
"y",
(d, i) =>
border_padding + i * (swatchSize + item_padding) + swatchSize / 2
)
.text((d) => d.name)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.style("font-family", "sans-serif")
.style("font-size", 15);
return svg.node();
}