31:T77c,// 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(); }32:T637, // function entity(character) { // return `&#${character.charCodeAt(0).toString()};`; // } // if (columns !== null) return htl.html`

// //

${domain.map(value => { // const label = `${format(value)}`; // return htl.html`

${label}

`; // })} //

`; // return htl.html`

// //

${domain.map(value => htl.html`${format(value)}`)}

`;33:[] 2f:{"title":"Color Legend","cells":[{"id":0,"value":"md`# Color Legend\n\nForked from the original d3-color-legend, I'm here to make a pure SVG version.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"Swatches(\n d3.scaleOrdinal(\n [\n \"blueberries\",\n \"oranges\",\n \"apples\",\n \"pears\",\n \"cherries\",\n \"1\",\n \"2\",\n \"3\",\n \"4\"\n ],\n d3.schemeCategory10\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"Swatches(\n d3.scaleOrdinal(\n [\n \"Wholesale and Retail Trade\",\n \"Manufacturing\",\n \"Leisure and hospitality\",\n \"Business services\",\n \"Construction\",\n \"Education and Health\",\n \"Government\",\n \"Finance\",\n \"Self-employed\",\n \"Other\"\n ],\n d3.schemeTableau10\n ),\n {\n columns: \"180px\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"function swatches({color, ...options}) {\n return Swatches(color, options);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}