31:T5f1,viewof colorScheme = groupedSelect({ title: "Select a colour palette", groups: [ { label: "Single-hue", options: [ { value: "cornflower", label: "cornflower" }, { value: "cobalt", label: "cobalt" }, { value: "darkOrchid", label: "dark orchid" }, { value: "fuschia", label: "fuschia" }, { value: "berry", label: "berry" }, { value: "sunsetRed", label: "sunsetRed" }, { value: "sienna", label: "sienna" }, { value: "darkGold", label: "dark gold" }, { value: "forestGreen", label: "forest green" }, { value: "teal", label: "teal" } ] }, { label: "Multi-hue", options: [ { value: "forestGreen_Teal", label: "forest green - teal" }, { value: "forestGreen_Cornflower", label: "Forest Green - Cornflower" }, { value: "lightCornflower_Fuscia", label: "Light Cornflower - Fuscia" }, { value: "fuscia_LightCornflower", label: "Fuscia -Light Cornflower" }, { value: "yellow_Sienna_SunsetRed", label: "Yellow - Sienna - SunsetRed" } ] }, { label: "Diverging", options: [ { value: "BA", label: "BA" }, { value: "BC", label: "BC" }, { value: "CA", label: "CA" }, { value: "AC", label: "AC" }, { value: "ESTAT", label: "ESTAT" }, { value: "Diverging1", label: "Diverging1" }, { value: "Climate", label: "Climate" } ] // disabled: true } ] })32: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(); }33:Tb69,rawPalettes = ({ darkOrchid: ["#E9E0F6", "#CAADF9", "#A77DF9", "#5730A0"], A1: [ "#E9ECF6", "#D4DAF0", "#C1C9EB", "#A8B4E6", "#93A2DC", "#7C90D6", "#677CD2", "#5169BE", "#3C57B0", //"#2644A7", "#243e96" //"#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", "#1f318e"], // ["#FFEB99", "#C7E9B4", "#6BCDBB", "#41B6C4", "#104F99", "#173880"] Multihue2: [ "#FFF8A6", "#F1F57D", "#E4EA65", "#B7DE6A", "#9DD18B", "#69CC80", "#4BBFA0", "#3DA4A8", "#3A91A5", "#396FA8", "#2644A7", "#1f318e" ], BA: [ "#723078", "#B656BD", "#C578CA", "#D39AD7", "#E2BBE5", "#F0DDF2", "#F5F5F5", "#D4DAF0", "#A8B4E6", "#7C90D6", "#5169BE", "#2644A7", "#1f318e" ], 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", "#1f318e" ], 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", "#1f318e" ], Diverging1: [ "#997A00", "#E2C822", "#FEEA98", "#BEEBBE", "#7FCCBB", "#208486" ], Climate: [ "#75174C", "#D42027", "#BF6128", "#EDB37A", "#E6D6A1", "#B1E0E6", "#4DBEBF", "#4A86C6", "#105099", "#3D2B7C" ] })34:T498,function generateColors({ colors, colors2 = [], numColors, diverging = false, bezier = true, correctLightness = true }) { const even = numColors % 2 === 0; const numLeft = diverging ? Math.ceil(numColors / 2) + (even ? 1 : 0) : numColors; const numRight = diverging ? Math.ceil(numColors / 2) + (even ? 1 : 0) : 0; const genLeft = colors.length !== 1 ? colors : autoColors(colors[0], numLeft, diverging).reverse(); const genRight = colors2.length !== 1 ? colors2 : autoColors(colors2[0], numRight, diverging, true); const stepsLeft = colors.length ? chroma .scale(bezier && genLeft.length > 1 ? chroma.bezier(genLeft) : genLeft) .correctLightness(correctLightness) .colors(numLeft) : []; const stepsRight = diverging && colors2.length ? chroma .scale( bezier && genRight.length > 1 ? chroma.bezier(genRight) : genRight ) .correctLightness(correctLightness) .colors(numRight) : []; return ( even && diverging ? stepsLeft.slice(0, stepsLeft.length - 1) : stepsLeft ).concat(stepsRight.slice(1)); }35:T7d3,function discreteRamp(colors) { const div = DOM.element("div"); const w = width + 28; const cellWidth = width / colors.length; const cellHeight = 80; // 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 < colors.length; ++i) { const swatch = swatchContainer .append("rect") .attr("fill", colors[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 < colors.length; ++i) { let hex = colors[i]; 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; }36: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(); }37:T7c1,estatSchemes = ({ sequential: { 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: {} })38:Tbe9,estatSchemesNew = ({ sequential: { cornflower: getDicopalObjectsForPaletteWithChroma( ["#388AE2"], "cornflower", "sequential", 9 ), cobalt: getDicopalObjectsForPaletteWithChroma( ["#2644A7"], "cobalt", "sequential", 9 ), darkOrchid: getDicopalObjectsForPaletteWithChroma( ["#672DC4"], "darkOrchid", "sequential", 9 ), fuchsia: getDicopalObjectsForPaletteWithChroma( ["#B656BD"], "fuchsia", "sequential", 9 ), berry: getDicopalObjectsForPaletteWithChroma( ["#AF155C"], "berry", "sequential", 9 ), sunsetRed: getDicopalObjectsForPaletteWithChroma( ["#E04040"], "sunsetRed", "sequential", 9 ), sienna: getDicopalObjectsForPaletteWithChroma( ["#AA5F18"], "sienna", "sequential", 9 ), darkGold: getDicopalObjectsForPaletteWithChroma( ["#B09120"], "darkGold", "sequential", 9 ), forestGreen: getDicopalObjectsForPaletteWithChroma( ["#33A033"], "forestGreen", "sequential", 9 ), teal: getDicopalObjectsForPaletteWithChroma( ["#208486"], "teal", "sequential", 9 ), estatMultihue1: getDicopalObjectsForPalette( [...rawPalettes.Multihue1], "estatMultihue1", "sequential", 10 ), forestGreen_Teal: getDicopalObjectsForPaletteWithChroma( styleGuide.forestGreen_Teal, "Forest Green - Teal", "sequential", 10 ), lightCornflower_Fuchsia: getDicopalObjectsForPaletteWithChroma( styleGuide.lightCornflower_Fuchsia, "Light Cornflower - Fuchsia", "sequential", 10 ), fuscia_LightCornflower: getDicopalObjectsForPaletteWithChroma( styleGuide.fuchsia_LightCornflower, "Fuchsia - Light Cornflower", "sequential", 10 ), yellow_Sienna_SunsetRed: getDicopalObjectsForPaletteWithChroma( styleGuide.yellow_Sienna_SunsetRed, "Yellow - Sienna - Sunset Red", "sequential", 10 ) }, 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 ) } })39:T550,obumbratta = ({ cobalt: { 2: ["#ddeffc", "#244d84"], 3: ["#ddeffc", "#4995e5", "#244d84"], 4: ["#ddeffc", "#79b4ed", "#347aca", "#244d84"], 5: ["#ddeffc", "#91c3f1", "#4995e5", "#316eb8", "#244d84"], 6: ["#ddeffc", "#a0ccf3", "#66a7ea", "#3784d8", "#2e68ad", "#244d84"], 7: [ "#ddeffc", "#aad2f4", "#79b4ed", "#4995e5", "#347aca", "#2d63a6", "#244d84" ], 8: [ "#ddeffc", "#b1d6f5", "#87bcef", "#5ea2e9", "#3788de", "#3273bf", "#2c60a1", "#244d84" ], 9: [ "#ddeffc", "#b6d9f6", "#91c3f1", "#6eaceb", "#4995e5", "#3680d3", "#316eb8", "#2b5d9d", "#244d84" ], 10: [ "#f0f8fe", "#cde5f9", "#abd1f4", "#8abcef", "#69a7ea", "#4792e5", "#347ac8", "#2d609e", "#244777", "#1a3051" ], 11: [ "#f0f8fe", "#d0e7f9", "#b1d5f5", "#94c2f1", "#76b0ec", "#599de7", "#388ae2", "#3272bb", "#2b5b96", "#234573", "#1a3051" ], 12: [ "#f0f8fe", "#d3e8fa", "#b7d8f6", "#9cc7f2", "#81b7ee", "#66a6ea", "#4b94e5", "#3681d4", "#316cb1", "#2a5790", "#22436f", "#1a3051" ] } })3a:T5c4,function groupedSelect(config = {}) { let { value: formValue, title, description, submit, multiple, size, groups } = config; if (Array.isArray(config)) groups = config; groups = groups.map((g) => { if (!g.label) { throw new Error("Undefined label for groupedSelect"); } return Object.assign(g, { options: g.options.map((o) => typeof o === "object" ? o : { value: o, label: o } ) }); }); const form = input({ type: "select", title, description, submit, getValue: (input) => { const selected = Array.prototype.filter .call(input.options, (i) => i.selected) .map((i) => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }3b:[] 2f:{"title":"Colour palettes for maps","cells":[{"id":0,"value":"# Colour palettes for maps","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"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":1685,"value":"styleGuide = ({\n cornflower: [\"#388AE2\"],\n cobalt: [\"#2644A7\"],\n darkOrchid: [\"#672DC4\"],\n fuchsia: [\"#B656BD\"],\n berry: [\"#AF155C\"],\n sunsetRed: [\"#E04040\"],\n sienna: [\"#AA5F18\"],\n darkGold: [\"#B09120\"],\n forestGreen: [\"#007243\"],\n teal: [\"#00525C\"],\n forestGreen_Teal: [\"#E4F1E1\", \"#00525C\"],\n forestGreen_Cornflower: [\"#c6e2de\", \"#005C99\"],\n lightCornflower_Fuchsia: [\"#deebfc\", \"#722A78\"],\n fuchsia_LightCornflower: [\"#fceaff\", \"#005C99\"],\n yellow_Sienna_SunsetRed: [\"#FFEB99\", \"#CC833E\", \"#992C2C\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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":1398,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"Cornflower${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: [...styleGuide.cornflower.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"html`Cobalt${discreteRamp(\n generateColors({\n colors: [...styleGuide.cobalt.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"html`Dark Orchid${discreteRamp(\n generateColors({\n colors: [...styleGuide.darkOrchid.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"html`Fuchsia${discreteRamp(\n generateColors({\n colors: [...styleGuide.fuchsia.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"html`Berry${discreteRamp(\n generateColors({\n colors: [...styleGuide.berry.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"html`Sunset red${discreteRamp(\n generateColors({\n colors: [...styleGuide.sunsetRed.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"html`Sienna${discreteRamp(\n generateColors({\n colors: [...styleGuide.sienna.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"html`Dark Gold${discreteRamp(\n generateColors({\n colors: [...styleGuide.darkGold.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"html`Forest Green${discreteRamp(\n generateColors({\n colors: [...styleGuide.forestGreen.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"html`Teal${discreteRamp(\n generateColors({\n colors: [...styleGuide.teal.map((c) => chroma(c))],\n numColors: discreteClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"#### Multi-hue","pinned":false,"hidden":false,"mode":"md"},{"id":1327,"value":"Multihue ramps should be used only when there is a need for a relatively high number of classes – in such case, consecutive colours in a single hue ramp may become impossible to differenciate. In Bertin’s vocabulary, multihue ramps have a higher ‘depth’ than single hue ramps. Some multihued ramps look almost like a diverging ramp and may introduce some kind of undesired qualitative distinction between class groups.","pinned":false,"hidden":false,"mode":"md"},{"id":1333,"value":"viewof multihueClasses = Inputs.range([6, 15], {\n label: \"Number of classes\",\n value: 13,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1739,"value":"html`ForestGreen-Teal${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: styleGuide.forestGreen_Teal,\n numColors: multihueClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"html`ForestGreen-Cornflower (imitation of colorBrewer GnBu)${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: styleGuide.forestGreen_Cornflower, //[\"#e5ffec\",\"#c6e2de\",\"#a7c5d1\",\"#88a9c3\",\"#678eb5\",\"#4375a7\",\"#005c99\"]\n numColors: multihueClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"html`LightCornflower-Fuscia (imitation of colorBrewer BuPu)${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: styleGuide.lightCornflower_Fuchsia,\n numColors: multihueClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"html`Fuscia-LightCornflower (imitation of colorBrewer PuBu)${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: styleGuide.fuchsia_LightCornflower,\n numColors: multihueClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1747,"value":"html`Yellow-Sienna-SunsetRed (imitation of colorBrewer YlOrRd)${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: styleGuide.yellow_Sienna_SunsetRed,\n numColors: multihueClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"html`Yellow-ForestGreen (imitation of colorBrewer YlGn)${discreteRamp(\n //getPaletteColors(discreteClasses, interpolatePalette(rawPalettes.A1))\n //generateColors(\"#388AE2\", discreteClasses)\n generateColors({\n colors: styleGuide.yellow_Sienna_SunsetRed, //[\"#FFEB99\",\"#D0E9B0\",\"#8AD6B9\",\"#56C2C0\",\"#3194B6\",\"#134A97\",\"#1F318E\"]\n numColors: multihueClasses,\n bezier: bezier,\n correctLightness: correctLightness\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"html`Multihue 1 (yellow - green - blue)${discreteRamp(\n getPaletteColors(multihueClasses, interpolatePalette(rawPalettes.Multihue1))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"## Diverging","pinned":false,"hidden":false,"mode":"md"},{"id":1343,"value":"Diverging color schemes must only be used when the point at which the scheme diverges is **meaningful**, for example at 0 in a dataset that contains positive and negative values.","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 getPaletteColors(\n discreteDivClasses,\n interpolatePalette(rawPalettes.Diverging1)\n )\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"html`Palette BA${discreteRamp(\n getPaletteColors(discreteDivClasses, interpolatePalette(rawPalettes.BA))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"html`Palette BC${discreteRamp(\n getPaletteColors(discreteDivClasses, interpolatePalette(rawPalettes.BC))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"html`Palette CA${discreteRamp(\n getPaletteColors(discreteDivClasses, interpolatePalette(rawPalettes.CA))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"html`Palette AC${discreteRamp(\n getPaletteColors(discreteDivClasses, interpolatePalette(rawPalettes.AC))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"html`Palette ESTAT${discreteRamp(\n getPaletteColors(discreteDivClasses, interpolatePalette(rawPalettes.ESTAT))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"html`Climate${discreteRamp(\n getPaletteColors(discreteDivClasses, interpolatePalette(rawPalettes.Climate))\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"#### Unbalanced diverging","pinned":false,"hidden":false,"mode":"md"},{"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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"viewof type = Inputs.radio([\"stretch\", \"prune\"], { value: \"stretch\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"### Categorical / Qualitative","pinned":false,"hidden":false,"mode":"md"},{"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":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":1250,"value":"# ECDC palettes","pinned":false,"hidden":false,"mode":"md"},{"id":1260,"value":"viewof ecdcClasses = Inputs.range([2, 7], {\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 getPaletteColors(\n ecdcClasses,\n interpolatePalette(\n [\n \"#7C170F\",\n \"#A82D17\",\n \"#C34A17\",\n \"#CC6B21\",\n \"#DC9635\",\n \"#E9B855\",\n \"#F1D676\"\n ].reverse()\n )\n )\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"html`greens${discreteRamp(\n getPaletteColors(\n ecdcClasses,\n interpolatePalette(\n [\n \"#0C4828\",\n \"#1A6E31\",\n \"#289337\",\n \"#65B32E\",\n \"#9CC65A\",\n \"#C9D971\",\n \"#E7E7B9\"\n ].reverse()\n )\n )\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"html`blues${discreteRamp(\n getPaletteColors(\n ecdcClasses,\n interpolatePalette(\n [\n \"#003C50\",\n \"#1A6B85\",\n \"#4999AB\",\n \"#7CBDC4\",\n \"#A5CED7\",\n \"#C2DAE8\",\n \"#E3E8F0\"\n ].reverse()\n )\n )\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 getPaletteColors(ecdcDivergingClasses, interpolatePalette(ecdcDiverging))\n)}`","pinned":false,"hidden":true,"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":1276,"value":"({\n ECDC_diverging: getDicopalObjectsForPalette(\n [...ecdcDiverging],\n \"ecdc_diverging\",\n \"diverging\",\n 12\n )\n})","pinned":false,"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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"## Helper functions...","pinned":false,"hidden":false,"mode":"md"},{"id":1556,"value":"### From chroma.js","pinned":false,"hidden":false,"mode":"md"},{"id":1599,"value":"function autoColors(color, numColors, diverging, reverse = false) {\n if (diverging) {\n const cols = autoGradient(color, 3, true)\n .concat(chroma(\"#f5f5f5\"));\n if (reverse) cols.reverse();\n return cols;\n } else {\n return autoGradient(color, numColors, false);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"function autoGradient(color, numColors, diverging) {\n const lab = chroma(color).lab();\n\n const lRange = 100 * (0.95 - 1 / numColors);\n const lStep = lRange / (numColors - 1);\n const lStart = (100 - lRange) * 0.5;\n\n const lValues = lodash.range(lStart, lStart + numColors * lStep, lStep);\n\n let offset = 0;\n\n if (!diverging) {\n offset = 9999;\n for (let i = 0; i < numColors; i++) {\n const diff = lab[0] - lValues[i];\n if (Math.abs(diff) < Math.abs(offset)) {\n offset = diff;\n }\n }\n }\n\n return lValues.map((l) => chroma.lab(l + offset, lab[1], lab[2]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"mapColors = {\n let colors;\n if (styleGuide[colorScheme]) {\n colors = generateColors({\n colors: [...styleGuide[colorScheme].map((c) => chroma(c))],\n numColors: numberOfClasses,\n bezier: bezier,\n correctLightness: correctLightness\n });\n } else {\n colors = getPaletteColors(\n numberOfClasses,\n interpolatePalette(rawPalettes[colorScheme])\n );\n }\n\n let blindC = [];\n if (simulateBlindness) {\n colors.forEach((c) => blindC.push(blinder.default[simulateBlindness](c)));\n return blindC;\n }\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"map = {\n let map = eurostatmap\n .map(\"choropleth\")\n .width(600)\n .transitionDuration(50)\n .nutsLevel(nutsLevel)\n .nutsYear(2024)\n .stat({\n eurostatDatasetCode: \"demo_r_d3dens\",\n unitText: \"people/km²\",\n TIME: 2024\n })\n .classificationMethod(\"quantile\")\n\n .legend({\n x: 400,\n y: 10\n });\n\n map.build();\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"{\n //update map\n map.numberOfClasses(numberOfClasses).colors(mapColors);\n map.updateStatValues();\n map.updateClassification();\n map.updateStyle();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"$35","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":"$36","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(rawPalettes.Diverging1)","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":1126,"value":"getIntermediateColor(\"#17256B\", \"#0B1432\", 0.5)","pinned":true,"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: estatSchemesNew ? JSON.stringify(estatSchemesNew).trim() : \"\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"getPaletteColors = (numberOfColors, interpolator) => {\n const colors = [];\n const N = Math.max(2, Math.floor(numberOfColors)); // assume >= 2\n\n // Only compress for very small palettes (4 or less classes).\n let margin = N <= numberOfColors ? 1 / (N + 1) : 0;\n if (!compression) margin = 0;\n\n const denom = N - 1;\n const myPaletteT = d3\n .range(N)\n .map((i) => margin + (i / denom) * (1 - 2 * margin));\n\n for (let i = 0; i < myPaletteT.length; i++) {\n const t = Math.min(Math.max(0, myPaletteT[i]), 1);\n const color = d3.color(interpolator(t)).formatHex().toUpperCase();\n colors.push(color);\n }\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"getDicopalObjectsForPalette = (\n palette,\n paletteName,\n paletteType,\n numberOfObjects\n) => {\n let interpolator = interpolatePalette(palette);\n\n let objects = [];\n\n for (let i = 2; i <= Math.max(palette.length, 12); i++) {\n let colors = getPaletteColors(i, interpolator);\n\n // see dicopal.js API\n let object = {\n id: paletteName + \"_\" + i,\n name: paletteName,\n number: i,\n type: paletteType,\n colors: colors,\n provider: \"Eurostat\",\n url: \"\"\n };\n\n objects.push(object);\n }\n return objects;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"getDicopalObjectsForPaletteWithChroma = (\n palette,\n paletteName,\n paletteType,\n numberOfObjects\n) => {\n let objects = [];\n\n for (let i = 2; i <= Math.max(palette.length, 12); i++) {\n let colors = generateColors({\n colors: palette.map((c) => chroma(c)),\n numColors: i,\n bezier: true,\n correctLightness: true\n });\n\n // see dicopal.js API\n let object = {\n id: paletteName + \"_\" + i,\n name: paletteName,\n number: i,\n type: paletteType,\n colors: colors,\n provider: \"Eurostat\",\n url: \"\"\n };\n\n objects.push(object);\n }\n return objects;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"$38","pinned":true,"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":1872,"value":"### Raw output from https://obumbratta.com/colour","pinned":false,"hidden":false,"mode":"md"},{"id":1874,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":1596,"value":"lodash = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1553,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1351,"value":"eurostatmap = require(\"eurostat-map\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1426,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"import { input } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}