31:T5e5,function colorPicker(defaultValue, title) { // Set desired color format. const format = 'hex' // Build container element. const container = html`

${title}

`; const picker = container.querySelector("#picker"); const label = container.querySelector("#label"); // Set color value. const setValue = colorStr => { // Create color object from string. const color = tinycolor(colorStr); // Create desired output color string and display it. const finalColorStr = color.toString(format); label.innerHTML = finalColorStr; // Notify Observable about change in value. container.value = finalColorStr; container.dispatchEvent(new window.Event("input")); }; setValue(defaultValue); // Setup Pickr. const setupPickr = () => { new Pickr({ el: picker, default: tinycolor(defaultValue).toString("rgb"), onChange: c => setValue(c.toRGBA().toString()), comparison: false, components: { preview: false, opacity: false, hue: true } }); }; // For some reason, Pickr doesn't want to set the default color unless the element is mounted, // so we wait for it to mount here. const interval = setInterval(() => { if (document.body.contains(container)) { clearInterval(interval); setupPickr(); } }, 100); return container; }32:[] 2f:{"title":"Embed Version Color Generator","cells":[{"id":0,"value":"md`# Embed Version Color Generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`Check out the original at [@benjaminadk/bivariate-choropleth-color-generator](https://observablehq.com/@benjaminadk/bivariate-choropleth-color-generator)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`### Options`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"rowInput = {\n const label = html`${rows}`\n const range = html``\n range.value = rows\n range.onchange = e => {\n mutable rows = parseInt(e.target.value, 10)\n }\n return html`${range}${label}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"mutable rows = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"colorInput1 = {\n const label = html`${color1}`\n const color = html``\n color.value = color1\n color.onchange = e => {\n mutable color1 = e.target.value\n }\n return html`${color}${label}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"mutable color1 = '#be64ac'","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"colorInput2 = {\n const label = html`${color2}`\n const color = html``\n color.value = color2\n color.onchange = e => {\n mutable color2 = e.target.value\n }\n return html`${color}${label}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"mutable color2 = '#5ac8c8'","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"colorInput3 = {\n const label = html`${lightest}`\n const color = html``\n color.value = lightest\n color.onchange = e => {\n mutable lightest = e.target.value\n }\n return html`${color}${label}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"mutable lightest = '#e8e8e8'","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"modeOptions = {\n const options = [\n {label: 'RGB', value: 'rgb'},\n {label: 'Lab', value: 'lab'},\n {label: 'Lch', value: 'lch'},\n {label: 'Linear RGB', value: 'lrgb'}\n ]\n const select = html``\n select.value = colorMode\n select.onchange = e => {\n mutable colorMode = e.target.value\n }\nreturn select\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"mutable colorMode = 'rgb'","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`### Color Palettes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"palettes = html`${paletteGen('darken')}${paletteGen('multiply')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"md`### Color Values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"output1 = colorStrings('darken')","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"output2 = colorStrings('multiply')","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"css`\nbody {\n font-family: Arial, sans-serif;\n}\n\nsummary {\n font-family: Arial, sans-serif;\n outline: 0;\n}\n\nselect {\n padding: 2px;\n outline: 0;\n}\n\ntextarea {\n padding: 10px;\n margin-right: 20px;\n font-size: 16px;\n outline: 0;\n}\n\nbutton {\n padding: 2px 4px;\n font-size: 14px;\n margin-left: 20px;\n}\n\n.output {\n display: flex;\n}\n\n.color-strings {\n display: flex;\n align-items: center;\n}\n\n.title {\n font-weight: bold;\n font-size: 15px;\n}\n\n.pcr-app.visible {\n z-index: 10000000;\n}\n\n.pickr {\n display: inline-block;\n vertical-align: middle;\n}\n\n.blend-mode {\n font-weight: bold;\n fill: #808080;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`### Suggestions\n\n- Make a color palette\n- Copy the array of color strings\n- Add it to **schemes** is [@d3/bivariate-choropleth](https://observablehq.com/@d3/bivariate-choropleth)\n- Select your scheme and check it out in action \n- 3 x 3 schemes work easily with the above setup\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"md`### Acknowledgements\n\nInspired by *Bo Zhao's* [A Bivariate Choropleth Palette Generator](https://geoviz.ceoas.oregonstate.edu/storymap/assets/color.html)\n
\n*Color Picker* forked and simplified from [@shaunlebron/color-picker](https://observablehq.com/@shaunlebron/color-picker)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"size = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"colorStrings = (blendMode) => {\n const title = md`### Blend Mode: *${blendMode}*`\n const strings = colors(blendMode).map(d => chroma(d.color).hex()).map(d => `\"${d}\"`).reverse()\n const text = `[${strings.join(', ')}]`\n const textarea = html`

${text}`\n  const button = html`<button>Copy`\n  button.onclick = () => copy(text)\n  return html`<div class='color-strings'>${title}${button}</div><div>${textarea}</div>`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"colors = blendMode => {\n  const scale1 = chroma.scale([color1, lightest]).mode(colorMode).correctLightness().colors(rows)\n  const scale2 = chroma.scale([color2, lightest]).mode(colorMode).correctLightness().colors(rows)\n  \n  const data = []\n  \n  for(let i = 0; i < rows; i++) {\n    for(let j = 0; j < rows; j++) {\n      data[i * rows + j] =  {\n        color: chroma.blend(scale1[i], scale2[j], blendMode),\n        x: i * size / rows,\n        y: j * size / rows\n      }\n    }\n  }\n  \n  return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"paletteGen = (blendMode) => {\n  const data = colors(blendMode)\n  \n  const svg = d3\n    .create('svg')\n    .attr('width', size + margin * 2)\n    .attr('height', size + margin * 2)\n  \n  svg\n    .append('text')\n    .attr('class', 'blend-mode')\n    .attr('x', (size + margin))\n    .attr('y', size + margin * 1.5)\n    .attr('text-anchor', 'middle')\n    .text(`${blendMode}`)\n    \n  const square = svg\n    .append('g')\n    .attr('transform-origin','center center')\n    .attr('transform', 'rotate(45)')\n     \n  square\n     .selectAll('rect')\n     .data(data)\n     .join('rect')\n     .attr('width', size / rows)\n     .attr('height', size / rows)\n     .attr('x', d => d.x + margin)\n     .attr('y', d => d.y + margin)\n     .attr('fill', d => d.color)\n  \n  return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"html`<link rel=\"stylesheet\" href=\"https://unpkg.com/pickr-widget@0.2.0/dist/pickr.min.css\"/>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"Pickr = require(\"pickr-widget@0.2.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import {select, slider} from \"@benjaminadk/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"import {copy} from \"@mbostock/copy-to-clipboard\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"import {css} from '@benjaminadk/the-nba-clutch-gene'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>