2b:null 2c:["$","title",null,{"children":"HSV and HSL Color Models | Sumant Pattanaik | Observable"}] 31:T629,{ const height = width/2; const boxSize = Math.PI*height/(1.6*nColors); const rad = height/2 - boxSize/1.5; const svg = d3.create("svg") //.style("display", "block") //.attr("viewBox", [0, 0, 400, 400]) .attr("width", 2*height) .attr("height", height); const outerRad = rad+boxSize/2; const innerRad = rad-boxSize/2; const arcGenerator = d3.arc() .innerRadius(innerRad) .outerRadius(outerRad) .padAngle(.02) .padRadius(outerRad) .cornerRadius(5); const colorWheel = svg.append("g") .attr("transform",`translate(${height/2},${height/2})`); colorWheel.selectAll('path') .data(genArcData(nColors, orientation==="ccw")) .join('path') .attr('d', arcGenerator) .style("fill",d=>hsl_hsv_colorWheelColor(d.h)) .style("stroke","black") colorWheel.append("text") .text("HSL/HSV Color Wheel") .style("text-anchor", "middle") .style("alignment-baseline", "middle"); /*const data = d3.range(nColors).map(d=>[d*360/nColors,rad*Math.sin(d*angle),-rad*Math.cos(d*angle)]); function drawRects(g,data){ g.selectAll("rect") .data(data) .join("rect") .attr("x",-boxSize/2) .attr("y",-boxSize/2) .attr("width",boxSize) .attr("height",boxSize) .attr("transform",d=>(`translate(${d[1]},${d[2]})rotate(${d[0]})`)) .style("fill",function(d,i){return d3.hsl(d[0],1,0.5).formatHex();}) .style("stroke","black"); }*/ return svg.node(); }32:T73c,{ const hue = [degree, degree+180]; const node = html`

`; const div = d3.select(node); const table = div.append("table"); 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) .style("text-align", "center"); table.selectAll(".row") .data(valueData) .join("tr") .attr("class", "row") .each(drawRow); function drawRow(value){ const row = d3.select(this); const cells = row.selectAll(".cell") .data(saturationData.map(function(saturation,i){ //return d; if (i==0)return value; else if (modelButton == "hsl") return ((value>0.5 && saturation>2*(1-value))||(saturation>2*value))?"#FFFFFF":d3.hsl(hue[(i < midPoint)?0:1],saturation,value).formatHex(); else return (saturation>value)?"#FFFFFF":d3.hsv(hue[(i < midPoint)?0:1],saturation,value).formatHex(); }) ) .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:T678,{ const height = width/3; const rad = height/2.1 ; const svg = d3.create("svg") //.style("display", "block") //.attr("viewBox", [0, 0, 400, 400]) .attr("width", 3*height) .attr("height", height); var innerRad, outerRad; const arcGenerator = d3.arc() //.padAngle(.02) //.padRadius(outerRad) //.cornerRadius(5); svg.selectAll("g") .data([0.3, 0.5, 0.7]) .join("g") .attr("transform",(d,i)=>`translate(${height/2+i*height},${height/2})`) .selectAll('g') .data(function(d){ const nBands = Math.round(6*2*((d <= 0.5)? d : (1-d))); const newRad = Math.round(rad*2*((d <= 0.5)? d : (1-d))) const bandWidth = newRad/nBands; const saturation = 2*((d <= 0.5)? d : (1-d)); const delta = saturation/(nBands-1); return d3.range(nBands-1).map(i=>({s:(saturation-i*delta),l:d, bandWidth:bandWidth, rad: newRad})); }) .join('g') .each(drawWheel); function drawWheel(sl,i){ const g = d3.select(this); let R = sl.rad - i*sl.bandWidth; outerRad = R; innerRad = R-sl.bandWidth; arcGenerator.innerRadius(innerRad) .outerRadius(outerRad) g.selectAll('path') .data(genArcData(nColors, orientation==="ccw")) .join('path') .attr('d', arcGenerator) .style("fill",function(d,i){return d3.hsl(d.h,sl.s,sl.l).formatHex();}) .style("stroke","black"); g.append("circle") .attr('r',sl.bandWidth) .style("fill",d3.hsl(0,0,sl.l).formatHex()) .style("stroke","black"); } return svg.node(); }34:[] 2f:{"id":"d87d7eea7e1cf70a","slug":"hsv-and-hsl-color-models","title":"HSV and HSL Color Models","thumbnail":"f17acedfe79fb33abda1c5e1f194cb083326ad0a2b8b811453dddb68667d6670","access_level":"public","create_time":"$D2020-05-14T10:21:19.952Z","update_time":"$D2020-12-30T11:54:51.409Z","view_time":null,"first_public_time":"$D2020-05-14T21:56:08.454Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":596,"publish_version":596,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"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,"subscribed":null,"forks":0,"collection":{"id":"0cc4112516b25655","slug":"color","title":"Color","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"title":"HSV and HSL Color Models","cells":[{"id":0,"value":"md`# HSV and HSL Color Models`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"md`### Color Wheel.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"viewof orientation = orientationButton();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"viewof modelButton = radioButton();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"md`A vertical cross section of the color model through Hue values at ${degree}^°and ${degree+180}^°. Saturation along Horizontal axis and ${(modelButton == \"hsl\")?\"Lightness\":\"Value\"} along Vertical axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"viewof degree = {\n const hues = d3.range(0, 181, 5);\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"},{"id":386,"value":"md`Horizontal Cross Section of the HSL color model at lightness values 0.3, 0.5 and 0.7 respectively.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"nColors = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"genArcData = (n, ccw=true)=>{\n const angle = (ccw?-1:1)*2*Math.PI/n;\n const offset = Math.PI/2.\n return d3.range(n).map(d=>({\n startAngle:offset+(d-0.5)*angle, \n endAngle:offset+(d+0.5)*angle,\n h: d*360/n\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"hsl_hsv_colorWheelColor(240)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"hsl_hsv_colorWheelColor = function(h){return d3.hsl(h,1,0.5).formatHex();}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"orientationButton = function (){\n return radio({\n title: 'Color Model Orientation',\n //description: 'Choose Orientation',\n options: [\n {label:\"Clockwise\",value:\"cw\"},\n {label:\"Counterclockwise\",value:\"ccw\"},\n ],\n value: \"ccw\"\n});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"radioButton = function (){\n return radio({\n title: 'Color Model',\n description: 'Choose the model:',\n options: [\n {label:\"HSV\",value:\"hsv\"},\n {label:\"HSL\",value:\"hsl\"},\n ],\n value: \"hsv\"\n});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"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-hsv\", \"d3-simple-slider@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"