2f:T487,md` Updated Color palette: * SH and DH have a Luminance contrast ratio of 4 with the rest of the palette * New snow (DF & PP) use Saturation or Chromaticity contrast with the rest of the palette * Bulk layers are set to be desaturated and similar in luminance to most of the other grain type colors * MFcr, MF, and IF are colored analagously using variations of yellow/brown/salmon. MFcr and IF are emphasized using slightly less luminous areas * RG, FCxr and FC are also using related colors. FCxr is FC that is metamorphosin in a way similar to RG * There are 4 distint color groups; Weak layers using luminance contrast (SH DH), new snow saturation contrast (DF PP), bulk layers using a diverging color scheme(RG FCxr FC) and melt forms using an analagous color scheme(MFcr MF IF) that reflect the main operationally relevant distinctions for grain types * The color palette is distinct enough for color-blind deuteranopes so that weak layers are easily identified. Grains with similar metamorphic relations are visible in analagous color (blues). Melt forms and a new snow look similar, but they rarely if ever are adjacent in position. *LYN's comments`30:T760,md` The purpose of this color palette design is to develop a color palette for snow grains to be used for modelled snowpack data in operational avalanche forecasting. The color palette is designed according to the following criteria: * Considering that 10-13% of white males suffer some type of colorblindness, grain types belonging to new snow(PP, DF), thin persistent layers (SH, DH), and bulk layers (RG, FCxr, FC*)/meltforms(MF, MFcr, IF) should be made into 3 distinct color groups for red-green colorblind individuals (largest population of colorblind individuals) * certain grain types of interest (SH, DH) tend to be very thin in the snowpack, but at the same time are very critical. These should be contrasted with grains that tend to make bulk layers and therefore a larger portion view. These grains should be contrasted using darker lumninance and higher saturation. * Generally, 8 nominal variables are optimally distinguishable by hue. Color encoding nominal variables should not exceed 10 hues. Consistency in naming colors is a good proxy for memorability of a given hue (remembering value encoded such as grain type) See Figure 1. Since the previous two constraints may make it difficult to use the full range of hues for the color palette, it may be necessary to use an analagous coloring technique. That is, grain types that are conceptually related may use the same hue but vary saturation and/or luminance. Certain hues allow more discriminable levels of saturation (Red, Green, and Blue) Figure 2. These should, therefore be the colors used for discriminability. * Finally, visual salience(importance) should match the importance of a particular grain to the task at hand. Using contrast effects, and color perception principles dealing with color salience ordering based on how colors are processed in the visual system (1. Back-White, 2. Red-Green 3. Yellow-Blue)`31:[] 2d:{"title":"Grain Color Palette","cells":[{"id":0,"value":"md`# Grain Color Palette`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`this is a test edit`","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"CP1 = [\"#cd0000\", \"#1f78b4\", \"#9ce881\", \"#68df57\", \"#ffd7e0\", \"#d6cee7\", \"#a6cee3\",\"#f3c34d\", \"#ffeda0\", \"#ffb76b\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"{\n let content = `

`\n for (let hue of CP1) {\n content += `

${Grains[CP1.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md` Luminance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"{\n let content = `

`\n for (let hue of CP1) {\n content += `

${chroma(hue).luminance().toFixed(2)}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`deuteranopia simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"{\n let content = `

`\n for (let hue of CP1) {\n content += `

${Grains[CP1.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md` Making weak layers really pop out. New snow is visible.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"CP3 = CIT.split(', ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"CIT = \"#ee3a1d, #4678e8, #fff07a, #fffbae, #ffe7f0, #e4dcf4, #c6eeff, #ecffe3, #d9ffcf, #c8f9e6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"CP7 = CIS.split(', ')","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"CIS = \"#ff0000, #4690ff, #dbffbc, #c1ffa4, #ffe7f0, #e4dcf4, #c6eeff, #f6f0b3, #fffbd4, #ffe3c4\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"CP2 = CIP.split(\", \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"CIP = \"#ee3a1d, #4678e8, #ffde00, #f1f501, #ffccd9, #dacef4, #b2edff, #addd8e, #d5ebb5, #a3ddbb\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof using = select({\n options: [\"CP1\", \"CP2\", \"CP3\", \"CP4\", \"CP5\", \"CP6\", \"CP7\", \"CP9\"],\n title: \"Choose Color Palette\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"embed({\n $schema: \"https://vega.github.io/schema/vega-lite/v4.json\",\n data: {values: datas},\n mark: \"bar\",\n width: 750,\n height: 600,\n encoding: {\n x: {type: \"nominal\",\n field: \"vstation_id\",\n sort: {op: \"sum\", field: \"thickness\"},\n axis: {labels: false}},\n y: {aggregate: \"sum\",\n type: \"quantitative\",\n field: \"thickness\",\n stack: true\n },\n detail: {type: \"ordinal\",\n timeUnit: \"yearmonthdate\",\n field: \"deposition_date\",\n sort: \"descending\"},\n color: {type: \"nominal\",\n field: \"Grain_type\",\n scale: {domain: Grains,\n range: chooser}},\n order: {type: \"ordinal\",\n field: \"deposition_date\"}\n \n }\n \n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"function paletteToXML(colors, pName) {\n var xml =\n '\\n';\n for (var i = 0; i < colors.length; i++) {\n xml = xml + '' + colors[i].trim() + '\\n';\n }\n xml = xml + '';\n return xml;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"paletteToXML(CP7, \"GrainsGreen\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md` # Development notes: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"deut(hexRgb('#cd2222cc', {format: 'array'}).slice(0, 3))","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`

\nFigure 1. \"The results of an experiment in which subjects were asked to name 210 colors produced \non a computer monitor. Outlined regions show the colors that were given the\nsame name with better than 75% probability.\"\n\nWare, Colin. Information Visualization : Perception for Design, Elsevier Science & Technology, 2012. ProQuest Ebook Central, https://ebookcentral-proquest-com.proxy.lib.sfu.ca/lib/sfu-ebooks/detail.action?docID=892223.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`

\nFigure 2. \"(a) The triangle represents the gamut of colors obtained using a computer \nmonitor plotted in CIE chromaticity coordinates. The contours show perceptually \ndetermined equal-saturation contours.(b) Equal-saturation contours created using the\nHSV colorspace,also plotted in chromaticity coordinates\"\n\nWare, Colin. Information Visualization : Perception for Design, Elsevier Science & Technology, 2012. ProQuest Ebook Central, https://ebookcentral-proquest-com.proxy.lib.sfu.ca/lib/sfu-ebooks/detail.action?docID=892223.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"deut = require('deuteranopia')","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"hexRgb = import(\"https://unpkg.com/hex-rgb@5.0.0/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md` CP1 Differentiates Thin layers primarily using both saturation, the rest are designed to be distinguishable by hue, and finally `","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"Grains = [\"SH\", \"DH\", \"DF\", \"PP\", \"RG\", \"FCxr\", \"FC\", \"MFcr\", \"MF\", \"IF\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md` This is the old palette`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md` CP3 focuses on making thin layers fall into dark blue range. FC is analagous to DH, everything else is roughly yellow-gray while still being differentiable in normal color vision.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"CP4 =[\"#ff00ff\" , \"#0000ff\", \"#e2ffd1\", \"#b8fea8\", \"#ff9ea4\", \"#f7b6d2\", \"#aec7e8\", \"#ffbb78\", \"#dbdb8d\", \"#c49c94\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"{\n let content = `

`\n for (let hue of CP4) {\n content += `

${Grains[CP4.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"CP5 = [\"#a50026\", \"#00aa00\", \"#c6dbef\",\"#9ecae1\", \"#ffffcc\",\"#ffff81\", \"#b8fea8\", \"#decbe4\",\"#fddaec\",\"#fbb4ae\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"{\n let content = `

`\n for (let hue of CP5) {\n content += `

${Grains[CP5.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"CP6 = [\"#e31a1c\", \"#6a3d9a\", \"#deebf7\",\"#c6dbef\", \"#e5f5e0\",\"#c7e9c0\", \"#e7e1ef\", \"#ffffcc\",\"#ffeda0\",\"#fed976\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"{\n let content = `

`\n for (let hue of CP6) {\n content += `

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md` # Test Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"{\n let content = `

`\n for (let hue of CP5) {\n content += `

${Grains[CP5.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md` iteration of previous palette`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"{\n let content = `

`\n for (let hue of CP4) {\n content += `

${Grains[CP4.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"{\n let content = `

`\n for (let hue of CP6) {\n content += `

${Grains[CP6.indexOf(hue)]}

`\n }\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md` There has to be extreme contrast between new snow and persistent weak layers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"import {select, slider, textarea} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"chooser = {\n switch (using) {\n case \"CP1\":\n return CP1;\n case \"CP2\":\n return CP2;\n case \"CP3\":\n return CP3;\n case \"CP4\":\n return CP4;\n case \"CP5\":\n return CP5;\n case \"CP6\":\n return CP6;\n case \"CP7\":\n return CP7;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"data = d3.csv(\n \"https://gist.githubusercontent.com/StanisNowak/61750f96383ef9df5b0a507e55f9f0d3/raw/c23b3c6025755a66cb9de098172249f73322dbe5/Profilesummary.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"datas = data.map(d => ({\n thickness: +d.thickness,\n vstation_id: d.vstation_id,\n Grain_type: d[\"Grain type\"],\n deposition_date: d[\"deposition_date (copy)\"]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"d3.timeParse(\"%b %e\")(\"jan 16\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"embed = require(\"vega-embed@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}