Published
Edited
Aug 25, 2022
Fork of Color legend
Importers
Insert cell
Insert cell
Swatches(
d3.scaleOrdinal(
[
"blueberries",
"oranges",
"apples",
"pears",
"cherries",
"1",
"2",
"3",
"4"
],
d3.schemeCategory10
)
)
Insert cell
Insert cell
Insert cell
// Copyright 2021, Observable Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/color-legend
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);

// new function here.
let inner_array = domain.map((d) => {
return {
name: d,
col: color(d)
};
});
// let inner_array = [domain.map((d) => d), domain.map((d) => color(d))];
// return inner_array;

const border_padding = 15;
const item_padding = 20;

// create an svg with the desired width and height
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();
}
Insert cell

// function entity(character) {
// return `&#${character.charCodeAt(0).toString()};`;
// }

// if (columns !== null) return htl.html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; min-height: 33px; font: 10px sans-serif;">
// <style>

// .${id}-item {
// break-inside: avoid;
// display: flex;
// align-items: center;
// padding-bottom: 1px;
// }

// .${id}-label {
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// max-width: calc(100% - ${+swatchWidth}px - 0.5em);
// }

// .${id}-swatch {
// width: ${+swatchWidth}px;
// height: ${+swatchHeight}px;
// margin: 0 0.5em 0 0;
// }

// </style>
// <div style=${{width: "100%", columns}}>${domain.map(value => {
// const label = `${format(value)}`;
// return htl.html`<div class=${id}-item>
// <div class=${id}-swatch style=${{background: color(value)}}></div>
// <div class=${id}-label title=${label}>${label}</div>
// </div>`;
// })}
// </div>
// </div>`;

// return htl.html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
// <style>

// .${id} {
// display: inline-flex;
// align-items: center;
// margin-right: 1em;
// }

// .${id}::before {
// content: "";
// width: ${+swatchWidth}px;
// height: ${+swatchHeight}px;
// margin-right: 0.5em;
// background: var(--color);
// }

// </style>
// <div>${domain.map(value => htl.html`<span class="${id}" style="--color: ${color(value)}">${format(value)}</span>`)}</div>`;
Insert cell
function swatches({color, ...options}) {
return Swatches(color, options);
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more