25:["$","title",null,{"children":"Bivariate Choropleth Color Generator | Natsume Kirito | Observable"}] 49:T93c,paletteGen = (blendMode) => { const data = colors(blendMode); const c = [ "#D3D3D3", "#D3D1D1", "#D4CACA", "#D7BCBC", "#DCA6A6", "#E28989", "#E96868", "#F04444", "#F82121", "#FF0000", "#D1D3D1", "#D1D1CF", "#D3CBC9", "#D7BEBC", "#DDA9A7", "#E48E8C", "#ED6E6C", "#F74D4B", "#FF2D2B", "#FF0F0C", "#CAD4CA", "#CBD3C9", "#CECEC3", "#D2C2B7", "#DAAFA4", "#E3958B", "#EF786E", "#FC5A4F", "#FF3D32", "#FF2217", "#BCD7BC", "#BED7BC", "#C2D2B7", "#C8C8AD", "#D2B79C", "#DEA085", "#EC866B", "#FC6B50", "#FF5136", "#FF3A1E", "#A6DCA6", "#A9DDA7", "#AFDAA4", "#B7D29C", "#C3C38D", "#D2AF7A", "#E49862", "#F7804A", "#FF6A34", "#FF5520", "#89E289", "#8EE48C", "#95E38B", "#A0DE85", "#AFD27A", "#C1C169", "#D6AD55", "#EC9940", "#FF862D", "#FF741C", "#68E968", "#6EED6C", "#78EF6E", "#86EC6B", "#98E462", "#ADD655", "#C5C544", "#DFB433", "#F9A423", "#FF9615", "#44F044", "#4DF74B", "#5AFC4F", "#6BFC50", "#80F74A", "#99EC40", "#B4DF33", "#D1D124", "#EEC417", "#FFB80C", "#21F821", "#2DFF2B", "#3DFF32", "#51FF36", "#6AFF34", "#86FF2D", "#A4F923", "#C4EE17", "#E4E40D", "#FFDC05", "#00FF00", "#0FFF0C", "#22FF17", "#3AFF1E", "#55FF20", "#74FF1C", "#96FF15", "#B8FF0C", "#DCFF05", "#FFFF00" ]; for (let index = 0; index < data.length; ++index) { data[index].color = c[index]; } const svg = d3 .create("svg") .attr("width", size + margin * 2) .attr("height", size + margin * 2); svg .append("text") .attr("class", "blend-mode") .attr("x", size + margin) .attr("y", size + margin * 1.5) .attr("text-anchor", "middle") .text(`${blendMode}`); const square = svg .append("g") .attr("transform-origin", "center center") .attr("transform", "rotate(-90)"); square .selectAll("rect") .data(data) .join("rect") .attr("width", size / rows) .attr("height", size / rows) .attr("x", (d) => d.x + margin) .attr("y", (d) => d.y + margin) .attr("fill", (d) => d.color); return svg.node(); }4a: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; }4b:[] 29:{"id":"9f00018cdc6998dc","slug":null,"title":"Bivariate Choropleth Color Generator","thumbnail":"b255ef5209bd4ef478fe3d0411df773d4ae17812ab25210e8e6f3d353d2ff8eb","access_level":"public","create_time":"$D2023-03-03T08:17:20.093Z","update_time":"$D2023-03-03T08:37:39.692Z","view_time":null,"first_public_time":"$D2023-03-03T08:17:20.093Z","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":0,"starred":false,"owner":{"type":"team","id":"8c608da92cc41eba","login":"nats","name":"Natsume Kirito","avatar_url":"https://avatars-next.observableusercontent.com/f3ee05d55157126440b945059c9185548046563da5bc25e6a37ab7517ddf0b8b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":638,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c9b8f2ed649c6dd","login":"nats","name":"Natsume Kirito","avatar_url":"https://avatars-next.observableusercontent.com/f3ee05d55157126440b945059c9185548046563da5bc25e6a37ab7517ddf0b8b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7c9b8f2ed649c6dd","login":"nats","name":"Natsume Kirito","avatar_url":"https://avatars-next.observableusercontent.com/f3ee05d55157126440b945059c9185548046563da5bc25e6a37ab7517ddf0b8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`### Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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: 10,\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"viewof color1 = colorPicker('#be64ac', 'Color 1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof color2 = colorPicker('#5ac8c8', 'Color 2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"palettes = html`${paletteGen(\"darken\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"size = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null