2a:null 2b:["$","title",null,{"children":"Vertical Color Legend | Kamil Slowikowski | Observable"}] 30:T104c,function legend({ color, title, tickSize = 6, width = 36 + tickSize, height = 320, marginTop = 20, marginRight = 10 + tickSize, marginBottom = 20, marginLeft = 5, ticks = height / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("x1", marginLeft - width + marginRight); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(height - marginBottom, marginTop), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(height - marginBottom, marginTop)), {range() { return [height - marginBottom, marginTop]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("y", (d, i) => x(i)) .attr("x", marginLeft) .attr("height", (d, i) => x(i - 1) - x(i)) .attr("width", width - marginRight - marginLeft) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("y", x) .attr("x", marginLeft) .attr("height", Math.max(0, x.bandwidth() - 1)) .attr("width", width - marginLeft - marginRight) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft - width + marginRight) .attr("y", 0) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }31:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

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

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }32:[] 2e:{"id":"1552f11722bec435","slug":"vertical-color-legend","title":"Vertical Color Legend","thumbnail":"6d45f70fead09bb08deb736d2381312f5110b10af0f2e6cfdcdf77b723e4c3d7","access_level":"public","create_time":"$D2021-01-05T19:21:47.955Z","update_time":"$D2021-01-05T20:27:29.823Z","view_time":null,"first_public_time":"$D2021-01-05T20:17:17.781Z","has_unpublished_edits":null,"fork":{"id":"a33468b95d0b15b0","slug":"color-legend","title":"Color legend","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":6,"starred":false,"owner":{"type":"team","id":"607724cd6345b377","login":"slowkow","name":"Kamil Slowikowski","avatar_url":"https://avatars-next.observableusercontent.com/f50ddcbbd405e87cc94180fda4fb5bb09c46af90f4d4c23a2e9565fc245a5df1","tier":"starter_2024"},"version":849,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f43d89d88f74e47","login":"slowkow","name":"Kamil Slowikowski","avatar_url":"https://avatars-next.observableusercontent.com/f50ddcbbd405e87cc94180fda4fb5bb09c46af90f4d4c23a2e9565fc245a5df1","tier":null}],"members":[{"type":"individual","id":"1f43d89d88f74e47","login":"slowkow","name":"Kamil Slowikowski","avatar_url":"https://avatars-next.observableusercontent.com/f50ddcbbd405e87cc94180fda4fb5bb09c46af90f4d4c23a2e9565fc245a5df1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vertical Color Legend","cells":[{"id":0,"value":"md`# Vertical Color Legend\n\nThis is a fork of the [Horizontal Color Legend](https://observablehq.com/@d3/color-legend).\n\nA simple legend for a [color scale](/@d3/color-schemes). Supports [continuous](/@d3/continuous-scales), [sequential](/@d3/sequential-scales), [diverging](/@d3/diverging-scales), [quantize, quantile, threshold](/@d3/quantile-quantize-and-threshold-scales) and [ordinal](/@d3/d3-scaleordinal) scales. To use:\n\n~~~js\nimport {legend} from \"@d3/color-legend\"\n~~~\n\nThen call the legend function as shown below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"legend({\n color: d3.scaleSequential([0, 100], d3.interpolateViridis),\n title: \"Temperature (°F)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"legend({\n color: d3.scaleSequentialSqrt([0, 1], d3.interpolateTurbo),\n title: \"Speed (kts)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"legend({\n color: d3.scaleDiverging([-0.1, 0, 0.1], d3.interpolatePiYG),\n title: \"Daily change\",\n tickFormat: \"+%\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"legend({\n color: d3.scaleDivergingSqrt([-0.1, 0, 0.1], d3.interpolateRdBu),\n title: \"Daily change\",\n tickFormat: \"+%\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"legend({\n color: d3.scaleSequentialLog([1, 100], d3.interpolateBlues),\n title: \"Energy (joules)\",\n ticks: 10,\n tickFormat: \".0s\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"legend({\n color: d3.scaleSequentialQuantile(Array.from({length: 100}, () => Math.random() ** 2), d3.interpolateBlues),\n title: \"Quantile\",\n tickFormat: \".2f\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"legend({\n color: d3.scaleSqrt([-100, 0, 100], [\"blue\", \"white\", \"red\"]),\n title: \"Temperature (°C)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"legend({\n color: d3.scaleQuantize([1, 10], d3.schemePurples[9]),\n title: \"Unemployment rate (%)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"legend({\n color: d3.scaleQuantile(d3.range(1000).map(d3.randomNormal(100, 20)), d3.schemeSpectral[9]),\n title: \"Height (cm)\",\n tickFormat: \".0f\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"legend({\n color: d3.scaleThreshold([2.5, 3.1, 3.5, 3.9, 6, 7, 8, 9.5], d3.schemeRdBu[9]),\n title: \"Unemployment rate (%)\",\n tickSize: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"legend({\n color: d3.scaleOrdinal([\"<10\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70-79\", \"≥80\"], d3.schemeSpectral[10]),\n title: \"Age (years)\",\n tickSize: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`But wait, there’s more!\n\nHow about swatches for ordinal color scales? Both variable-width swatches and [column layout](https://developer.mozilla.org/en-US/docs/Web/CSS/columns) are supported.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"swatches({\n color: d3.scaleOrdinal([\"blueberries\", \"oranges\", \"apples\"], d3.schemeCategory10)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"swatches({\n color: d3.scaleOrdinal([\"Wholesale and Retail Trade\", \"Manufacturing\", \"Leisure and hospitality\", \"Business services\", \"Construction\", \"Education and Health\", \"Government\", \"Finance\", \"Self-employed\", \"Other\"], d3.schemeTableau10),\n columns: \"280px\",\n swatchSize: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(1, n);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(0, n-i, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"