30:T563,sequentialSchemes = [ ["YlGn", d3.interpolateYlGn], ["YlGnBu", d3.interpolateYlGnBu], ["BuGn", d3.interpolateBuGn], ["BuPu", d3.interpolateBuPu], ["Blues", d3.interpolateBlues], ["PuBu", d3.interpolatePuBu], ["Cividis", d3.interpolateCividis], ["Cool", d3.interpolateCool], ["CubehelixDefault", d3.interpolateCubehelixDefault], ["GnBu", d3.interpolateGnBu], ["Greens", d3.interpolateGreens], ["Greys", d3.interpolateGreys], ["Inferno", d3.interpolateInferno], ["Magma", d3.interpolateMagma], ["Oranges", d3.interpolateOranges], ["Blues", d3.interpolateBlues], ["OrRd", d3.interpolateOrRd], ["Plasma", d3.interpolatePlasma], ["PuBuGn", d3.interpolatePuBuGn], ["PuRd", d3.interpolatePuRd], ["Purples", d3.interpolatePurples], ["Reds", d3.interpolateReds], ["Eurostat - sequential multihue", interpolatePalette(rawPalettes.Multihue1)], [ "Eurostat - sequential multihue 2", interpolatePalette(rawPalettes.Multihue2) ], ["Eurostat - A1", interpolatePalette(rawPalettes.A1)], ["Eurostat - A2", interpolatePalette(rawPalettes.A2)], ["Eurostat - B1", interpolatePalette(rawPalettes.B1)], ["Eurostat - B1", interpolatePalette(rawPalettes.B1)], ["Eurostat - B2", interpolatePalette(rawPalettes.B2)], ["Eurostat - C1", interpolatePalette(rawPalettes.C1)], ["Eurostat - C2", interpolatePalette(rawPalettes.C2)] ]31:Tae2,rawPalettes = ({ 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"], Multihue2: [ "#FFF8A6", "#F1F57D", "#E4EA65", "#B7DE6A", "#9DD18B", "#69CC80", "#4BBFA0", "#3DA4A8", "#3A91A5", "#396FA8", "#2644A7", "#0D1878", "#060C3B" ], 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" ] })32:T4d5,// Function to suggest the best highlight color function suggestHighlightColor( colorArray, lightBackgroundHex, highlightColorOptions ) { const lightBackgroundRgb = hexToRgb(lightBackgroundHex); const lightBackgroundLuminance = relativeLuminance(lightBackgroundRgb); let bestColor = null; let bestScore = 0; highlightColorOptions.forEach((highlightHex) => { const highlightRgb = hexToRgb(highlightHex); const highlightLuminance = relativeLuminance(highlightRgb); // Calculate contrast ratio with light background const contrastWithBackground = contrastRatio( lightBackgroundLuminance, highlightLuminance ); // Calculate minimum contrast with all colors in the array let minContrastWithColors = Math.min( ...colorArray.map((colorHex) => { const colorRgb = hexToRgb(colorHex); const colorLuminance = relativeLuminance(colorRgb); return contrastRatio(colorLuminance, highlightLuminance); }) ); // Determine if the highlight color has optimal contrast let score = contrastWithBackground + minContrastWithColors; if (score > bestScore) { bestScore = score; bestColor = highlightHex; } }); return bestColor; }33:[] 2e:{"title":"Colors for maps","cells":[{"id":0,"value":"# Colors for maps","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"Export colour arrays for maps in Hex, RGB or CYMK format.","pinned":false,"hidden":false,"mode":"md"},{"id":793,"value":"viewof schemeType = Inputs.radio([\"Sequential\", \"Diverging\"], {\n label: \"Type\",\n value: \"Sequential\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"viewof colorScheme = Inputs.select(new Map(schemeOptions), {\n value: schemeOptions[0],\n label: \"Colour scheme\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof classes = slider({\n min: 1,\n max: 20,\n value: 9,\n step: 1,\n title: \"Number of classes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"{\n let node = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 70);\n let cellWidth = width / classes;\n let cellHeight = 70;\n\n for (let i = 0; i < classes; i++) {\n node\n .append(\"rect\")\n .attr(\"width\", cellWidth + \"px\")\n .attr(\"height\", cellHeight + \"px\")\n .attr(\"x\", cellWidth * i)\n .attr(\"y\", 1)\n .attr(\"fill\", colorScheme(colorScale(i)));\n }\n\n return node.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":703,"value":"### Configure map","pinned":false,"hidden":false,"mode":"md"},{"id":457,"value":"viewof nutsLvl = Inputs.radio([\"0\", \"1\", \"2\", \"3\"], {\n label: \"NUTS level\",\n value: \"2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"viewof seaColor = Inputs.color({ label: \"Sea colour\", value: \"#ffffff\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"map = eurostatmap // api reference here: https://github.com/eurostat/eurostat-map.js/blob/master/docs/reference.md\n .map(\"ch\")\n .title(\"Example map\")\n .titleFontSize(21)\n .subtitleFontSize(17)\n .subtitle(\"Generated with eurostat-map.js\")\n .stat({\n eurostatDatasetCode: \"demo_r_d3dens\",\n filters: { time: 2021 },\n unitText: \"Inhabitants / km²\"\n })\n .legend({\n title: \"Example data\",\n x: 500,\n shapeHeight: 20,\n shapeWidth: 30,\n sepLineLength: 35\n })\n .transitionDuration(100) // transition in ms when map style is updated\n .width(700)\n .height(600)\n .nutsLevel(nutsLvl)\n .build()","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"{\n // handle map updates, add subtitle\n map.colors(hex).clnb(hex.length).updateStatValues();\n let mapSubtitle = document.getElementById(\"subtitleEUR\");\n if (mapSubtitle) {\n mapSubtitle.innerHTML =\n \"Generated with eurostat-map.js\";\n }\n\n let colorArray = hex;\n let lightBackgroundHex = \"#ffffff\";\n let highlightColorOptions = [\"#FF0000\", \"#FFFF00\"];\n let highlightColor = suggestHighlightColor(\n colorArray,\n lightBackgroundHex,\n highlightColorOptions\n );\n map.nutsrgSelFillSty(highlightColor);\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"map.seaFillStyle(seaColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"### Export color codes","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"md`Color values in hexidecimal, RGB and CMYK formats:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"hex = {\n let clrs = [];\n for (let i = 0; i < classes; i++) {\n let c = d3.color(colorScheme(colorScale(i)));\n clrs.push(c.formatHex());\n }\n return clrs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"rgb = {\n let rs = [];\n\n for (let i = 0; i < classes; i++) {\n let c = d3.color(colorScheme(colorScale(i)));\n let rgb = c.formatRgb();\n rs.push(rgb);\n }\n\n return rs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"cmyk = {\n let cmyks = [];\n\n for (let i = 0; i < classes; i++) {\n let c = d3.color(colorScheme(colorScale(i)));\n let hex = c.formatHex();\n let rgb = hex.replace(\"#\", \"\").match(/.{2}/g);\n\n for (let c = 0; c < rgb.length; c++) {\n rgb[c] = hexdec(rgb[c]);\n }\n\n cmyks.push(hexToCMYK(hex));\n }\n\n return cmyks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"or export your own color array...","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"## Export your own colours","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"sequentialMultiHue = [\n \"#ffeb99\",\n \"#c7e9b4\",\n \"#7fcdbb\",\n \"#41b6c4\",\n \"#104f99\",\n \"#17256b\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"getPalette(sequentialMultiHue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"myCustomColors = sequentialMultiHue","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"#### Hex, RYB and CMYK codes here:","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"myHex = {\n let rs = [];\n for (let i = 0; i < myCustomColors.length; i++) {\n let c = d3.color(myCustomColors[i]);\n let hex = c.formatHex();\n rs.push(hex);\n }\n\n return rs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"myrgb = {\n let rs = [];\n for (let i = 0; i < myCustomColors.length; i++) {\n let c = d3.color(myCustomColors[i]);\n let rgb = c.formatRgb();\n rs.push(rgb);\n }\n\n return rs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"mycmyk = {\n let cmyks = [];\n\n for (let i = 0; i < myCustomColors.length; i++) {\n let c = d3.color(myCustomColors[i]);\n let hex = c.formatHex();\n let rgb = hex.replace(\"#\", \"\").match(/.{2}/g);\n\n for (let c = 0; c < rgb.length; c++) {\n rgb[c] = hexdec(rgb[c]);\n }\n\n cmyks.push(hexToCMYK(hex));\n }\n\n return cmyks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"## Color schemes explained","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"1. **Sequential schemes** are suited to ordered data that progress from low to high. Lightness steps dominate the look of these schemes, with light colors for low data values to dark colors for high data values. \n \n2. **Diverging schemes** put equal emphasis on mid-range critical values and extremes at both ends of the data range. The critical class or break in the middle of the legend is emphasized with light colors and low and high extremes are emphasized with dark colors that have contrasting hues.\n\n3. **Categorical schemes** do not imply magnitude differences between legend classes, and hues are used to create the primary visual differences between classes. Categorical schemes are best suited to representing nominal or categorical data.\n \nSource: [ColorBrewer](https://colorbrewer2.org/)","pinned":false,"hidden":false,"mode":"md"},{"id":822,"value":"schemeOptions = schemeType == \"Sequential\"\n ? sequentialSchemes\n : divergingSchemes","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"divergingSchemes = [\n [\"RdBu\", d3.interpolateRdBu],\n [\"PiYG\", d3.interpolatePiYG],\n [\"BrBG\", d3.interpolateBrBG],\n\n [\"PRGn\", d3.interpolatePRGn],\n\n [\"PuOr\", d3.interpolatePuOr],\n [\"Eurostat - diverging\", interpolatePalette(rawPalettes.Diverging1)],\n [\"Eurostat - blue-brown\", interpolatePalette(rawPalettes.ESTAT)],\n [\"Eurostat - Climate\", interpolatePalette(rawPalettes.Climate)],\n [\"Eurostat - AC\", interpolatePalette(rawPalettes.AC)],\n [\"Eurostat - BA\", interpolatePalette(rawPalettes.BA)],\n [\"Eurostat - BC\", interpolatePalette(rawPalettes.BC)],\n [\"Eurostat - CA\", interpolatePalette(rawPalettes.CA)]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"## Some more colour palettes...","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"fuschiaBerry = [\n \"#feebe2\",\n \"#fcc5c0\",\n \"#fa9fb5\",\n \"#F065A2\",\n \"#c51b8a\",\n \"#782A78\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"getPalette(fuschiaBerry)","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"darkFuchiaLightGold = [\n \"#782a78\",\n \"#925289\",\n \"#ac7799\",\n \"#c49daa\",\n \"#ddc4bb\",\n \"#f5eccb\"\n].reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"getPalette(darkFuchiaLightGold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"RYB_diverging = [\n \"#997a00\",\n \"#e5b822\",\n \"#feea98\",\n \"#beebbe\",\n \"#7fccbb\",\n \"#208486\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"getPalette(RYB_diverging)","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"categorical = [\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":666,"value":"getPalette(categorical)","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":630,"value":"getPalette = (colors) => {\n let node = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 70);\n let cellWidth = width / colors.length;\n let cellHeight = 70;\n\n for (let i = 0; i < colors.length; i++) {\n node\n .append(\"rect\")\n .attr(\"width\", cellWidth + \"px\")\n .attr(\"height\", cellHeight + \"px\")\n .attr(\"x\", cellWidth * i)\n .attr(\"y\", 1)\n .attr(\"fill\", colors[i]);\n }\n\n return node.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"interpolatePalette = (colors) => {\n return (t) =>\n d3.piecewise(d3.interpolateLab, colors)(Math.min(Math.max(0, t), 1));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"// Helper function to convert hex color to RGB\nfunction hexToRgb(hex) {\n let bigint = parseInt(hex.replace(\"#\", \"\"), 16);\n return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"// Helper function to calculate relative luminance\nfunction relativeLuminance([r, g, b]) {\n [r, g, b] = [r, g, b].map((v) => {\n v /= 255;\n return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"// Helper function to calculate contrast ratio\nfunction contrastRatio(luminance1, luminance2) {\n let lighter = Math.max(luminance1, luminance2);\n let darker = Math.min(luminance1, luminance2);\n return (lighter + 0.05) / (darker + 0.05);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"function hexToCMYK(hex) {\n var computedC = 0;\n var computedM = 0;\n var computedY = 0;\n var computedK = 0;\n\n hex = hex.charAt(0) == \"#\" ? hex.substring(1, 7) : hex;\n\n if (hex.length != 6) {\n alert(\"Invalid length of the input hex value!\");\n return;\n }\n if (/[0-9a-f]{6}/i.test(hex) != true) {\n alert(\"Invalid digits in the input hex value!\");\n return;\n }\n\n var r = parseInt(hex.substring(0, 2), 16);\n var g = parseInt(hex.substring(2, 4), 16);\n var b = parseInt(hex.substring(4, 6), 16);\n\n // BLACK\n if (r == 0 && g == 0 && b == 0) {\n computedK = 1;\n return [0, 0, 0, 1];\n }\n\n computedC = 1 - r / 255;\n computedM = 1 - g / 255;\n computedY = 1 - b / 255;\n\n var minCMY = Math.min(computedC, Math.min(computedM, computedY));\n\n computedC = (computedC - minCMY) / (1 - minCMY);\n computedM = (computedM - minCMY) / (1 - minCMY);\n computedY = (computedY - minCMY) / (1 - minCMY);\n computedK = minCMY;\n\n return [computedC * 100, computedM * 100, computedY * 100, computedK * 100];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"function rgbToCmyk(rgb) {\n let b = 1;\n let arr = [];\n for (var i = 0; i < rgb.length; i++) {\n let color = 1 - rgb[i] / 255;\n if (color < b) b = color;\n if (b === 1) color = 1;\n else color = ((color - b) / (1 - b)) * 100;\n arr[i] = Math.round(color);\n }\n const k = Math.round(b * 100);\n arr.push(k);\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"function hexdec(hexString) {\n hexString = (hexString + \"\").replace(/[^a-f0-9]/gi, \"\");\n return parseInt(hexString, 16);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`D3 scale function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"colorScale = d3.scaleLinear().domain([0, classes]).range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"#### Some extra map styling","pinned":false,"hidden":false,"mode":"md"},{"id":695,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { viewof colorInterpolatorPicker } from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"import { select, radio, slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"eurostatmap = require(\"eurostat-map\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}