27:null 28:["$","title",null,{"children":"Color Legend Element | Chris Henrick | Observable"}] 2d:[] 2b:{"id":"f15aa1c254f9684a","slug":null,"title":"Color Legend Element","thumbnail":"59599c81ab168ec8929e36ad8dde572d260bb1df741d09b968efca3128708270","access_level":"public","create_time":"$D2024-02-24T02:00:05.727Z","update_time":"$D2024-02-24T02:03:04.516Z","view_time":null,"first_public_time":"$D2024-02-24T02:00:05.727Z","has_unpublished_edits":null,"fork":{"id":"2a629aa4d3c00768","slug":"color-legend-element","title":"Color Legend Element","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":1045,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Color Legend Element","cells":[{"id":0,"value":"# Color Legend Element\n\nA [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) suitable for use as a legend in data\nvisualizations. Built using [lit/lit-element](https://lit.dev) and [D3JS](https://d3js.org/). Inspired by [@mbostock](https://observablehq.com/@mbostock)'s [Color Legend](https://observablehq.com/@d3/color-legend) here on Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"Read more below to learn about how to configure the ${cle()} in Observable, or checkout the [Github repository](https://github.com/clhenrick/color-legend-element) and [color-legend website](https://clhenrick.github.io/color-legend-element/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"install = md`## Install`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"To use the ${cle()} within Observable, simply `require` the `color-legend-element` from npm in a cell:\n\n```js\nrequire(\"color-legend-element\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"

\n**Note:** The ${cle()} assumes D3JS is available as a dependency. At the very least this should include the following modules from the D3JS library:\n\nd3-scale, \nd3-array, \nd3-format, \nd3-interpolate, and \nd3-scale-chromatic (if using a d3 color scheme interpolator).\n\nThis isn't a problem on Observable because D3JS is available by default, but keep it in mind if using the ${cle()} outside of Observable.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"example_usage = md`## Example Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"### Continuous Legend\n\nWithout providing any attributes the ${cle()} renders a continuous legend by default: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"

\n**Note:** in Observable self closing tags for custom elements are enabled via Observable's [Hypertext Literal](https://observablehq.com/@observablehq/htl) library. However, when declared in vanilla HTML, custom elements must have both an opening and closing tag: \n\n```\n\n```\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"The following default configuration options determine how the ${cle()} renders above: \n\n|property | default value |\n|---|---| \n|`titleText` | \"Color Legend Element\"|\n|`scaleType`| \"continuous\"|\n|`domain` | `[0, 1]` |\n|`range` | `[ \"#ffffcc\", \"#a1dab4\", \"#41b6c4\", \"#2c7fb8\", \"#253494\"]`|\n| `tickFormat` | \".1f\" |\n\nA full list of the ${cle()}'s HTML attributes and respective JavaScript properties may be found [in the documentation](https://github.com/clhenrick/color-legend-element#properties). More of them will be covered below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"The color gradient for a continuous `${cle()}` may be altered one of two ways:\n\n1. By passing an array of color strings as the `range` attribute / property.\n2. By setting the `interpolator` property to a color interpolator function using JavaScript.\n\nBelow the range is updated using an array of color values from [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"viewof scheme = Inputs.select(schemes, { label: md`**Color Scheme**` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"

\n **Note:** The ${cle()} `domain` and `range` attributes must be specified as strings when set as HTML attributes, hence the use of `JSON.stringify()` above. Internally they are converted to arrays after being set, thanks to [Lit's handling of attribute values](https://lit.dev/docs/components/properties/#attributes). The `domain` and `range` properties may also be set as regular arrays using JavaScript.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"#### Using a Color Interpolator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"By default, the [`d3.interpolateHcl`](https://github.com/d3/d3-interpolate#interpolateHcl) color `interpolator` is used in conjunction with the color values of the `range` property to render the color gradient for continuous legends. This behavior may be overridden by setting the `interpolator` property directly (to one of [`d3-scale-chromatic`](https://github.com/d3/d3-scale-chromatic)'s for example) using JavaScript:\n\n```js\nlet cle = document.querySelector(\"color-legend\");\ncle.interpolator = d3.interpolateViridis;\n```\n\nNote that the `interpolator` property is the only configuration option that may not be set as an HTML attribute on the ${cle()}. All other configuration options may be set via either HTML attributes or JavaScript properties.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"viewof interpolator = Inputs.select(interpolatorOptions, {\n label: md`**color interpolator**`,\n value: \"interpolateViridis\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"cleInterpolator = {\n let cle = htl.html``;\n cle.interpolator = d3[interpolator];\n return cle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"

\n**Note**: Any ${cle()} JavaScript property that is written in \"camelCase\" will be converted to an HTML attribute in lowercase. For example, the `scaleType` property is accessible as `scaletype` as an HTML attribute as evident below:\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"cleInterpolator.outerHTML","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"interpolatorOptions = `\n interpolateBrBG,\n interpolatePRGn,\n interpolatePiYG,\n interpolatePuOr,\n interpolateRdBu,\n interpolateRdGy,\n interpolateRdYlBu,\n interpolateRdYlGn,\n interpolateSpectral,\n interpolateBuGn,\n interpolateBuPu,\n interpolateGnBu,\n interpolateOrRd,\n interpolatePuBuGn,\n interpolatePuBu,\n interpolatePuRd,\n interpolateRdPu,\n interpolateYlGnBu,\n interpolateYlGn,\n interpolateYlOrBr,\n interpolateYlOrRd,\n interpolateBlues,\n interpolateGreens,\n interpolateGreys,\n interpolatePurples,\n interpolateReds,\n interpolateOranges,\n interpolateCividis,\n interpolateCubehelixDefault,\n interpolateWarm,\n interpolateCool,\n interpolateSinebow,\n interpolateTurbo,\n interpolateViridis,\n interpolateMagma,\n interpolateInferno,\n interpolatePlasma\n`\n .split(\",\")\n .map((x) => x.trim())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"#### Customizing the Axis Ticks\nYou may customize how the axis ticks are rendered by using the following attributes/properties: `ticks`, `tickSize`, `tickFormat`, and `tickValues`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"{\n let cle = cleInterpolator.cloneNode(true);\n cle.tickSize = 10;\n cle.tickValues = [0, 25, 50, 75, 100];\n cle.tickFormat = \".0f\";\n return cle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"There's also a `tickFormatter` property which can be set directly using JavaScript, in case the options in `d3-format` don't meet your needs. The `tickFormatter` is typically set internally after setting `tickFormat`, so prefer to use `tickFormat` instead when possible and consider this a fallback.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":968,"value":"cleTickFormatter = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"{\n cleTickFormatter.tickFormatter = (d) => `${d}˚`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"### Discrete Legends\n\nTo render a discrete legend set the `scaleType` property to \"discrete\" and set the number of color values in the `range` property to the number of desired buckets. The `domain` will be divided according to the number of values in the `range`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"viewof rangeLength = Inputs.number([2, 9], {\n step: 1,\n label: md`**Number of range values**`,\n placeholder: \"\",\n value: 9\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"rangeValues = [\n \"#fcfbfd\",\n \"#efedf5\",\n \"#dadaeb\",\n \"#bcbddc\",\n \"#9e9ac8\",\n \"#807dba\",\n \"#6a51a3\",\n \"#54278f\",\n \"#3f007d\"\n].slice(0, rangeLength)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"### Threshold Legends\n\nThreshold legends may be rendered by setting the `scaleType` property to \"threshold\", specifying the desired tick values as the `domain`, and the desired color values in the `range`. To render correctly, the length of the `range` should be one less than the length of the `domain`.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"viewof domainValues = Inputs.text({\n value: \"0, 11, 22, 33, 50, 100\",\n label: md`**domain values**`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":" +d.trim())}]\"\n range='[\"#fee5d9\", \"#fcae91\", \"#fb6a4a\", \"#de2d26\", \"#a50f15\"]'\n/>","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"### Categorical Legends\n\nCategorical legends may be rendered by setting the `scaleType` to \"categorical\". This assumes an equal number of values in both the `domain` and `range`. The type of mark used to symbolize each category may be set to one of \"circle\", \"rect\", or \"line\". The default mark is \"circle\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"viewof markType = Inputs.radio([\"circle\", \"rect\", \"line\"], {\n label: md`**markType**`,\n value: \"circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":998,"value":"JSON.stringify(categories)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"categories = [\n \"Agriculture\",\n \"Business services\",\n \"Construction\",\n \"Education and Health\",\n \"Finance\",\n \"Government\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"categoricalRange = [\n \"#4e79a7\",\n \"#f28e2c\",\n \"#e15759\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#edc949\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"Currently the ${cle()} is limited to these four scale types: continuous, discrete, threshold, and categorical. In the future more will be added, for example log and power.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"### Styling with CSS\n\nThe ${cle()} styles are encapsulated using the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). Thus its styles will not bleed out to pollute the styles of neighboring DOM elements, nor will external / global CSS rules affect it. To prove it, try uncommenting the CSS rule below to see how the child elements of all ${cle()} instances in this notebook are not affected:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"So what if we need to customize the ${cle()}'s internal CSS? All is not lost! The default styles of the ${cle()} may be customized by overriding one or more of its [CSS variables (custom properties)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). All CSS variables are prefixed with `cle`, for example `--cle-font-family` will set the `font-family` property for the title and axis ticks.\n\nHere is an example of overriding the ${cle()}'s default styles by overriding its CSS variables. Note that this must be done from within the `color-legend` CSS selector:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":755,"value":"Or for example, to change the number of columns and swatch size in a categorical legend:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":637,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"You may choose to hide the ${cle()} until it loads using the [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) pseudo class:\n\n```css\ncolor-legend-element:not(:defined) {\n display: none;\n}\n\ncolor-legend-element:defined {\n display: inline-block;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"

\n**Tip:** If you would like to learn more about styling Custom Elements that use the Shadow DOM, [Nolan Lawson](https://github.com/nolanlawson) has a [pretty good write up](https://nolanlawson.com/2021/01/03/options-for-styling-web-components/) about it.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":851,"value":"## Rendering Child Content with Slots\n\nThe ${cle()} has two [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Slot)s which allow for rendering child content above and below where the legend's marks are drawn. The slots are named \"subtitle\" and \"footer\" accordingly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"\n

A subtitle paragraph

Some footer here

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"Beware that slotted elements are considered part of the \"Light DOM\" and may be influenced by external CSS:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":888,"value":"\n

A subtitle paragraph

Some footer here

\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"## The End\n\nAnd that's a wrap! Please let me know what you think of the ${cle()} element and how you use it in your projects. You may submit issues and pull requests in the [Github Repository](https://github.com/clhenrick/color-legend-element/) as well. Thanks for reading!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":798,"value":"## Boring Zone","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"version = \"1.1.0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// Require a module from a local webserver, credit: https://observablehq.com/@john-guerra/require-npm-module-from-local-file\nlocalUrl = `http://127.0.0.1:8080/assets/color-legend-element.umd.js?${Date.now()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"prodUrl = `https://unpkg.com/color-legend-element@${version}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"require(prodUrl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"cle = () => \"``\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"schemes = Object.keys(d3)\n .filter((key) => key.includes(\"scheme\"))\n .filter((key) => {\n for (let np of notPermitted) {\n if (key.toLowerCase().includes(np)) {\n return false;\n }\n }\n return true;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"notPermitted = new Set([\n \"dark\",\n \"category\",\n \"accent\",\n \"pastel\",\n \"set\",\n \"tableau\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"