31:T10dd,viewof lesvg = { if (eval("typeof clusters") == 'undefined') { return; } var svg = d3.select(DOM.svg(600, 600)) .attr('style', 'border: 1px solid grey'); // Drawing the color circle var pi = Math.PI; var ro = pi / 2; const hist = svg.append("g"); var bc = Math.sqrt(clusters[0].vectorIds.length); var nbnr = clusters.length; var sw = 600 / 160; var mw = ~~(600/2); var mh = ~~(600/2); var l = ~~(sw * 6); var so = 1; //Symbol opacity var coef = 1.4; // Radius mag. coef. // Outer circle hist.append("circle") .attr("cx", 300) .attr("cy", 300) .attr("r", 298) .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "white"); hist.append("line") .attr("stroke", "black") .attr("stroke-width", 1) .attr("x1", 2) .attr("y1", 298) .attr("x2", 598) .attr("y2", 298); hist.append("line") .attr("stroke", "black") .attr("stroke-width", 1) .attr("x1", 298) .attr("y1", 2) .attr("x2", 298) .attr("y2", 598); if (axisLabels == "Yes") { hist.append("text") .text("<- Hue ->") .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("fill", "grey") .attr("transform", "translate(508, 80) rotate(48)"); switch (axisType) { case 'HLS': hist.append("text") .text("<- Lum. ->") .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("fill", "grey") .attr("text-anchor", "middle") .attr("transform", "translate(288,120) rotate(90)"); break; case 'HSL': hist.append("text") .text("<- Sat. ->") .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("fill", "grey") .attr("text-anchor", "middle") .attr("transform", "translate(288,120) rotate(90)"); break; } } var nbpc = mce; // Nb. of color to exclude (often background) for (var i = nbpc; i < nbnr; i++) { imre; if (clusters[i] == undefined) {continue;} var ce = clusters[i].centroid; switch (cs) { case "RGB" : var sk = rgb2hsv(ce.r, ce.g, ce.b); var circleColor = "rgb(" + ce.r + "," + ce.g + "," + ce.b + ")"; break; case "YUV" : var sl = yuv2rgb(ce.y, ce.u, ce.v); var sk = rgb2hsv(sl.r, sl.g, sl.b); var circleColor = HTMLColorFromRGB(sl); break; case "HSL" : var sk = ce; var circleColor = HTMLColorFromRGB(ahsv2rgb(ce)); break; case "CIELAB" : var sl = cielab2rgb(ce.L_star, ce.a_star, ce.b_star); var sk = rgb2hsv(sl.r, sl.g, sl.b); var circleColor = HTMLColorFromRGB(sl); break; case "CIELUV" : debugger; var sl = cieluv2rgb(ce.L_star, ce.u_star, ce.v_star); var sk = rgb2hsv(sl.r, sl.g, sl.b); var circleColor = HTMLColorFromRGB(sl); break; } switch (axisType) { case 'HSL': var h = sk.h; var s = sk.s; var v = sk.v * coef; break; case 'HLS': var h = sk.h; var s = sk.v; var v = sk.s * coef; break; } var ht = ((pi * 2) * h / 255) - ro; var va = clusters[i].vectorIds.length * zcc; var ra = ~~(Math.sqrt(va) * sw / bc); var x = ~~(s * Math.cos(ht)); var y = ~~(s * Math.sin(ht)); var cci = (sk.v < 186) ? "rgb(255,255,255)" : "rgb(24,24,24)"; var contourColor = 0; contour == "Yes" ? contourColor = cci :contourColor = circleColor; hist.append("circle") .attr("cx", mw + x) .attr("cy", mh + y) .attr("r", ra) .attr("fill", circleColor) .attr("fill-opacity", so) .attr("stroke", contourColor) .attr("stroke-width", 1); } return svg.node(); }32:T601,// JSON version of the palette clustersExport = { var e = Array(); switch (cs) { case "RGB" : for (var i=0; i< clusters.length; i++) { e.push({i: i, c: HTMLColorFromRGB(clusters[i].centroid),n: clusters[i].vectorIds.length, r: Math.floor(clusters[i].centroid.r), g: Math.floor(clusters[i].centroid.g), b: Math.floor(clusters[i].centroid.b)}); } break; case "YUV" : for (var i=0; i< clusters.length; i++) { var c = yuv2rgb(clusters[i].centroid.y, clusters[i].centroid.u, clusters[i].centroid.v); e.push({i: i, c: HTMLColorFromRGB(c),n: clusters[i].vectorIds.length, r: c.r, g: c.g, b: c.b}); } break; case "HSL" : for (var i=0; i< clusters.length; i++) { var c = ahsv2rgb(clusters[i].centroid); e.push({i: i, c: HTMLColorFromRGB(c),n: clusters[i].vectorIds.length, r: c.r, g: c.g, b: c.b}); } break; case "CIELAB" : for (var i=0; i< clusters.length; i++) { var c = cielab2rgb(clusters[i].centroid.L_star, clusters[i].centroid.a_star, clusters[i].centroid.b_star); e.push({i: i, c: HTMLColorFromRGB(c),n: clusters[i].vectorIds.length, r: c.r, g: c.g, b: c.b}); } break; case "CIELUV" : for (var i=0; i< clusters.length; i++) { var c = cieluv2rgb(clusters[i].centroid.L_star, clusters[i].centroid.u_star, clusters[i].centroid.v_star); e.push({i: i, c: HTMLColorFromRGB(c),n: clusters[i].vectorIds.length, r: c.r, g: c.g, b: c.b}); } break; } return e; }33:[{"id":"913ebe65a9e9c37a1e68cc65d4980686da9b34eac3c4b5b37e062f3f240fedf8d156feab0cbd5ca48c81e25b27d3f2e4343a6af053e3ab5edbfd0d2c5aa15fcd","href":"https://static.observableusercontent.com/files/913ebe65a9e9c37a1e68cc65d4980686da9b34eac3c4b5b37e062f3f240fedf8d156feab0cbd5ca48c81e25b27d3f2e4343a6af053e3ab5edbfd0d2c5aa15fcd","name":"2008avg.jpg","type":"image/jpeg","lastModified":1658229985894.727,"size":177023}] 2f:{"title":"Color abstract via multidim KMeans","cells":[{"id":0,"value":"# Color abstract via multidim KMeans","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"viewof imageSource = fileInput({\n initialValue: FileAttachment(\"2008avg.jpg\").blob(),\n accept: \"image/*\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"## 2D polar proportional symbols","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"viewof cs = Inputs.radio([\"RGB\", \"HSL\",\"YUV\",\"CIELAB\",\"CIELUV\"], {label: \"Color space\", value: \"HSL\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof nbcl = Inputs.range([2, 400], {value: 10, step: 10, label: \"Nb. of clusters\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof imre = Inputs.range([4, 500], {value: 104, step: 10, label: \"Sampling step\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof lumin = Inputs.range([0, 255], {value: 10, step: 1, label: \"Min. luminosity\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof axisType = Inputs.radio([\"HLS\", \"HSL\"], {label: \"Axis\", value: \"HLS\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof mce = Inputs.range([0, 10], {value: 1, step: 1, label: \"Main colors excluded\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof contour = Inputs.radio([\"Yes\", \"No\"], {label: \"Symb. stroke\", value: \"Yes\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof axisLabels = Inputs.radio([\"Yes\", \"No\"], {label: \"Axis labels\", value: \"Yes\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof zcc = Inputs.range([2, 200], {value: 100, step: 2, label: \"Symbols size\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"*If you use the tool, please cite:*\n\nLaurent Jégou (2019) Expanding the Sémiologie Graphique for contemporary cartography, some ideas from visual semiotics, art history and design, Cartography and Geographic Information Science, 46:2, 182-188, DOI: 10.1080/15230406.2018.1513343","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"BMimgData = {\n // Image data reading to array\n const bitmap = await createImageBitmap(imageSource);\n const width = bitmap.width;\n const height = bitmap.height;\n const ctx = DOM.context2d(width, height, 1);\n ctx.canvas.value = true;\n ctx.drawImage(bitmap, 0, 0);\n\n // Image data displaying to canvas\n var canvas = document.getElementById(\"canvas\");\n canvas.setAttribute(\"width\", width);\n canvas.setAttribute(\"height\", height);\n var ctxOut = canvas.getContext(\"2d\");\n ctxOut.drawImage(bitmap,0,0,width,height);\n\n var bd = Array();\n bd[0] = ctx.getImageData(0, 0, width, height).data;\n \n return bd;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"vals = {\n var v = Array();\n const n = BMimgData[0].length;\n // Sampling the image data each imre step\n for (var i = 0; i < n; i+= ~~(4 * (imre * 4))) {\n var ps = i * 100 / n;\n var cy;\n var c = new Object();\n c.r = BMimgData[0][i];\n c.g = BMimgData[0][i+1];\n c.b = BMimgData[0][i+2];\n switch (cs) {\n case \"RGB\" :\n cy = {r: c.r, g: c.g, b: c.b};\n break;\n case \"YUV\" :\n cy = rgb2yuv(c.r, c.g, c.b);\n break;\n case \"HSL\" :\n cy = rgb2hsv(c.r, c.g, c.b);\n break;\n case \"CIELAB\" :\n cy = rgb2cielab(c.r, c.g, c.b);\n break;\n case \"CIELUV\" :\n cy = rgb2cieluv(c.r, c.g, c.b);\n break;\n }\n var nc = new Array(cy);\n var cm = (c.r + c.g + c.b) / 3;\n if (cm >= lumin) {\n v = v.concat(nc);\n }\n }\n \n return v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"### JSON version of the palette","pinned":false,"hidden":false,"mode":"md"},{"id":811,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"### Color palette ordered by decreasing numbers","pinned":false,"hidden":false,"mode":"md"},{"id":849,"value":"Plot.plot({\n x: {\n label: \"Ranking\",\n ticks: clustersExport.map((d) => d.i).filter((d, i) => i % 10 === 0),\n line: true,\n nice: true\n },\n y: {\n label: \"nb.\",\n type: \"sqrt\",\n grid: true\n },\n marks: [\n Plot.barY(clustersExport, {x: \"i\", y: \"n\", stroke: d => d.c == \"rgb(255,255,255)\" ? \"grey\" : d.c, fill: \"c\"})\n ],\n width: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"### Color palette ordered by hue","pinned":false,"hidden":false,"mode":"md"},{"id":909,"value":"// ordered color palette\nPlot.plot({\n x: {\n label: \"Ranking\",\n ticks: clustersExport.map((d) => d.i).filter((d, i) => i % 10 === 0),\n line: true,\n nice: true\n },\n y: {\n label: \"nb.\",\n type: \"sqrt\",\n grid: true\n },\n marks: [\n Plot.barY(clustersExport, {x: d => (rgb2hsv(d.r, d.g, d.b)).h, y: \"n\", stroke: d => d.c == \"rgb(255,255,255)\" ? \"grey\" : d.c, fill: \"c\"})\n ],\n width: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"import {kmeans} from \"@fil/hello-kmeans-engine\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"This k-means javascript implementation is optimised for large and sparse data set by using an array of objects to represent a sparse matrix. — Stanley Fok https://github.com/stanleyfok/kmeans-engine\n\nVia @Fil at https://observablehq.com/@fil/hello-kmeans-engine","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"clusters = {\n var cl = clustering.clusters;\n cl.sort(function(a,b) {return b.vectorIds.length-a.vectorIds.length;});\n return cl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"clustering = await new Promise((resolve, reject) =>\n kmeans.clusterize(vals, { k: nbcl }, (err, res) => {\n if (err) reject(err);\n else resolve(res);\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"createImageBitmap = window.createImageBitmap ||\n ((blob) =>\n new Promise((resolve) => {\n let img = document.createElement(\"img\");\n img.addEventListener(\"load\", () => resolve(this));\n img.src = URL.createObjectURL(blob);\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"function rgb2hsv(red, green, blue) {\n\tred /= 255.0;\n\tgreen /= 255.0;\n\tblue /= 255.0;\n\tvar hue, sat, val,\n\tmin = Math.min(red, green, blue),\n\tmax = Math.max(red, green, blue),\n\tdelta = max - min,\n\tval = max;\n\n\t// This is gray (red==green==blue)\n\tif (delta === 0) {\n\t\thue = sat = 0;\n\t} else {\n\t\tsat = delta / max;\n\t\tif (max === red) {\n\t\t\thue = (green - blue) / delta;\n\t\t} else if (max === green) {\n\t\t\thue = (blue - red) / delta + 2;\n\t\t} else if (max === blue) {\n\t\t\thue = (red - green) / delta + 4;\n\t\t}\n\t\thue /= 6;\n\t\tif (hue < 0) {\n\t\t\thue += 1;\n\t\t}\n\t}\n\n var c = new Object();\n c.h = hue*255;\n c.s = sat*255;\n c.v = val*255;\n\treturn c;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"ahsv2rgb = function (c) {\n\tvar hue, sat, val;\n\tvar red, grn, blu, i, f, p, q, t;\n\thue = c.h;\n\tsat = c.s;\n\tval = c.v;\n\thue%=255.0;\n\tif(sat==0) {return({r: Math.round(c.v), g: Math.round(c.v),b: Math.round(c.v)})};\n\tif(val==0) {return({r: 0, g: 0, b: 0});}\n\tsat/=255.0;\n\tval/=255.0;\n\thue/=255.0;\n\tif (hue >= 1.0) {hue = 0.0} else {hue *= 6.0};\n\ti = Math.floor(hue);\n\tf = hue-i;\n\tp = val*(1-sat);\n\tq = val*(1-(sat*f));\n\tt = val*(1-(sat*(1-f)));\n\tif (i==0) {red=val; grn=t; blu=p;}\n\telse if (i==1) {red=q; grn=val; blu=p;}\n\telse if (i==2) {red=p; grn=val; blu=t;}\n\telse if (i==3) {red=p; grn=q; blu=val;}\n\telse if (i==4) {red=t; grn=p; blu=val;}\n\telse {red=val; grn=p; blu=q;}\n\tred = Math.floor(red*255.0);\n\tgrn = Math.floor(grn*255.0);\n\tblu = Math.floor(blu*255.0);\n\n\treturn {r: red, g: grn,b: blu};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"function rgb2yuv(r, g, b) {\n var y,u,v;\n\ty = Math.round(r * .299000 + g * .587000 + b * .114000);\n\tu = Math.round(r * -.168736 + g * -.331264 + b * .500000 + 128);\n\tv = Math.round(r * .500000 + g * -.418688 + b * -.081312 + 128);\n \n\tvar c = new Object();\n c.y = y; //Math.round(y*255);\n c.u = u; //Math.round(u*255);\n c.v = v; //Math.round(v*255);\n\n\treturn c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"function yuv2rgb(y, u, v) {\n\tvar r = y + 1.4075 * (v - 128);\n\tvar g = y - 0.3455 * (u - 128) - (0.7169 * (v - 128));\n\tvar b = y + 1.7790 * (u - 128);\n\n\tvar c = new Object();\n\n\tc.r=Math.floor(r);\n\tc.g=Math.floor(g);\n\tc.b=Math.floor(b);\n\n\tif (c.r<0) c.r=0;\n\t else\n\tif (c.r>255) c.r=255;\n\n\tif (c.g<0) c.g=0;\n\t else\n\tif (c.g>255) c.g=255;\n\n\tif (c.b<0) c.b=0;\n\t else\n\tif (c.b>255) c.b=255;\n\n\treturn c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"function rgb2cielab(r, g, b) {\n\tvar xyz = rgb2xyz(r, g, b);\n\tvar c = xyz2cielab(xyz);\n\treturn c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"function rgb2xyz(r, g, b) {\n\tvar x, y, z;\n\n\tr = r / 255.0;\n\tg = g / 255.0;\n\tb = b / 255.0;\n\t\n\tif (r > 0.04045) {r = Math.pow((r + 0.055) / 1.055, 2.4)} else {r = r / 12.92};\n\tif (g > 0.04045) {g = Math.pow((g + 0.055) / 1.055, 2.4)} else {g = g / 12.92};\n\tif (b > 0.04045) {b = Math.pow((b + 0.055) / 1.055, 2.4)} else {b = b / 12.92};\n\n\tr = r * 100.0;\n\tg = g * 100.0;\n\tb = b * 100.0;\n\n\tx = 0.4124564 * r + 0.3575761 * g + 0.1804375 * b;\n\ty = 0.2126729 * r + 0.7151522 * g + 0.0721750 * b;\n\tz = 0.0193339 * r + 0.1191920 * g + 0.9503041 * b;\n\n\tvar a = new Object();\n a.x = x;\n a.y = y;\n a.z = z;\n\treturn a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"function xyz2cielab(c) {\n\tvar L_star, X, Y, Z, a_star, b_star, fY;\n var wpa = new wp();\n \n X = c.x, Y = c.y, Z = c.z;\n fY = f(Y / wpa.Yw);\n L_star = 116 * fY - 16;\n a_star = 500 * (f(X / wpa.Xw) - fY);\n b_star = 200 * (fY - f(Z / wpa.Zw));\n\n\tvar a = new Object();\n a.L_star = L_star;\n a.a_star = a_star;\n a.b_star = b_star;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"function cielab2rgb(l, a, b) {\n\tvar xyz = cielab2xyz(l, a, b);\n\tvar c = xyz2rgb(xyz);\n\treturn c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"function cielab2xyz(l, a, b) {\n var L_star, X, Y, Z, a_star, b_star, temp;\n L_star = l, a_star = a, b_star = b;\n temp = (L_star + 16) / 116;\n var wpa = new wp();\n \n X = wpa.Xw * g(temp + a_star / 500);\n Y = wpa.Yw * g(temp);\n Z = wpa.Zw * g(temp - b_star / 200);\n\n\tvar a = new Object();\n a.x = X;\n a.y = Y;\n a.z = Z;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"function xyz2rgb(c) {\n var x, y, z;\n\tvar r,g,b;\n\n\tx = c.x / 100.0;\n\ty = c.y / 100.0;\n\tz = c.z / 100.0;\n\n\tr = x * 3.2404542 + y * -1.5371385 + z * -0.4985314;\n\tg = x * -0.9692660 + y * 1.8760108 + z * 0.0415560;\n\tb = x * 0.0556434 + y * -0.2040259 + z * 1.0572252;\n\n\tif (r > 0.0031308) {r = 1.055 * (Math.pow(r, (1/ 2.4))) - 0.055;} else {r = 12.92 * r;}\n\tif (g > 0.0031308) {g = 1.055 * (Math.pow(g, (1/ 2.4))) - 0.055;} else {g = 12.92 * g;}\n\tif (b > 0.0031308) {b = 1.055 * (Math.pow(b, (1/ 2.4))) - 0.055;} else {b = 12.92 * b;}\n\n\tr = (r * 255.0);\n\tg = (g * 255.0);\n\tb = (b * 255.0);\n\tif (r > 255) {r = 255;}\n\tif (r < 0) {r = 0;}\n\tif (g > 255) {g = 255;}\n\tif (g < 0) {g = 0;}\n\tif (b > 255) {b = 255;}\n\tif (b < 0) {b = 0;}\n\n\tvar a = new Object();\n a.r = Math.floor(r);\n a.g = Math.floor(g);\n a.b = Math.floor(b);\n\treturn a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"function rgb2cieluv(r, g, b) {\n\tvar xyz = rgb2xyz(r, g, b);\n\tvar c = xyz2cieluv(xyz);\n\treturn c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"function xyz2cieluv(c) {\n if (c.x == 0 && c.y == 0 && c.z == 0) {\n var a = new Object();\n a.L_star = 0;\n a.u_star = 0;\n a.v_star = 0;\n return a;\n }\n\tvar L_star, X, Y, Z, u_star, v_star, up, vp, u0p, v0p, Yd;\n var wpa = new wp();\n X = c.x, Y = c.y, Z = c.z;\n\n\tYd = Y / wpa.Yw;\n\tif (Yd >= 0.00885645167903563082) {\n\t\tYd = Math.pow(Yd, 1.0 / 3.0);\n\t} else {\n\t\tYd = (7.787 * Yd) + (16.0 / 116.0);\n\t}\n\n\tup = (4.0 * X) / (X + (15.0 * Y) + (3.0 * Z));\n vp = (9.0 * Y) / (X + (15.0 * Y) + (3.0 * Z));\n u0p = (4.0 * wpa.Xw) / (wpa.Xw + (15.0 * wpa.Yw) + (3.0 * wpa.Zw));\n v0p = (9.0 * wpa.Yw) / (wpa.Xw + (15.0 * wpa.Yw) + (3.0 * wpa.Zw));\n L_star = (116.0 * Yd) - 16.0;\n u_star = 13.0 * L_star * (up - u0p);\n v_star = 13.0 * L_star * (vp - v0p);\n \n var a = new Object();\n a.L_star = L_star;\n a.u_star = u_star;\n a.v_star = v_star;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"function cieluv2rgb(l, u, v) {\n\tvar xyz = cieluv2xyz(l, u, v);\n\tvar c = xyz2rgb(xyz);\n\treturn c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"function cieluv2xyz(l, u, v) {\n\tvar L_star, X, Y, Z, u_star, v_star, u_w, v_w, u_prime, v_prime;\n var wpa = new wp();\n\tL_star = l;\n\tu_star = u;\n\tv_star = v;\n\t\n\tY = (L_star + 16.0) / 116.0;\n if (Math.pow(Y, 3.0) > 0.00885645167903563082) {\n Y = Math.pow(Y, 3.0);\n } else {\n Y = (Y - (16.0/116.0))/7.787;\n }\n\n u_w = (4.0 * wpa.Xw) / (wpa.Xw + (15.0 * wpa.Yw) + (3.0 * wpa.Zw));\n v_w = (9.0 * wpa.Yw) / (wpa.Xw + (15.0 * wpa.Yw) + (3.0 * wpa.Zw));\n u_prime = u_star / (13.0 * L_star) + u_w;\n v_prime = v_star / (13.0 * L_star) + v_w;\n\n Y = Y * 100.0;\n X = -(9.0 * Y * u_prime) / ((u_prime - 4.0) * v_prime - u_prime * v_prime);\n Z = (9.0 * Y - (15.0 * v_prime * Y) - (v_prime * X)) / (3.0 * v_prime);\n\n var a = new Object();\n a.x = X;\n a.y = Y;\n a.z = Z;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"f = function(t) {\n var d = 6 / 29;\n if (t > d * d * d) {\n return Math.pow(t, 1 / 3);\n } else {\n return t / 3 / d / d + 4 / 29;\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"g = function(t) {\n var d = 6 / 29;\n if (t > d) {\n return t * t * t;\n } else {\n return 3 * d * d * (t - 4 / 29);\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"//White point at D65 and observer 2° (1931)\nfunction wp() {\n this.Xw = 95.047;\n this.Yw = 100.0;\n this.Zw = 108.883;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"HTMLColorFromRGB = function(ce){\n var circleColor = \"\";\n if (isNaN(ce.r) || isNaN(ce.g) || isNaN(ce.b)) {\n circleColor = \"rgb(255,255,255)\";\n } else {\n circleColor = \"rgb(\" + Math.floor(ce.r) + \",\" + Math.floor(ce.g) + \",\" + Math.floor(ce.b) + \")\";\n }\n return circleColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}