2e:null 2f:["$","title",null,{"children":"Color Blind test for hue-rotated D3 colorschemes | wolfiex | Observable"}] 34:T96e,filters = new Map( ` ` .split('') .map(d => [(d.match(/id=\"(\w+)"/) || [0, undefined])[1], d + '']) //.slice(1, 4) )35:[] 32:{"id":"48147ede65dd6a24","slug":"color-blind-test-for-hue-rotated-d3-colorschemes","title":"Color Blind test for hue-rotated D3 colorschemes","thumbnail":"a86bfef06d607b5be7d0f82b9f9047e6c9ab39dd486da873df6a04631b2a9a40","access_level":"public","create_time":"$D2020-06-04T16:02:40.090Z","update_time":"$D2020-06-04T18:36:47.437Z","view_time":null,"first_public_time":"$D2020-06-04T18:33:09.999Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"5ac3a182adb31463","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":"starter_2024"},"version":209,"publish_version":209,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null}],"members":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Color Blind test for hue-rotated D3 colorschemes","cells":[{"id":0,"value":"md`# Color Blind test for hue-rotated D3 colorschemes\n\nDoes hue-rotating a colour scheme retains its ability to be colour-blind friendly.\n\nTo see all compatible schemes view https://github.com/d3/d3-scale-chromatic\n\n\n## Select a colorscheme. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"scheme = d3.interpolateMagma //d3.interpolateViridis etc.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`## Plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"{\n var p = d3.select('#plot');\n p.node().innerHTML = '';\n\n gen();\n\n [...filters.keys()].forEach(d => gen(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 110","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"gen = function(flt) {\n const svg = d3\n .select('#plot')\n .append('div')\n .attr('width', width)\n .attr('height', height);\n\n svg.append('p').text((flt || 'Normal').toUpperCase());\n\n // const color = d3.interpolateCividis;\n const color = scheme;\n\n const num = parseInt(width / 21) - 1;\n d3.range(num).forEach(d => {\n renderColorBar(\n svg,\n color,\n 21 * num + 1,\n 0,\n 20,\n height,\n (d / num) * 360,\n filters.get(flt)\n ).style(\"filter\", `hue-rotate(${(d / num) * 360}deg)url(#${flt})`);\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function renderColorBar(svg, color, x, y, width, height, rotate = 0, cf = '') {\n const colorBar = svg\n .append('svg')\n .attr('width', width)\n .attr('height', height)\n //.style('filter', `hue-rotate(${rotate}deg)`)\n .style('transform', `translate(${x}, ${y})`);\n\n colorBar.append('defs').node().innerHTML = cf;\n\n const colorScale = d3\n .scaleLinear()\n .domain([height, 0])\n .range([0, 1]);\n\n for (let y = 0; y < height; ++y) {\n colorBar\n .append('rect')\n .attr('x', 0)\n .attr('y', y)\n .attr('width', 20 - 1)\n .attr('height', 1)\n .attr('fill', color(colorScale(y)))\n .attr('stroke', 'none');\n }\n\n return colorBar;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"[...filters.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"