31:[] 2f:{"title":"Color Palettes for EPI Viz Location Levels","cells":[{"id":0,"value":"md`# Color Palettes for EPI Viz Location Levels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`### Labels and Other color elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"grayInputAndMeshColor = [\"#BFBFBF\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"labels = ['Global', 'Super Region', 'Region', 'Country', 'Level 5', 'Level 6', 'Level 7','Mesh/Inputs']","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"subModelLabels = ['prior', 'fit', 'final']","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`### Input Color Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"inputColorScale = [\n 'red',\n chroma('pink').darken(0.5),\n 'orange',\n chroma('green').brighten(0.5),\n 'aqua',\n 'steelblue',\n chroma('purple').brighten(0.8)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`### Modify All colors in the color scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"viewof brightenDarkenAll = slider({\n title: \"Brighten Or Darken All Colors\",\n min: -2,\n max: 2,\n step: 0.01,\n value: 0.2,\n description: \"-ve darken / +ve brighten\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"adjustAllColors = inputColorScale.map((color) => {\n return chroma(color).brighten(brightenDarkenAll).hex();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"md`#### Original color scale (labels inaccurate here)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"view(adjustAllColors.concat(grayInputAndMeshColor))","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"md`### Adjust Color Variation within groups`","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"viewof withinGroupVariation = slider({\n title: \"Within Group Color Variation\",\n min: 0,\n max: 2,\n step: 0.01,\n value: 1,\n description: \"Optimize so that each set of 3 colors looks similar, but doesn't overlap with other colors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"bumpLightDarks = adjustAllColors.reduce((acc, color) => {\n acc.push(chroma(color).brighten(withinGroupVariation).hex());\n acc.push(chroma(color).hex());\n acc.push(chroma(color).darken(withinGroupVariation).hex());\n return acc\n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"finalColorScale = bumpLightDarks.concat(grayInputAndMeshColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"finalColorScaleString = finalColorScale.map(color => (`\"${color}\"`)).join(',\\n')","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`### Final color scale (with labels)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"view(finalColorScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"html`

Viz Palette of these colors (click me)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"vizPaletteURL = `https://projects.susielu.com/viz-palette?colors=\\[${finalColorScale.map(color => (`\"${color}\"`)).join(',')}]&backgroundColor=\"white\"&fontColor=\"black\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"view = {\n const truncate = no => Math.floor(no * 1000) / 1000\n \n const viewBox = (color, index) => `\n \n

${labels[Math.round(index / 3 - 0.5)] || color} ${subModelLabels[index % 3] || ''}

\n \n `\n \n return colorScheme => html`\n

\n ${colorScheme.map(viewBox).join(\"\")}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"chroma = require(\"https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.7/chroma.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}