3e:null 3f:["$","title",null,{"children":"Bivariate Choropleth Color Generator | ntouati | Observable"}] 45:T7fe,colors = blendMode => { // Utilisation du mode LCH pour une meilleure séparation des canaux const INTERPOLATION_MODE = 'lab'; // Les échelles créent toujours la variation de luminance entre colorX et lightest const scale1 = chroma.scale([color1, lightest]).mode(colorMode).correctLightness().colors(rows) const scale2 = chroma.scale([color2Saturated, lightest]).mode(colorMode).correctLightness().colors(rows) const data = [] for(let i = 0; i < rows; i++) { // Colonne (axe X) for(let j = 0; j < rows; j++) { // Ligne (axe Y) // 1. Calculer la couleur de base (mélangée) const blendedColor = chroma.blend(scale1[i], scale2[j], blendMode); // 2. EXTRAIRE LA LUMINANCE CIBLE À PARTIR DE L'ÉCHELLE 1 // Nous utilisons l'indice de la colonne (i) pour définir le dégradé horizontal de luminance. const scaleLuminance = chroma(scale1[i]).lab()[0]; // Luminosité de l'échelle i // 3. OBTENIR LA LUMINOSITÉ DE BASE (POUR LES PREMIÈRES CELLULES) // La luminance de la première couleur de l'échelle (la couleur de départ) const baseLuminance = chroma(scale1[0]).lab()[0]; // 4. CALCULER UNE NOUVELLE LUMINANCE CIBLE (targetLuminance) // qui ne varie qu'à la fin de la grille (par exemple, dans les 2 ou 3 dernières colonnes) let finalLuminance; if (i >= 1) { // Le dégradé sera visible ici. finalLuminance = scaleLuminance; } else { // Sinon, on garde la luminance de la couleur de départ, // rendant toutes les autres colonnes uniformément claires/sombres. finalLuminance = baseLuminance; } // 5. APPLIQUER LA NOUVELLE LUMINANCE À LA COULEUR MÉLANGÉE const finalColor = blendedColor.set('lab.l', finalLuminance); data[i * rows + j] = { color: finalColor, x: i * size / rows, y: j * size / rows } } } return data };46:T72e,paletteGen = (blendMode) => { const data = colors(blendMode) const svg = d3 .create('svg') .attr('width', size + margin * 2) .attr('height', size + margin * 2) // Pattern à damier pour visualiser la transparence const defs = svg.append('defs') const pattern = defs.append('pattern') .attr('id', `checkerboard-${blendMode}`) .attr('width', 20) .attr('height', 20) .attr('patternUnits', 'userSpaceOnUse') pattern.append('rect') .attr('width', 10) .attr('height', 10) .attr('fill', '#e0e0e0') pattern.append('rect') .attr('x', 10) .attr('width', 10) .attr('height', 10) .attr('fill', '#e0e0e0') pattern.append('rect') .attr('y', 10) .attr('width', 10) .attr('height', 10) .attr('fill', '#e0e0e0') pattern.append('rect') .attr('x', 10) .attr('y', 10) .attr('width', 10) .attr('height', 10) .attr('fill', '#e0e0e0') svg.append('rect') .attr('x', margin) .attr('y', margin) .attr('width', size) .attr('height', size) .attr('fill', `url(#checkerboard-${blendMode})`) .attr('transform-origin','center center') .attr('transform', 'rotate(45)') 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(45)') 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 => chroma(d.color) .alpha(alphaInitial) .css('rgba') ) return svg.node() } ;47:T6e6,function colorPicker(defaultValue, format) { // Set desired color format. format = format || tinycolor(defaultValue).getFormat(); // Build container element. const container = html`

${styles}

`; 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); // Hex doesn't support alpha (but will in CSS4), so force RGB if alpha is < 1. const actualFormat = tinycolor(color.toString(format)).getFormat(); const forceRGB = actualFormat === "hex" && color.getAlpha() < 1; // Create desired output color string and display it. const finalColorStr = color.toString(forceRGB ? "rgb" : 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: true, 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; }48:[] 43:{"id":"5ea703515b3ca340","slug":null,"title":"Bivariate Choropleth Color Generator","thumbnail":"a39e19dad1e95b37be16e62c2673f6e100ac8f1c23a73d427905415570d172b5","access_level":"public","create_time":"$D2025-12-01T13:11:11.653Z","update_time":"$D2025-12-08T13:54:43.425Z","view_time":null,"first_public_time":"$D2025-12-03T10:20:38.987Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6b3918c6eadffa4b","login":"ntouati","name":"","avatar_url":"https://avatars-next.observableusercontent.com/eb6d2084f274b7ae1f016f81e28c27e40886b0d2f98521d96efb2a94b11504a5","tier":"starter_2024","bio":"","following":false},"version":1101,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0003e988ed730775","login":"ntouati","name":"","avatar_url":"https://avatars-next.observableusercontent.com/eb6d2084f274b7ae1f016f81e28c27e40886b0d2f98521d96efb2a94b11504a5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0003e988ed730775","login":"ntouati","name":"","avatar_url":"https://avatars-next.observableusercontent.com/eb6d2084f274b7ae1f016f81e28c27e40886b0d2f98521d96efb2a94b11504a5","tier":null,"role":"editor"},{"type":"team","id":"6b3918c6eadffa4b","login":"ntouati","name":"","avatar_url":"https://avatars-next.observableusercontent.com/eb6d2084f274b7ae1f016f81e28c27e40886b0d2f98521d96efb2a94b11504a5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Color Generator","cells":[{"id":0,"value":"# Bivariate Choropleth Color Generator\n\n### enhanced by a transparency and saturation effect to encode uncertainty","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"A tool to precisely select the colors for a bivariate map.\n\nA fork of https://observablehq.com/@benjaminadk/bivariate-choropleth-color-generator and fixed in https://observablehq.com/@mthh/bivariate-choropleth-color-generator-fixed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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: 6,\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"md`##### Color 1`","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(\"steelblue\",\"Color 1\")\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"md`##### Color 2`","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(\"coral\", \"Color 2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`##### Saturation color 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"viewof saturationFactor = Inputs.range([0, 2], {\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"md`##### Lightest color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"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":1037,"value":"md`---`","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`\n

\n ${paletteGen('darken', 8)}\n ${paletteGen('multiply', 8)}\n

\n`","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":393,"value":"output1 = colorStrings('darken')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","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
\nThanks to [@ljegou](@observablehq.com/@ljegou) for his help and his keen eye for color.\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":899,"value":"color2Saturated = chroma(color2).saturate(saturationFactor).hex('rgb')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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)\n .map(d => chroma(d.color)\n .alpha(alphaInitial)\n .hex('rgba') // Format hex avec alpha (8 caractères)\n )\n .map(d => `\"${d}\"`)\n .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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"alphaInitial = chroma(color1).alpha()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"$47","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":745,"value":"styles = html`\n<link rel=\"stylesheet\" href=\"https://unpkg.com/pickr-widget@0.2.0/dist/pickr.min.css\"/>\n<style>\n  /* Make sure picker stays above other Observable elements. */\n  .pcr-app.visible {\n    z-index: 10000000;\n  }\n  /* Allow our value label to be appended with good alignment. */\n  .pickr {\n    display: inline-block;\n    vertical-align: middle;\n  }\n</style>\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","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@2.1')","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":"$W48","stdlib":"1"}}
44:"$43:body"
</article></body></html>