2d:null 2e:["$","title",null,{"children":"Color Legend | Max Brown | Observable"}] 33: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(); }34: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)}`)}

`;35:[] 31:{"id":"d049964df525716f","slug":"color-legend","title":"Color Legend","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-08-25T11:17:36.296Z","update_time":"$D2022-08-25T14:17:02.239Z","view_time":null,"first_public_time":"$D2022-08-25T13:32:53.221Z","has_unpublished_edits":null,"fork":{"id":"a33468b95d0b15b0","slug":"color-legend","title":"Color legend","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8736e7a8f8672f04","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":"starter_2024"},"version":896,"publish_version":896,"role":null,"authored":false,"authors":[{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null}],"members":[{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"function swatches({color, ...options}) {\n return Swatches(color, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"