31:T694,{ let node = d3.create("svg").attr("width", width).attr("height", 100); let cellWidth = width / discreteDivClasses; let cellHeight = 70; let topPadding = 25; // swatches for (let i = 0; i < discreteDivClasses; i++) { let color = discreteDivClasses == 1 ? colRampUnbalancedDiv(0.5) : colRU(i / (discreteDivClasses - 1)); //add swatch node .append("rect") .attr("width", cellWidth + "px") .attr("height", cellHeight + "px") .attr("x", cellWidth * i) .attr("y", topPadding) .attr("fill", color); // add HEX codes labels let hex = d3.color(color).formatHex().toUpperCase(); let fontColor = pickTextColorBasedOnBgColor(hex); node .append("text") .text(hex) .attr("fill", fontColor) .attr("x", cellWidth * i + cellWidth / 2) .attr("y", cellHeight / 2 + topPadding) .attr("text-anchor", "middle"); } // add annotation of point of divergence let divergenceX = divVal * width * (discreteDivClasses == 1 ? 0.5 : 1); node .append("line") // attach a line .style("stroke", "black") // colour the line .style("stroke-width", "4px") // colour the line .attr("x1", divergenceX) // x position of the first end of the line .attr("y1", topPadding - 5) // y position of the first end of the line .attr("x2", divergenceX) // x position of the second end of the line .attr("y2", cellHeight + topPadding); // y position of the second end of the line // add text node .append("text") .text("Point of divergence") .attr("x", divergenceX) .attr("y", 14) .attr("text-anchor", "middle"); return node.node(); }32:Tb57,rawPalettes = ({ darkOrchid: ["#E9E0F6", "#CAADF9", "#A77DF9", "#5730A0"], A1: [ "#E9ECF6", "#D4DAF0", "#C1C9EB", "#A8B4E6", "#93A2DC", "#7C90D6", "#677CD2", "#5169BE", "#3C57B0", "#2644A7", "#15246B" //"#081132" ], A2: [ "#F7F4E9", "#EFE9D3", "#E7DEBC", "#DFD3A6", "#D8C890", "#D0BD7A", "#C6AF5D", "#C0A74D", "#B89C37", "#B09121", "#856B0D" //"#352A03" ], B1: [ "#F8EEF8", "#F0DDF2", "#E9CCEB", "#E2BBE5", "#DEB3E2", "#D39AD7", "#CE8ED4", "#C578CA", "#BD67C4", "#B656BD", "#723078" //"#371A39" ], B2: [ "#F7E8EF", "#EFD0DE", "#E7B9CE", "#DF96B8", "#D78AAE", "#D472A0", "#C75B8D", "#BF447D", "#B72C6C", "#AF155C", "#7F0A45" //"#35031A" ], C1: [ "#EBF6EB", "#D6ECD6", "#C2E3C2", "#ADDBAD", "#99D099", "#85C685", "#70BD70", "#60B560", "#47AA47", "#33A033", "#177217" //"#053005" ], C2: [ "#F7EFE8", "#EEDFD1", "#E6CFBA", "#DDBFA3", "#D9B08D", "#CC9D74", "#C18E62", "#BB7D46", "#B36F2F", "#AA5F18", "#733E0C" //"#331A03" ], Multihue1: ["#FFEB99", "#C7E9B4", "#6BCDBB", "#41B6C4", "#104F99", "#17256B"], // ["#FFEB99", "#C7E9B4", "#6BCDBB", "#41B6C4", "#104F99", "#173880"] Multihue2: [ "#FFF8A6", "#F1F57D", "#E4EA65", "#B7DE6A", "#9DD18B", "#69CC80", "#4BBFA0", "#3DA4A8", "#3A91A5", "#396FA8", "#2644A7", "#0D1878" ], BA: [ "#723078", "#B656BD", "#C578CA", "#D39AD7", "#E2BBE5", "#F0DDF2", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#15246B" ], BC: [ "#723078", "#B656BD", "#C578CA", "#D39AD7", "#E2BBE5", "#F0DDF2", "#F5F5F5", "#D6ECD6", "#ADDBAD", "#85C685", "#60B560", "#33A033", "#177217" ], CA: [ "#733E0C", "#AA5F18", "#BB7D46", "#CC9D74", "#DDBFA3", "#EEDFD1", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#15246B" ], AC: [ "#856B0D", "#B09121", "#C0A74D", "#D0BD7A", "#DFD3A6", "#EFE9D3", "#F5F5F5", "#D6ECD6", "#ADDBAD", "#85C685", "#60B560", "#33A033", "#177217" ], ESTAT: [ "#856B0D", "#B09121", "#C0A74D", "#D0BD7A", "#DFD3A6", "#EFE9D3", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#15246B" ], Diverging1: [ "#997A00", "#E2C822", "#FEEA98", "#BEEBBE", "#7FCCBB", "#208486" ], Climate: [ "#75174C", "#D42027", "#BF6128", "#EDB37A", "#E6D6A1", "#B1E0E6", "#4DBEBF", "#4A86C6", "#105099", "#3D2B7C" ] })33:T9e9,function discreteRamp(color, n) { const div = DOM.element("div"); const w = width + 28; const cellWidth = width / n; const cellHeight = 80; const t = color.ticks ? color.ticks(n) : d3.range(n).map((i) => i / (n - 1)); // CANVAS API // const canvas = DOM.canvas(n, 1); // div.append(canvas); // const context = canvas.getContext("2d"); // canvas.style.margin = "0 -14px"; // canvas.style.width = `${w}px`; // canvas.style.height = "80px"; // canvas.style.imageRendering = "pixelated"; // for (let i = 0; i < t.length; ++i) { // context.fillStyle = color(t[i]); // context.fillRect((i * n) / t.length, 0, cellWidth, 1); // } // SVG API const svg = d3.create("svg").attr("width", w).attr("height", 80); // add swatches const swatchContainer = svg.append("g").attr("class", "swatch-container"); for (let i = 0; i < t.length; ++i) { const swatch = swatchContainer .append("rect") .attr("fill", color(t[i])) .attr("x", cellWidth * i) .attr("y", 0) .attr("width", cellWidth) .attr("height", cellHeight); } // add HEX codes as labels const labelsContainer = svg.append("g").attr("class", "labels-container"); let hexCodes = []; for (let i = 0; i < t.length; ++i) { let hex = d3.color(color(t[i])).formatHex().toUpperCase(); hexCodes.push(hex); let fontColor = pickTextColorBasedOnBgColor(hex); labelsContainer .append("text") .text(hex) .attr("fill", fontColor) .attr("x", cellWidth * i + cellWidth / 2) .attr("y", cellHeight / 2) .attr("text-anchor", "middle"); } div.append(svg.node()); // hex codes for copy/pasting const copyPaste = DOM.element("div"); let id = uniqid(); copyPaste.innerHTML = `

`; div.append(copyPaste); return div; }34:T40f,getDiscretePalette = (colors) => { let blindColors = []; if (simulateBlindness) { colors.forEach((c) => blindColors.push(blinder.default[simulateBlindness](c)) ); } let w = width + 28; let node = d3 .create("svg") .attr("width", w) .attr("height", 70) .style("transform", "translate(-14px,0px"); let cellWidth = w / colors.length; let cellHeight = 70; let clrs = simulateBlindness ? blindColors : colors; for (let i = 0; i < clrs.length; i++) { node .append("rect") .attr("width", cellWidth + "px") .attr("height", cellHeight + "px") .attr("x", cellWidth * i) .attr("y", 1) .attr("fill", clrs[i]); let hex = d3.color(colors[i]).formatHex().toUpperCase(); let fontColor = pickTextColorBasedOnBgColor(hex); node .append("text") .text(colors[i]) .attr("fill", fontColor) .attr("x", cellWidth * i + cellWidth / 2) .attr("y", cellHeight / 1.75) .attr("text-anchor", "middle"); } return node.node(); }35:T41b,getDicopalObjectsForPalette = ( palette, paletteName, paletteType, numberOfObjects ) => { // last colours of each sequential palette that they gave us are too dark, we can change them manually here //if (paletteType == "sequential" && paletteName !== "estatMultihue1") { //let lastColor = palette[palette.length - 1]; //let secondLast = palette[palette.length - 2]; //let newLastColor = getIntermediateColor(lastColor, secondLast, 0.5); //palette = [palette[0], lastColor]; // our new palette takes just 2 colors from the ones they gave use and we interpolate it ourselves //} let interpolator = interpolatePalette(palette); let objects = []; for (let i = 2; i <= Math.max(palette.length, 12); i++) { let colors = getPaletteColors(i, interpolator); // see dicopal.js API let object = { id: paletteName + "_" + i, name: paletteName, number: i, type: paletteType, colors: colors, provider: "Eurostat", url: "" }; objects.push(object); } return objects; }36:T853,estatSchemes = ({ sequential: { estatDarkOrchid: getDicopalObjectsForPalette( [...rawPalettes.darkOrchid], "estatDarkOrchid", "sequential", 12 ), estatA1: getDicopalObjectsForPalette( [...rawPalettes.A1], "estatA1", "sequential", 12 ), estatA2: getDicopalObjectsForPalette( [...rawPalettes.A2], "estatA2", "sequential", 12 ), estatB1: getDicopalObjectsForPalette( [...rawPalettes.B1], "estatB1", "sequential", 12 ), estatB2: getDicopalObjectsForPalette( [...rawPalettes.B2], "estatB2", "sequential", 12 ), estatC1: getDicopalObjectsForPalette( [...rawPalettes.C1], "estatC1", "sequential", 12 ), estatC2: getDicopalObjectsForPalette( [...rawPalettes.C2], "estatC2", "sequential", 12 ), estatMultihue1: getDicopalObjectsForPalette( [...rawPalettes.Multihue1], "estatMultihue1", "sequential", 12 ), estatMultihue2: getDicopalObjectsForPalette( rawPalettes.Multihue2, "estatMultihue2", "sequential", 12 ) }, diverging: { estatDiverging1: getDicopalObjectsForPalette( [...rawPalettes.Diverging1], "estatDiverging1", "diverging", 13 ), estatBA: getDicopalObjectsForPalette( [...rawPalettes.BA], "estatBA", "diverging", 13 ), estatBC: getDicopalObjectsForPalette( [...rawPalettes.BC], "estatBC", "diverging", 13 ), estatCA: getDicopalObjectsForPalette( [...rawPalettes.CA], "estatCA", "diverging", 13 ), estatAC: getDicopalObjectsForPalette( [...rawPalettes.AC], "estatAC", "diverging", 13 ), estatESTAT: getDicopalObjectsForPalette( [...rawPalettes.ESTAT], "estatESTAT", "diverging", 13 ), estatClimate: getDicopalObjectsForPalette( [...rawPalettes.Climate], "estatClimate", "diverging", 13 ) }, qualitative: {} })37:[{"id":"3759e7d93577b90cc3d355a8bdb2fd61b56f7f1c2a183d08932960bdacb16000b0aee9119748cd2babd31d75e183d6eeb5cff06e3481c5c2e55b14055008447e","href":"https://static.observableusercontent.com/files/3759e7d93577b90cc3d355a8bdb2fd61b56f7f1c2a183d08932960bdacb16000b0aee9119748cd2babd31d75e183d6eeb5cff06e3481c5c2e55b14055008447e","name":"Colours_for_IMAGE_update_VY.pdf","type":"application/pdf","lastModified":1715959239442.258,"size":560061}] 2f:{"title":"Eurostat colour palettes for maps","cells":[{"id":0,"value":"# Eurostat colour palettes for maps","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"Official Eurostat colour palettes for maps, derived from [the Eurostat visual style guide](https://ec.europa.eu/eurostat/documents/10186/16918909/eurostat-visual-guide-2022.pdf/f4a49879-93f2-c137-19ba-3b6e3cf870cb?t=1686254512772).","pinned":false,"hidden":false,"mode":"md"},{"id":388,"value":"viewof simulateBlindness = Inputs.radio(\n new Map([\n [\"none\", false],\n [\"protanomaly\", \"protanomaly\"],\n [\"protanopia\", \"protanopia\"],\n [\"deuteranomaly\", \"deuteranomaly\"],\n [\"deuteranopia\", \"deuteranopia\"],\n [\"tritanomaly\", \"tritanomaly\"],\n [\"tritanopia\", \"tritanopia\"],\n [\"achromatomaly\", \"achromatomaly\"],\n [\"achromatopsia\", \"achromatopsia\"]\n ]),\n {\n label: \"Simulate color blindness\",\n value: false\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"## Discrete palettes","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"Using a discrete color palette means that we can create ranges with unequal size to better represent differences in the data. One major downside of the discrete color palette is that we lose any ability to compare elements that fall in the same class (unless the data is directly labelled).","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"## Sequential","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"viewof discreteClasses = Inputs.range([2, 12], {\n label: \"Number of classes\",\n value: 6,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"#### Single-hue","pinned":false,"hidden":false,"mode":"md"},{"id":1361,"value":"html`Dark Orchid${discreteRamp(\n interpolatePalette(rawPalettes.darkOrchid),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"html`Palette A (1)${discreteRamp(\n interpolatePalette(rawPalettes.A1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"html`Palette A (2)${discreteRamp(\n interpolatePalette(rawPalettes.A2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"html`Palette B (1)${discreteRamp(\n interpolatePalette(rawPalettes.B1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"html`Palette B (2)${discreteRamp(\n interpolatePalette(rawPalettes.B2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"html`Palette C (1)${discreteRamp(\n interpolatePalette(rawPalettes.C1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"html`Palette C (2)${discreteRamp(\n interpolatePalette(rawPalettes.C2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"#### Multi-hue","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"html`Multihue 1${discreteRamp(\n interpolatePalette(rawPalettes.Multihue1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"html`Multihue 2${discreteRamp(\n interpolatePalette(rawPalettes.Multihue2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"## Diverging","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"viewof discreteDivClasses = Inputs.range([2, 13], {\n label: \"Number of classes\",\n value: 13,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"html`Diverging 1${discreteRamp(\n interpolatePalette(rawPalettes.Diverging1),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"html`Palette BA${discreteRamp(\n interpolatePalette(rawPalettes.BA),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"html`Palette BC${discreteRamp(\n interpolatePalette(rawPalettes.BC),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"html`Palette CA${discreteRamp(\n interpolatePalette(rawPalettes.CA),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"html`Palette AC${discreteRamp(\n interpolatePalette(rawPalettes.AC),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"html`Palette ESTAT${discreteRamp(\n interpolatePalette(rawPalettes.ESTAT),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"html`Climate${discreteRamp(\n interpolatePalette(rawPalettes.Climate),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"#### Unbalanced diverging","pinned":false,"hidden":false,"mode":"md"},{"id":1324,"value":"unbalancedPalette = [\n \"#9e0142\",\n \"#d53e4f\",\n \"#f46d43\",\n \"#fdae61\",\n \"#fee08b\",\n \"#ffffbf\",\n \"#e6f598\",\n \"#abdda4\",\n \"#66c2a5\",\n \"#3288bd\",\n \"#5e4fa2\"\n].reverse()\n// [\n// \"#d73027\",\n// \"#f46d43\",\n// \"#fdae61\",\n// \"#fee090\",\n// \"#ffffbf\",\n// \"#e0f3f8\",\n// \"#abd9e9\",\n// \"#74add1\",\n// \"#4575b4\"\n// ].reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"viewof divPos = Inputs.range([0, discreteDivClasses], {\n label: \"Point of divergence\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"viewof type = Inputs.radio([\"stretch\", \"prune\"], {\n label: \"Handle unbalanced:\",\n value: \"stretch\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"### Categorical / Qualitative","pinned":false,"hidden":false,"mode":"md"},{"id":1301,"value":"viewof categoricalClasses = Inputs.range([2, 13], {\n label: \"Number of classes\",\n value: 13,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"html`style guide${getDiscretePalette([\n \"#388AE2\",\n \"#33A033\",\n \"#672DC4\",\n \"#B09120\",\n \"#B656BD\",\n \"#AF155C\",\n \"#2644A7\",\n \"#AA5F18\",\n \"#208486\",\n \"#E04040\"\n])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"# Continuous","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"Continuous color ramps can help remove the arbitrariness of class break definitions used with discrete schemes and allow the reader to gauge a wider range of variations in the data.","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"## Sequential","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"html`Multihue 1${ramp(\n interpolatePalette([\n \"#ffeb99\",\n \"#c7e9b4\",\n \"#7fcdbb\",\n \"#41b6c4\",\n \"#104f99\",\n \"#17256b\"\n ]),\n continuousClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"html`ColorBrewer Blues${ramp(\n d3.interpolateBlues,\n continuousClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"## Diverging","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"html`Diverging 1${ramp(\n interpolatePalette([\n \"#997a00\",\n \"#e5b822\",\n \"#feea98\",\n \"#beebbe\",\n \"#7fccbb\",\n \"#208486\"\n ]),\n continuousClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"html`Climate${ramp(\n interpolatePalette([\n \"#75174C\",\n \"#D42027\",\n \"#BF6128\",\n \"#EDB37A\",\n \"#E6D6A1\",\n \"#B1E0E6\",\n \"#4DBEBF\",\n \"#4A86C6\",\n \"#105099\",\n \"#3D2B7C\"\n ]),\n continuousClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof continuousClasses = Inputs.range([2, 256], {\n label: \"Number Of Classes\",\n step: 1,\n value: 256\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1399,"value":"# Make your own:","pinned":false,"hidden":false,"mode":"md"},{"id":1395,"value":"myColors = [\"#f7fbff\", \"#08306b\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"viewof customClasses = Inputs.range([2, 12], {\n label: \"Number of classes\",\n value: 6,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"html`Custom palette${discreteRamp(\n interpolatePalette(myColors),\n customClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"# ECDC palettes","pinned":false,"hidden":false,"mode":"md"},{"id":1260,"value":"viewof ecdcClasses = Inputs.range([2, 12], {\n label: \"Number of classes\",\n value: 7,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"html`reds${discreteRamp(\n interpolatePalette(\n [\n \"#7C170F\",\n \"#A82D17\",\n \"#C34A17\",\n \"#CC6B21\",\n \"#DC9635\",\n \"#E9B855\",\n \"#F1D676\"\n ].reverse()\n ),\n ecdcClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"html`greens${discreteRamp(\n interpolatePalette(\n [\n \"#0C4828\",\n \"#1A6E31\",\n \"#289337\",\n \"#65B32E\",\n \"#9CC65A\",\n \"#C9D971\",\n \"#E7E7B9\"\n ].reverse()\n ),\n ecdcClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"html`blues${discreteRamp(\n interpolatePalette(\n [\n \"#003C50\",\n \"#1A6B85\",\n \"#4999AB\",\n \"#7CBDC4\",\n \"#A5CED7\",\n \"#C2DAE8\",\n \"#E3E8F0\"\n ].reverse()\n ),\n ecdcClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"viewof ecdcDivergingClasses = Inputs.range([2, 14], {\n label: \"Number of classes\",\n value: 14,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"html`diverging${discreteRamp(\n interpolatePalette(\necdcDiverging\n ),\n ecdcDivergingClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"ecdcDiverging = [\n \"#7C170F\",\n \"#A82D17\",\n \"#C34A17\",\n \"#CC6B21\",\n \"#DC9635\",\n \"#E9B855\",\n \"#F1D676\",\n \"#E3E8F0\",\n \"#C2DAE8\",\n \"#A5CED7\",\n \"#7CBDC4\",\n \"#4999AB\",\n \"#1A6B85\",\n \"#003C50\"\n].reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"For Dicopal.js","pinned":false,"hidden":false,"mode":"md"},{"id":1276,"value":"({\n ECDC_diverging: getDicopalObjectsForPalette(\n [...ecdcDiverging],\n \"ecdc_diverging\",\n \"diverging\",\n 12\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"# EIS palettes","pinned":false,"hidden":false,"mode":"md"},{"id":1420,"value":"// html`diverging${discreteRamp(\n// interpolatePalette([]),\n// ecdcDivergingClasses\n// )}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1252,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1014,"value":"Raw colour codes:","pinned":false,"hidden":false,"mode":"md"},{"id":885,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"#### Helper functions...","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"function pickTextColorBasedOnBgColor(bgColor) {\n let lightColor = \"white\";\n let darkColor = \"black\";\n var color = bgColor.charAt(0) === \"#\" ? bgColor.substring(1, 7) : bgColor;\n var r = parseInt(color.substring(0, 2), 16); // hexToR\n var g = parseInt(color.substring(2, 4), 16); // hexToG\n var b = parseInt(color.substring(4, 6), 16); // hexToB\n return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"interpolatePalette = (colors) => {\n let blindColors = [];\n if (simulateBlindness) {\n colors.forEach((c) =>\n blindColors.push(blinder.default[simulateBlindness](c))\n );\n }\n let clrs = simulateBlindness ? blindColors : colors;\n return (t) =>\n d3.piecewise(d3.interpolateRgb, clrs)(Math.min(Math.max(0, t), 1));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// Source: https://observablehq.com/@d3/sequential-scales\n// Adapted from \"@mbostock/color-ramp\"\nfunction ramp(color, n) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\"),\n w = width + 28;\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = `${w}px`;\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n\n const t = color.ticks ? color.ticks(n) : d3.range(n).map((i) => i / (n - 1));\n\n for (let i = 0; i < t.length; ++i) {\n // console.log(color(t[i]));\n context.fillStyle = color(t[i]);\n context.fillRect((i * n) / t.length, 0, 100, 1);\n }\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"Unbalanced stuff...","pinned":false,"hidden":false,"mode":"md"},{"id":674,"value":"unbalanceColorRampStretch = (divVal, colorRampBalanced) => \ndivVal==0? t=>colorRampBalanced(0.5+t*0.5) :\ndivVal==1? t=>colorRampBalanced(t*0.5) :\n(t) =>\n t < divVal\n ? colorRampBalanced(0.5*t/divVal)\n : colorRampBalanced((0.5 * t + 0.5-divVal) / (1-divVal))","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"unbalanceColorRampPrune = (divVal, colorRampBalanced) => \ndivVal >0.5? t=>colorRampBalanced(0.5*t/divVal):\nt=>colorRampBalanced((0.5*t+0.5-divVal)/(1-divVal))","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"divVal = divPos/(discreteDivClasses)","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"colRampUnbalancedDiv = interpolatePalette(unbalancedPalette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"colRU = (type == \"stretch\"\n ? unbalanceColorRampStretch\n : unbalanceColorRampPrune)(divVal, colRampUnbalancedDiv)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"getIntermediateColor = function (color1, color2, ratio) {\n color1 = color1.replace(\"#\", \"\");\n color2 = color2.replace(\"#\", \"\");\n let hex = function (x) {\n x = x.toString(16);\n return x.length == 1 ? \"0\" + x : x;\n };\n // get halfway color between two colors\n let r = Math.ceil(\n parseInt(color1.substring(0, 2), 16) * ratio +\n parseInt(color2.substring(0, 2), 16) * (1 - ratio)\n );\n let g = Math.ceil(\n parseInt(color1.substring(2, 4), 16) * ratio +\n parseInt(color2.substring(2, 4), 16) * (1 - ratio)\n );\n let b = Math.ceil(\n parseInt(color1.substring(4, 6), 16) * ratio +\n parseInt(color2.substring(4, 6), 16) * (1 - ratio)\n );\n\n let middle = hex(r) + hex(g) + hex(b);\n\n return \"#\" + middle;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"## Generate all variations of a palette for Dicopal.addPalette()","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"Here we generate all variations of our palette for use with [Dicopal's](https://github.com/riatelab/dicopal.js) ```addPalette()``` function.","pinned":false,"hidden":false,"mode":"md"},{"id":1028,"value":"viewof allSchemes = Inputs.textarea({\n label: \"Result:\",\n rows: 40,\n placeholder: \"Result\",\n value: estatSchemes ? JSON.stringify(estatSchemes).trim() : \"\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"getPaletteColors = (numberOfColors, interpolator) => {\n let colors = [];\n let myPaletteT = interpolator.ticks\n ? interpolator.ticks(numberOfColors)\n : d3.range(numberOfColors).map((c) => c / (numberOfColors - 1));\n\n for (let i = 0; i < myPaletteT.length; i++) {\n let color = d3.color(interpolator(myPaletteT[i])).formatHex().toUpperCase();\n colors.push(color);\n }\n return colors;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"function uniqid() {\n return (\n Math.random().toString(16).slice(2) +\n new Date().getTime() +\n Math.random().toString(16).slice(2)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1289,"value":"Convert to RGB RYB","pinned":false,"hidden":false,"mode":"md"},{"id":1291,"value":"colorsToConvert = [\n \"#F7EFE8\",\n \"#E4CCB5\",\n \"#D4A883\",\n \"#BE8451\",\n \"#AC621D\",\n \"#331A03\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1293,"value":"rgbList = {\n let rgbs = [];\n colorsToConvert.forEach((color) => {\n let rgbString = hexToRGB(color);\n rgbs.push(rgbString);\n });\n return rgbs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1296,"value":"function hexToRGB(hex) {\n // Remove the leading '#' if present\n if (hex.startsWith(\"#\")) {\n hex = hex.slice(1);\n }\n\n // Convert the hex values to integers\n const bigint = parseInt(hex, 16);\n const r = (bigint >> 16) & 255;\n const g = (bigint >> 8) & 255;\n const b = bigint & 255;\n\n // Return the formatted string\n return `R${r}/G${g}/B${b}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":494,"value":"dicopal = require(\"dicopal\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"blinder = import(\"https://cdn.skypack.dev/color-blind@0.1.3?min\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1210,"value":"toastify = import(\"https://cdn.skypack.dev/toastify-js@1.12.0?min\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}