28:null 29:["$","title",null,{"children":"Bivariate Choropleth Color Generator | Jonatan Hildén | Observable"}] 2e:T400,colors = blendMode => { const scale1 = chroma.scale([lightest, color1]).mode(colorMode).correctLightness().colors(rows) const scale2 = chroma.scale([lightest, color2]).mode(colorMode).correctLightness().colors(rows) const data = [] const f = d3.scaleLinear([0,1]).domain([-rows+1, rows-1]) const easeOutExpo = (x) => { const f = d3.scaleLinear([0,1]).domain([0, rows*rows]) return 1-Math.pow(exp, multiplier * f(x)); } const clampf = (i, j) => { // return clamp(0.5-0.5*(i-j), 0, 1) // return clamp(0.5*(i/j), 0, 1) return f(j-i) } for(let i = 0; i < rows; i++) { for(let j = 0; j < rows; j++) { let color if(blendMode==='mix') {color=chroma.mix(scale1[i], scale2[j], clampf(i,j), 'lab').darken(easeOutExpo(i*j), 'lab')} else { color = chroma.blend(scale1[i], scale2[j], blendMode)} data[i * rows + j] = { color: color, x: i * size / rows, y: j * size / rows } } } return data }2f: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; }30:[] 2c:{"id":"000698c4628aa1db","slug":null,"title":"Bivariate Choropleth Color Generator","thumbnail":"d7797e408873841454548d9aa212bc89fddfc6ecf393ae1a047b078595fbcb42","access_level":"public","create_time":"$D2022-09-15T15:40:19.915Z","update_time":"$D2022-10-04T19:19:33.817Z","view_time":null,"first_public_time":"$D2022-11-24T09:08:19.488Z","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":"f68715fc404b4f1d","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":"starter_2024"},"version":977,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19f39c9c4d9fb475","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":null}],"members":[{"type":"individual","id":"19f39c9c4d9fb475","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Color Generator","cells":[{"id":0,"value":"md`# Bivariate Choropleth Color Generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"md`### Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"viewof rows = slider({\n title: 'Number of Rows',\n min: 2,\n max: 6,\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"viewof color1 = colorPicker('#be64ac', 'Color 1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":" viewof color2 = colorPicker(color2b, 'Color 2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"viewof angle = slider({\n title: \"Hue adjust angle, color 2\",\nvalue: 180,\n min:0,\nmax:360\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"viewof dAdjust = slider({\n title: \"Adjust darken intensity for mix mode\",\nvalue: 0.33,\n min:0.0,\nmax:2.0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"color2b = {\n const hclColor = chroma(color1).hcl()\n hclColor[0]+=angle\n return chroma.hcl(hclColor).hex()\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"viewof lightest = colorPicker('#e8e8e8', 'Lightest Color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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: 'lch'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"colorsMultiplyAdjusted = adjustColorList(colors('multiply').map(d=>d.color))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"md`### Color Palettes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"palettes = html`${paletteGen('multiply')}${paletteGen('mix')}${paletteGen('darken')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"md`### Color Values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"output1 = colorStrings('darken')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"output2 = colorStrings('multiply')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":375,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"size = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":173,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"testing exponents for darkness adjustment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":730,"value":"{const svg = d3\n    .create('svg')\n    .attr('width', size + margin * 2)\n    .attr('height', size + margin * 2)\n  \nconst f = d3.scaleLinear([0,1]).domain([-rows+1, rows-1])\n\nconst easeOutExpo = (x) => {\nreturn 1-Math.pow(2, -10 * x);\n}\n \nfor(let i = 0; i < rows; i++) {\n    for(let j = 0; j < rows; j++) {\n      //const s = `${i-j} ${f((i-j))}`\n      //const s = `${(i*j)**dAdjust}`\n      const s = easeOutExpo(i*j)\n      svg.append('rect').attr('width', size / rows)\n     .attr('height', size / rows)\n     .attr('x', size/rows*i+margin)\n     .attr('y', size/rows*j+margin)\n      .attr('fill', 'teal')\n      .attr('stroke', 'black')\n      svg.append('text').attr('x',  size/rows*i+margin).attr('y', size/rows*j+margin+size/rows/2).text(s)\n    }}\n\nreturn svg.node()}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"viewof multiplier = slider({\n  title: \"multiplier\",\nvalue: -10.0,\n  min:-20.0,\nmax:10.0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"viewof exp = slider({\n  title: \"exponent\",\nvalue: 2.0,\n  min:1.0,\nmax:10.0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":822,"value":"easeOutExpo = (x) => {\n const f =  d3.scaleLinear([0,1]).domain([0, rows*rows])\nreturn 1-Math.pow(exp, multiplier * f(x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":933,"value":"easeInExpo = (x) => {\n const f =  d3.scaleLinear([0,1]).domain([0, rows*rows])\nreturn Math.pow(1.5, 10 * f(x) -10)-0.02;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"easeOutExpo(3*3)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":935,"value":"dataEaseIn = d3.range(0,10).map( d => {return {'x': d, 'y': easeInExpo(d)} })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"dataMix = d3.range(0,10).map( d => {return {'x': d, 'y': easeInExpo(d)*10.5+easeOutExpo(d)} })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":882,"value":"data = d3.range(0,10).map( d => {return {'x': d, 'y': easeOutExpo(d)} })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":859,"value":"Plot.plot({\n  marks: [\n    Plot.line(data,{x:'x' , y:'y'}),\n     Plot.line(dataEaseIn,{x:'x' , y:'y', stroke:'red'}),\n         Plot.line(dataMix,{x:'x' , y:'y', stroke:'blue'}),\n\n  ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":" clamp = (x, min, max) =>{\n    return Math.min(Math.max(x, min), max)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"paletteGen = (blendMode) => {\n  const data = colors(blendMode)\n\n  const strokes = adjustColorList(data.map(d=>d.color))\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      .attr('stroke', (d, i)=> strokes[i].c_out)\n    .attr('stroke-width', '2px')\n  \n  return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"//adjust color \nfunction adjustColor(color, contrastValue=3 , grayscale=false) {\n  let c_in\n  if (grayscale) {c_in = chroma.hex(color).desaturate(9)} \n  else {c_in = chroma.hex(color)} \n  let c_out = c_in\n\n  const maxIterations = 9\n  let n = 0\n  \n\n  const clr = {'c_out':'', 'contrast':0, 'satisfies':false}\n  while (chroma.contrast(c_out.hex(), c_in.hex())<contrastValue & (n<maxIterations)) {\n    if(chroma.contrast(c_in.hex(), '#fff') <3) { c_out = c_out.darken(.25)} else {c_out = c_out.brighten(.25)}\n       \n    n+=1\n  } \n  clr['c_out']= c_out.hex()\n  clr['contrast'] = chroma.contrast(c_out.hex(), c_in.hex())\n  clr['satisfies'] = (chroma.contrast(c_out.hex(), c_in.hex())<contrastValue) ? false: true\n return clr }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"function adjustColorList(colorList, f=adjustColor, contrastvalue=3, tweakCH={c:0.1, h:-1}, ){\n  let adjustedColors = colorList.map( (color)=> {\n    return f(color, contrastvalue, false)\n  })\n  return adjustedColors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"Pickr = require(\"pickr-widget@0.2.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"import {copy} from \"@mbostock/copy-to-clipboard\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"import {collapsedCSS} from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}}
2d:"$2c:body"
</article></body></html>