2c:null 2d:["$","title",null,{"children":"Bivariate Choropleth Color Generator | Angie Hjort | Observable"}] 32: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; }33:[] 30:{"id":"026ea1a7b4897e32","slug":"bivariate-color-generator","title":"Bivariate Choropleth Color Generator","thumbnail":"8bcd6d225ac83aac9b1d4c8baa49f22d606c3d3467ddad52d232c21b208f70b9","access_level":"public","create_time":"$D2024-09-18T07:17:35.670Z","update_time":"$D2024-09-19T18:38:09.705Z","view_time":null,"first_public_time":"$D2024-09-18T08:03:25.332Z","has_unpublished_edits":null,"fork":{"id":"c74236186de0d07e","slug":"bivariate-choropleth-color-generator","title":"Bivariate Choropleth Color Generator","owner":{"id":"15d67834e9550a94","login":"benjaminadk","name":"BVG Software"}},"stars":2,"starred":false,"owner":{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024","bio":"Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time."},"version":608,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"bio":"Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time."}],"members":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"role":"editor"},{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Color Generator","cells":[{"id":0,"value":"md`# Bivariate Choropleth Color Generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`### Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof rows = slider({\n title: 'Number of Rows',\n min: 2,\n max: 6,\n step: 1,\n value: 6\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"viewof color1 = colorPicker('#c900a1', 'Color 1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof color2 = colorPicker('#00d9d9', 'Color 2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof lightest = colorPicker('#e8e8e8', 'Lightest Color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof colorMode = select({\n title: 'Color Mode',\n options: [\n {label: 'RGB', value: 'rgb'},\n {label: 'Lab', value: 'lab'},\n {label: 'Lch', value: 'lch'},\n {label: 'Linear RGB', value: 'lrgb'}\n ],\n value: 'rgb'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`### Color Palettes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"palettes = html`${paletteGen('darken')}${paletteGen('multiply')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"md`### Color Values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"output1 = colorStrings('darken')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"output2 = colorStrings('multiply')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"collapsedCSS`\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"size = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {chroma} from \"@gka/chroma-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"Pickr = require(\"pickr-widget@0.2.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"import {copy} from \"@mbostock/copy-to-clipboard\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"import {collapsedCSS} from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}}
31:"$30:body"
</article></body></html>