29:null 2a:["$","title",null,{"children":"Eurostat colour palettes for maps | Joe Davies | Observable"}] 2f: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(); }30: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" ] })31: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; }32: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(); }33: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; }34: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: {} })35:[{"id":"3759e7d93577b90cc3d355a8bdb2fd61b56f7f1c2a183d08932960bdacb16000b0aee9119748cd2babd31d75e183d6eeb5cff06e3481c5c2e55b14055008447e","href":"https://static.observableusercontent.com/files/3759e7d93577b90cc3d355a8bdb2fd61b56f7f1c2a183d08932960bdacb16000b0aee9119748cd2babd31d75e183d6eeb5cff06e3481c5c2e55b14055008447e","name":"Colours_for_IMAGE_update_VY.pdf","type":"application/pdf","lastModified":1715959239442.258,"size":560061}] 2d:{"id":"fdcfcad4e320c423","slug":"eurostat-color-palettes","title":"Eurostat colour palettes for maps","thumbnail":"197fc490c6f9b8fb37be847a0489131aaf28079272f4bad399acf7a252d430ef","access_level":"public","create_time":"$D2023-11-27T12:19:38.276Z","update_time":"$D2025-12-09T10:13:35.032Z","view_time":null,"first_public_time":"$D2023-11-27T12:19:38.276Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024"},"version":1424,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null}],"members":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Eurostat colour palettes for maps","cells":[{"id":0,"value":"# Eurostat colour palettes for maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"## Discrete palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"## Sequential","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"#### Single-hue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1361,"value":"html`Dark Orchid${discreteRamp(\n interpolatePalette(rawPalettes.darkOrchid),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"html`Palette A (1)${discreteRamp(\n interpolatePalette(rawPalettes.A1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"html`Palette A (2)${discreteRamp(\n interpolatePalette(rawPalettes.A2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"html`Palette B (1)${discreteRamp(\n interpolatePalette(rawPalettes.B1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"html`Palette B (2)${discreteRamp(\n interpolatePalette(rawPalettes.B2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"html`Palette C (1)${discreteRamp(\n interpolatePalette(rawPalettes.C1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"html`Palette C (2)${discreteRamp(\n interpolatePalette(rawPalettes.C2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"#### Multi-hue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"html`Multihue 1${discreteRamp(\n interpolatePalette(rawPalettes.Multihue1),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"html`Multihue 2${discreteRamp(\n interpolatePalette(rawPalettes.Multihue2),\n discreteClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"## Diverging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"html`Diverging 1${discreteRamp(\n interpolatePalette(rawPalettes.Diverging1),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"html`Palette BA${discreteRamp(\n interpolatePalette(rawPalettes.BA),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"html`Palette BC${discreteRamp(\n interpolatePalette(rawPalettes.BC),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"html`Palette CA${discreteRamp(\n interpolatePalette(rawPalettes.CA),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"html`Palette AC${discreteRamp(\n interpolatePalette(rawPalettes.AC),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"html`Palette ESTAT${discreteRamp(\n interpolatePalette(rawPalettes.ESTAT),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"html`Climate${discreteRamp(\n interpolatePalette(rawPalettes.Climate),\n discreteDivClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"#### Unbalanced diverging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"viewof type = Inputs.radio([\"stretch\", \"prune\"], {\n label: \"Handle unbalanced:\",\n value: \"stretch\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"### Categorical / Qualitative","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"# Continuous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"## Sequential","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"html`ColorBrewer Blues${ramp(\n d3.interpolateBlues,\n continuousClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"## Diverging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1399,"value":"# Make your own:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1395,"value":"myColors = [\"#f7fbff\", \"#08306b\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"html`Custom palette${discreteRamp(\n interpolatePalette(myColors),\n customClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"# ECDC palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"html`diverging${discreteRamp(\n interpolatePalette(\necdcDiverging\n ),\n ecdcDivergingClasses\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"For Dicopal.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1276,"value":"({\n ECDC_diverging: getDicopalObjectsForPalette(\n [...ecdcDiverging],\n \"ecdc_diverging\",\n \"diverging\",\n 12\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"# EIS palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1420,"value":"// html`diverging${discreteRamp(\n// interpolatePalette([]),\n// ecdcDivergingClasses\n// )}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1014,"value":"Raw colour codes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":885,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"#### Helper functions...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"Unbalanced stuff...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"divVal = divPos/(discreteDivClasses)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"colRampUnbalancedDiv = interpolatePalette(unbalancedPalette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"colRU = (type == \"stretch\"\n ? unbalanceColorRampStretch\n : unbalanceColorRampPrune)(divVal, colRampUnbalancedDiv)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"## Generate all variations of a palette for Dicopal.addPalette()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1289,"value":"Convert to RGB RYB","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1291,"value":"colorsToConvert = [\n \"#F7EFE8\",\n \"#E4CCB5\",\n \"#D4A883\",\n \"#BE8451\",\n \"#AC621D\",\n \"#331A03\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"dicopal = require(\"dicopal\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"blinder = import(\"https://cdn.skypack.dev/color-blind@0.1.3?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"toastify = import(\"https://cdn.skypack.dev/toastify-js@1.12.0?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"