30:T177e,{ const settings = { slices: 7, hole_ratio: 0.2, background_color: "#FFF", borders: 5 } const size = width / settings.slices const svg = d3.select(DOM.svg(width, width)) .attr("viewBox", `${-width/2} ${-width/2} ${width} ${width}`) .style("max-width", "100%") .style("height", "auto") svg.append("rect") .attr("x", -width/2) .attr("y", -width/2) .attr("width", width) .attr("height", width) .attr("fill", settings.background_color) svg.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("fill", "#777") .attr("r", settings.hole_ratio * width/2) const cell = svg.append("g") .selectAll("g") .data(d3.range(settings.slices)) .enter().append("g") .attr("transform", s => `rotate(${(1-s)*360/settings.slices})`); const slice = d3.scaleQuantize() .domain([0, 360]) .range(d3.range(settings.slices)) const slice_half_angle = Math.PI/settings.slices cell.append("path") .attr("d", `M ${settings.hole_ratio * width/2 * Math.cos(-Math.PI/2 + slice_half_angle)} ${settings.hole_ratio * width/2 * Math.sin(-Math.PI/2 + slice_half_angle)}` +`L ${width/2 * Math.cos(-Math.PI/2 + slice_half_angle)} ${width/2 * Math.sin(-Math.PI/2 + slice_half_angle)}` +`A ${width/2} ${width/2} 0 0 0 ${width/2 * Math.cos(-Math.PI/2 - slice_half_angle)} ${width/2 * Math.sin(-Math.PI/2 - slice_half_angle)} ` +`L ${settings.hole_ratio * width/2 * Math.cos(-Math.PI/2 - slice_half_angle)} ${settings.hole_ratio * width/2 * Math.sin(-Math.PI/2 - slice_half_angle)}` +`A ${settings.hole_ratio * width/2} ${settings.hole_ratio * width/2} 0 0 1 ${settings.hole_ratio * width/2 * Math.cos(-Math.PI/2 + slice_half_angle)} ${settings.hole_ratio * width/2 * Math.sin(-Math.PI/2 + slice_half_angle)}` +`Z` ) .attr("fill", s => d3.hcl(d3.mean(slice.invertExtent(s)), 5, 50).toString()) // .attr("fill", "#777") .attr("stroke-width", settings.borders) .attr("stroke", settings.background_color) const r = Math.sqrt(0.1 * width * width / colors.length / Math.PI) const r_minus = Math.max(2, r - 2) const colors_layout = filtered_colors.slice(0) const maxc = Math.max(110, 10+d3.max(colors_layout, d => d.hcl.c)) const angle = d3.scaleLinear() .domain([0, 100]) .range([-Math.PI/2+slice_half_angle*0.9, -Math.PI/2-slice_half_angle*0.9]) const radius = d3.scaleLinear() .domain([0, maxc]) .range([settings.hole_ratio * width/2 + r/2 + settings.borders, width/2 - r/2 - settings.borders]) colors_layout.forEach(d => { d.slice = slice(d.hcl.h) d.r = radius(d.hcl.c) d.a = angle(d.hcl.l) d.x = d.r * Math.cos(d.a) d.y = d.r * Math.sin(d.a) }) cell.each(function(s) { const colors_slice = colors_layout.filter(d => d.slice == s) const color = d3.select(this).selectAll("circle.dot") .data(colors_slice) .enter().append("circle") .attr("class", "dot") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => d.txt) .attr("r", r_minus) // Annotations d3.select(this).append("line") .attr("x1", 0) .attr("y1", -settings.borders/2 - settings.hole_ratio * width/2) .attr("x2", 0) .attr("y2", -width/2 + settings.borders/2) .attr("stroke", "#000") d3.select(this).append("text") .attr("x", 0) .attr("y", 3) .attr("fill", "#777") .attr("stroke-width", "5") .attr("stroke", "#777") .attr("text-anchor", "start") .attr("font-weight", "normal") .attr("font-family", "sans-serif") .attr('font-size', 10) .attr("transform", `translate(0 ${(-settings.hole_ratio-0.03) * width/2}) rotate(-90)`) .text("MIDDLE GRAY") d3.select(this).append("text") .attr("x", 0) .attr("y", 3) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-weight", "normal") .attr("font-family", "sans-serif") .attr('font-size', 10) .attr("transform", `translate(0 ${(-settings.hole_ratio-0.03) * width/2}) rotate(-90)`) .text("MIDDLE GRAY") // Anti collision const ticked = function() { color .attr("cx", d => d.x) .attr("cy", d => d.y) } const forceSimulation = function(items) { return d3.forceSimulation(items) .force("collide", d3.forceCollide().radius(r)) } const simulation = forceSimulation(colors_slice).on("tick", ticked) }) // Global annotation if (colors_layout.length > 0) { svg.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", radius(100)) .attr("fill", "none") .attr("stroke", "rgba(255, 255, 255, 0.3)") svg.append("text") .attr("x", 0) .attr("y", -radius(100) + 4) .attr("fill", "#777") .attr("stroke-width", "5") .attr("stroke", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr('font-size', 10) .text("CHROMA 100") .attr("transform", `rotate(${90/settings.slices})`) svg.append("text") .attr("x", 0) .attr("y", -radius(100) + 4) .attr("fill", "rgba(255, 255, 255, 0.6)") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr('font-size', 10) .text("CHROMA 100") .attr("transform", `rotate(${90/settings.slices})`) } svg.append("text") .attr("x", 0) .attr("y", 0) .attr("fill", "rgba(255, 255, 255, 0.8)") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr('font-size', 36) .text(`${colors_layout.length}`) svg.append("text") .attr("x", 0) .attr("y", 16) .attr("fill", "rgba(255, 255, 255, 0.8)") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr('font-size', 12) .text(`COLOR POINTS`) return svg.node() }31:T9fa,// Based on https://www.jasondavies.com/poisson-disc/ function poissonDiscSampler_CIELAB(radius) { let K = 100 // maximum number of samples before rejection let radius2 = radius * radius let radius3 = radius * radius * radius let R = 7 * radius3 let cellSize = radius / Math.sqrt(3) let gridXSize = Math.ceil(100 / cellSize) // L let gridYSize = Math.ceil(320 / cellSize) // A let gridZSize = Math.ceil(320 / cellSize) // B let grid = new Array(gridXSize * gridYSize * gridZSize) let queue = [] let queueSize = 0 let sampleSize = 0 return function() { if (!sampleSize) return sample(100, 160, 160) // Pick a random existing sample and remove it from the queue. while (queueSize) { let i = Math.random() * queueSize | 0 let s = queue[i] // Make a new candidate between [radius, 2 * radius] from the existing sample. for (let j = 0; j < K; ++j) { let a1 = 2 * Math.PI * Math.random() let a2 = Math.acos(2*Math.random() - 1) let r = Math.pow(radius3 + Math.random() * R, 1/3) let x = s[0] + r * Math.cos(a1) * Math.sin(a2) let y = s[1] + r * Math.sin(a1) * Math.sin(a2) let z = s[2] + r * Math.cos(a2) // Reject candidates that are outside the allowed extent, // or closer than 2 * radius to any existing sample. if (checkLab(d3.lab(x, y-160, z-160), 1) && far(x, y, z)) return sample(x, y, z) } queue[i] = queue[--queueSize] queue.length = queueSize } } function far(x, y, z) { let i = x / cellSize | 0 let j = y / cellSize | 0 let k = z / cellSize | 0 let i0 = Math.max(i - 2, 0) let j0 = Math.max(j - 2, 0) let k0 = Math.max(k - 2, 0) let i1 = Math.min(i + 3, gridXSize) let j1 = Math.min(j + 3, gridYSize) let k1 = Math.min(k + 3, gridZSize) for (k = k0; k < k1; ++k) { let o2 = k * gridYSize * gridXSize for (j = j0; j < j1; ++j) { let o1 = j * gridXSize for (i = i0; i < i1; ++i) { let s = grid[o2 + o1 + i] if (s) { let dx = s[0] - x let dy = s[1] - y let dz = s[2] - z if (dx * dx + dy * dy + dz * dz < radius2) return false } } } } return true } function sample(x, y, z) { let s = [x, y, z] queue.push(s) grid[gridYSize * gridXSize * (z / cellSize | 0) + gridXSize * (y / cellSize | 0) + (x / cellSize | 0)] = s ++sampleSize ++queueSize return d3.lab(s[0], s[1]-160, s[2]-160) } }32:[] 2e:{"title":"Filtering colors","cells":[{"id":0,"value":"md`# Filtering colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`We build a uniform sampling of all colors by [Poisson-disc distribution on CIELAB](https://beta.observablehq.com/@jacomyma/cielab-uniform-sampling) and we visualize as a [\"fan of hue\"](https://beta.observablehq.com/@jacomyma/the-shapes-of-all-colors). Filtering those colors by hue, chroma and lightness produces interesting visual results.\n\nThe *color resolution* slider below allows to generate a different number of colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof colorResolution = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"colors = sampleCIELAB(100/colorResolution).map(color => {\n const d = {hcl:{}, lab:{}}\n const lab = d3.lab(color)\n const hcl = d3.hcl(color)\n d.hcl.h = hcl.h || 0\n d.hcl.c = hcl.c\n d.hcl.l = hcl.l\n d.lab.l = lab.l\n d.lab.a = lab.a\n d.lab.b = lab.b\n d.txt = color.toString()\n return d\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof HUE_minimum = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof HUE_maximum = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof CHROMA_minimum = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof CHROMA_maximum = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof LIGHTNESS_minimum = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof LIGHTNESS_maximum = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"filtered_colors = colors.filter(d => {\n let hPass\n if (HUE_minimum <= HUE_maximum) {\n hPass = HUE_minimum <= d.hcl.h && d.hcl.h < HUE_maximum\n } else {\n hPass = HUE_maximum <= d.hcl.h && d.hcl.h < HUE_minimum\n }\n \n let cPass\n if (CHROMA_minimum <= CHROMA_maximum) {\n cPass = CHROMA_minimum <= d.hcl.c && d.hcl.c < CHROMA_maximum\n } else {\n cPass = CHROMA_maximum <= d.hcl.c && d.hcl.c < CHROMA_minimum\n }\n\n let lPass\n if (LIGHTNESS_minimum <= LIGHTNESS_maximum) {\n lPass = LIGHTNESS_minimum <= d.hcl.l && d.hcl.l < LIGHTNESS_maximum\n } else {\n lPass = LIGHTNESS_maximum <= d.hcl.l && d.hcl.l < LIGHTNESS_minimum\n }\n \n return hPass && cPass & lPass\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`By design hue selects slices, chroma selects radius, and lightness selects a sub-slice of each slice. The nice part is that it allows you to *feel* the relations between properties of color and concepts like hue or lightness. If you remove dark colors, you will see that you remove many blues, and if you remove light colors, you remove many yellows. You can see that in this particular visualization, but it is not so obvious. Manipulating the filters makes you understand the logic behind how we perceive colors. The filters and the visualization reinforce each other.\n\nA simple but important aspect is how many colors are left for a given filter setting. It matters to data visualization because the more colors you have in this chart, the more room you have for distinct colors (this is because we sampled all colors in a perceptively uniform way).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"function sampleCIELAB(colorDistance) {\n let sample = poissonDiscSampler_CIELAB(colorDistance)\n let samples = []\n let maximum = 10000\n while(maximum-->0) {\n let s = sample()\n if (!s) return samples\n samples.push(s)\n }\n return samples\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function checkLab(c0, precisionSquare){\n let lab0 = [c0.l, c0.a, c0.b]\n let c1 = d3.lab(c0.toString())\n let lab1 = [c1.l, c1.a, c1.b]\n let dSquare = (lab0[0]-lab1[0])*(lab0[0]-lab1[0])\n +(lab0[1]-lab1[1])*(lab0[1]-lab1[1])\n +(lab0[2]-lab1[2])*(lab0[2]-lab1[2])\n return dSquare < precisionSquare\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}