2c:null 2d:["$","title",null,{"children":"HCL color model | Sumant Pattanaik | Observable"}] 32:T722,{ const hue = [degree, degree+180]; const node = html``; const div = d3.select(node); const table = div.append("table"); //The value of l is typically in the range [0, 100], c is typically in [0, 150], const saturationData = ["", 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]; const valueData = [1,0.9,0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0]; const midPoint = Math.floor(saturationData.length/2); const boxSize = width/(1.2*saturationData.length); table.append("tr") .selectAll(".headerCell") .data(saturationData) .enter().append("td") .attr("class", "headerCell") .text(d => (d=="")?d:(d*maxChroma)) .style("text-align", "center"); table.selectAll(".row") .data(valueData) .join("tr") .attr("class", "row") .each(drawRow); function drawRow(lightness){ const row = d3.select(this); const data = saturationData.map(function(chroma,i){ if (i==0)return lightness*maxLightness; else{ const hcl = d3.hcl(hue[(i < midPoint)?0:1],chroma*maxChroma,lightness*maxLightness); if (hcl.displayable())return hcl.formatHex(); else return "#ffffff"; }; }); const cells = row.selectAll(".cell") .data(data) .enter().append("td") .attr("class", "cell") .each(drawCol) } function drawCol(d,i){ const col = d3.select(this); const div = col.append('div'); if (i==0) div.attr("class","label") .text(d); else{ div.attr("class","bar") .style('width', (boxSize + 'px')) .style('background-color',d) .style('border-style', (i == midPoint)?'solid':'none') .style('border-color', 'WhiteSmoke'); } } return html`${node}`; }33:T6c2,{ const nHues = 36; const nBands = 12; const height = width/2; const rad = height/1.5 ; const bandWidth = rad/nBands; const svg = d3.create("svg") .attr("width", height*1.2) .attr("height", height); var innerRad, outerRad; const arcGenerator = d3.arc() /* const angle = 2*Math.PI/nHues; const arcData = d3.range(nHues).map(d=>({ startAngle:(d-0.5)*angle, endAngle:(d+0.5)*angle, h: d*360/nHues })); */ const arcData = genArcData(nHues,(orientation=="ccw")); svg.append("g") .attr("transform",`translate(${height/1.5},${height/1.8})`) .selectAll('g') .data(function(){ const delta = 1/(nBands-1); return d3.range(nBands-1).map(i=>((1-i*delta)*maxChroma)); }) .join('g') .each(drawWheel); function drawWheel(chroma,i){ const g = d3.select(this); let R = rad - i*bandWidth; outerRad = R; innerRad = R-bandWidth; arcGenerator.innerRadius(innerRad) .outerRadius(outerRad) g.selectAll('path') .data(arcData) .join('path') .attr('d', arcGenerator) .style("fill",function(d,i){ const hcl = d3.hcl(d.h,chroma,Lightness); if (hcl.displayable())return hcl.formatHex(); else return "#ffffff"; }) .style("stroke",function(d,i){ const hcl = d3.hcl(d.h,chroma,Lightness); if (hcl.displayable())return "black"; else return "none"; }) g.append("circle") .attr('r',bandWidth) .style("fill",d3.hcl(0,0,Lightness).formatHex()) .style("stroke","black"); } return svg.node(); }34:T40c,colorWheel(12,"HCL Color Wheel",function(h){ // Find the HCL color for h with max saturation. let hcl_color = undefined, rgbHex = undefined; for (let chroma = maxChroma; chroma > 0 ; chroma-=13){ for (let lightness = maxLightness; lightness >0 ; lightness-=10){ hcl_color = d3.hcl(h,chroma,lightness); if (hcl_color.displayable()){ rgbHex = hcl_color.formatHex(); break; } } if (rgbHex) break; } if (rgbHex == undefined) return { rgbHex: "#000000", hsl: `HSL(undefined)`, hcl: `HCL(undefined)`, rgb: `RGB(undefined)` } const hsl_color = d3.hsl(hcl_color); const rgb_color = d3.rgb(hcl_color); return { rgbHex: rgbHex, hsl: `HSL(${hsl_color.h.toFixed(0)},${((hsl_color.s)*100).toFixed(0)},${(hsl_color.l*100).toFixed(0)})`, hcl: `HCL(${hcl_color.h.toFixed(0)},${hcl_color.c.toFixed(0)},${hcl_color.l.toFixed(0)})`, rgb: `RGB(${rgb_color.r.toFixed(0)},${rgb_color.g.toFixed(0)},${rgb_color.b.toFixed(0)})` } })35:Tf3f,colorWheel = function(nColors,centerText,f){ const height = width/1.5; const colorWheelHeight = height*0.8; const sectionSize = colorWheelHeight/8; const rad = colorWheelHeight/2 - sectionSize/2; const svg = d3.create("svg") //.style("display", "block") //.attr("viewBox", [0, 0, 400, 400]) .attr("width", height) .attr("height", height); const outerRad = rad+sectionSize/2; const innerRad = rad-sectionSize/2; const arcGenerator = d3.arc() .innerRadius(innerRad) .outerRadius(outerRad) .padAngle(.02) //.padRadius(outerRad) //.cornerRadius(5); const arcData = genArcData(nColors,(orientation=="ccw")).map((d,i)=>({...d,colors:f(d.h)})); const colorWheel = svg.append("g") .attr("transform",`translate(${height/2},${height/2})`); colorWheel.append("text") .text(centerText) .style("text-anchor", "middle") .style("alignment-baseline", "middle"); colorWheel.selectAll('path') .data(arcData) .join('path') .attr('d', arcGenerator) .style("fill",d=>d.colors.rgbHex) .style("stroke","black") .each(function(d,i){ // Adapted from http://bl.ocks.org/nbremer/b603c3e0f7a74794da87 //Search pattern for everything between the start and the first capital L const firstArcSection = /(^.+?)L/; //Grab everything up to the first Line statement and then //Replace all the comma's so that IE can handle it let newArc = firstArcSection.exec( d3.select(this).attr("d") )[1] newArc = newArc.replace(/,/g , " "); //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) //flip the end and start position //const angle = (orientation=="ccw")?(-d.endAngle):d.endAngle; if (d.endAngle > 90 * Math.PI/180 && d.endAngle < 3*90 * Math.PI/180) { const startLoc = /M(.*?)A/, //Everything between the first capital M and first capital A middleLoc = /A(.*?)0 0 1/, //Everything between the first capital A and 0 0 1 endLoc = /0 0 1 (.*?)$/; //Everything between the first 0 0 1 and the end of the string (denoted by $) //Flip the direction of the arc by switching the start en end point (and sweep flag) //of those elements that are below the horizontal line const newStart = endLoc.exec( newArc )[1]; const newEnd = startLoc.exec( newArc )[1]; const middleSec = middleLoc.exec( newArc )[1]; //Build up the new arc notation, set the sweep-flag to 0 newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; }//if //Create a new invisible arc that the text can flow along svg.append("path") .attr("class", "hiddenDonutArcs") .attr("id", "donutArc"+i) .attr("d", newArc) .style("fill", "none"); }); //Append the label names on the outside colorWheel.selectAll('g') .data(['hsl','rgb','hcl']) .join('g') .selectAll("Text") .data(function(d,i){return arcData.map(function(arcD){const newD = Object.assign({},arcD); newD.type=d; newD.index=i;return newD;})}) .join("text") //.attr("class", "donutText") //Move the labels below the arcs for those slices with an end angle greater than 90 degrees .attr("dy", d=> { //const angle = (orientation=="ccw")?(-d.endAngle):d.endAngle; return (d.endAngle > 90 * Math.PI/180 && d.endAngle < 3*90 * Math.PI/180)? ((d.index+1)*18) :(-d.index*18-11); }) .append("textPath") .attr("startOffset","50%") .style("text-anchor","middle") .attr("xlink:href",function(d,i){return "#donutArc"+i;}) .text(d=>d.colors[d.type]); return svg.node(); }36:[] 30:{"id":"06825aaada8f1e12","slug":"hcl-color-model","title":"HCL color model","thumbnail":"e1cad97cca299aa71d87be3561d11dcd36de958ce723e59ac58cd28dabcff97d","access_level":"public","create_time":"$D2020-05-20T01:04:01.418Z","update_time":"$D2020-11-12T21:01:47.245Z","view_time":null,"first_public_time":"$D2020-05-20T02:24:05.309Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024","bio":""},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"bio":""}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"0cc4112516b25655","slug":"color","title":"Color","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"titling":"auto","title":"HCL color model","cells":[{"id":0,"value":"md`# HCL color model`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`A vertical cross section of the color model through Hue values at ${degree}^°and ${degree+180}^°. Chroma along Horizontal axis and Lightness along Vertical axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`Radial Angle Slider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof degree = {\n const hues = d3.range(0, 181, 10);\n const slider = d3.sliderBottom()\n .min(0)\n .max(180)\n .marks(hues)\n .width(width)\n .tickValues(hues)\n .default(45)\n .on(\"onchange\", () => svg.dispatch(\"input\"));\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-20, -20, width+40, 60])\n .attr(\"width\", width)\n .attr(\"height\", 60)\n .call(slider);\n\n return Object.defineProperty(\n svg.node(), \n \"value\", \n {get: () => slider.value()}\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`A Horizonta cross section of the HCL color model through Lightness value at ${Math.round(Lightness)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`Lightness Slider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof Lightness = {\n const lightness = d3.range(0, maxLightness+1, 5);\n const slider = d3.sliderBottom()\n .min(0)\n .max(maxLightness)\n .marks(lightness)\n .width(width)\n .tickValues(lightness)\n .default(55)\n .on(\"onchange\", () => svg.dispatch(\"input\"));\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-20, -20, width+40, 60])\n .attr(\"width\", width)\n .attr(\"height\", 60)\n .call(slider);\n\n return Object.defineProperty(\n svg.node(), \n \"value\", \n {get: () => slider.value()}\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof orientation = orientationButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`HSL Color wheel along with HSL, RGB and HCL coordinates of the color chips.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"colorWheel(12,\"HSL/HSV Color Wheel\",function(h){\n const hsl_color = d3.hsl(h,1,0.5); \n const hcl_color = d3.hcl(hsl_color);\n const rgb_color = d3.rgb(hsl_color);\n return {\n rgbHex: hsl_color.formatHex(),\n hsl: `HSL(${hsl_color.h.toFixed(0)},${((hsl_color.s)*100).toFixed(0)},${(hsl_color.l*100).toFixed(0)})`,\n hcl: `HCL(${hcl_color.h.toFixed(0)},${hcl_color.c.toFixed(0)},${hcl_color.l.toFixed(0)})`,\n rgb: `RGB(${rgb_color.r.toFixed(0)},${rgb_color.g.toFixed(0)},${rgb_color.b.toFixed(0)})`\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`HCL Color Wheel`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"maxChroma = 130;\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"maxLightness = 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require.alias({\n \"d3-array\": \"d3@5\",\n \"d3-axis\": \"d3@5\",\n \"d3-dispatch\": \"d3@5\",\n \"d3-drag\": \"d3@5\",\n \"d3-ease\": \"d3@5\",\n \"d3-scale\": \"d3@5\",\n \"d3-selection\": \"d3@5\",\n \"d3-transition\": \"d3@5\"\n})(\"d3@5\", \"d3-simple-slider@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"import {genArcData, orientationButton} from \"@spattana/hsv-and-hsl-color-models\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"