2a:null 2b:["$","title",null,{"children":"Interactive Plot legend | Toph Tucker | Observable"}] 31:[] 2e:{"id":"d2d111cdae634562","slug":"interactive-plot-legend","title":"Interactive Plot legend","thumbnail":"1688d05aa75bc8f96990acd5a22d17b4fd00bb6cd26d09c0147406f89cf1696f","access_level":"public","create_time":"$D2022-12-14T18:05:31.134Z","update_time":"$D2024-10-24T21:18:31.263Z","view_time":null,"first_public_time":"$D2022-12-14T18:24:48.951Z","fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":209,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"ecc07c839329185d","slug":"testing","title":"Testing / Helping","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Interactive Plot legend","cells":[{"id":0,"value":"# Interactive Plot legend\n[@ee2dev](https://observablehq.com/@ee2dev) asked about an interactive Plot legend where you can click items to toggle them. Plot doesn’t have anything that automatically works like that, but you can make your own.\n\nTo make a legend, we need a color scale. One way to do that is to have an initial unfiltered non-interactive Plot, with the default color scheme for the given data:","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"plot = Plot.dot(penguins, {x: \"body_mass_g\", y: \"culmen_length_mm\", stroke: \"species\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Then we can extract its color scale, with the three species as the domain, and colors in the range:","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"color = plot.scale(\"color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"Now we can build a checkbox input from the domain and range, which returns an array of the species we want to show. ","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"viewof filtered = Inputs.checkbox(\n new Map(color.domain.map((d, i) => [\n htl.html`

${d}`, d\n ])),\n {value: color.domain, format: d => d[0]}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"And then we can have a second Plot that respects the checkbox filters:","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"Plot.dot(\n penguins.filter(({ species }) => filtered.includes(species)),\n { x: \"body_mass_g\", y: \"culmen_length_mm\", stroke: \"species\" }\n).plot({color})","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"---\nIf you don’t want to have to make two plots, you could make your own arrays for the domain and range and pass them to both the interactive legend and the one final plot.","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"domain = [\"Adelie\", \"Chinstrap\", \"Gentoo\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"range = [\"#4e79a7\", \"#f28e2c\", \"#e15759\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof filtered1 = Inputs.checkbox(\n new Map(domain.map((d, i) => [\n htl.html`

${d}`, d\n ])),\n {value: domain, format: d => d[0]}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"Plot.dot(\n penguins.filter(({ species }) => filtered1.includes(species)),\n { x: \"body_mass_g\", y: \"culmen_length_mm\", stroke: \"species\" }\n).plot({color: {domain, range}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"---\nIf you don’t mind a more custom input, you can use the [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) CSS property ([new!](https://caniuse.com/?search=accent-color)) to make the checkboxes themselves the color swatches. I’ve made a little _filterLegend_ function to which you can pass a domain and range:","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"viewof filtered2 = filterLegend(domain, range)","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"Plot.dot(\n penguins.filter(({ species }) => filtered2.includes(species)),\n { x: \"body_mass_g\", y: \"culmen_length_mm\", stroke: \"species\" }\n).plot({color: {domain, range}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"filterLegend = (domain, range) => {\n const value = new Map(domain.map(d => [d, true]));\n const _set = () => set(node, [...value].filter(d => d[1]).map(d => d[0]));\n const oninput = e => (value.set(e.target.id, e.target.checked), _set());\n const node = htl.html`

\n ${domain.map((d, i) => htl.html`

\n \n ${d}\n

`)}\n

`;\n _set();\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"styles = ({width: \"1em\", height: \"1em\", display: \"inline-block\", verticalAlign: \"middle\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"