32:T684,triangle = { mutable p = [149, 140]; const tri = html`

`; d3.select(tri) .selectAll(".point > circle") .call(d3.drag() .on("drag", update)); // update(); return tri; }33:[] 30:{"title":"HHI from Barycentric Coordinates Triangle Control","cells":[{"id":0,"value":"md`# HHI from Barycentric Coordinates Triangle Control`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`Three variables with a constant summation constraint can be naturally represented as Barycentric coordinates, which in turn can be represented as a a point inside of a triangle. This is useful as an user interface control, instead of rows of sliders, for [Herfindahl–Hirschman Index (HHI)](https://beta.observablehq.com/@puripant/herfindahl-hirschman-index-hhi). This will directly borrow a lot from [T.J. Jankun-Kelly's implementation](https://beta.observablehq.com/@infowantstobeseen/barycentric-coordinates).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`Below is an example of three parts that sum up to 100. The closer *P* is to each corner (*A*, *B*, or *C*), the bigger portion the corresponding part is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`HHI = ${tex`\\left(\\frac{${(alpha*100).toFixed(2)}}{100}\\right)^2 + \\left(\\frac{${(beta*100).toFixed(2)}}{100}\\right)^2 + \\left(\\frac{${(gamma*100).toFixed(2)}}{100}\\right)^2`} = ${(alpha*alpha + beta*beta + gamma*gamma).toFixed(2)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"mutable alpha = 0.3333\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"mutable beta = 0.3333","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"mutable gamma = 0.3333","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"a = [150, 50]","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"b = [50, 200]","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"c = [250, 200]","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"mutable p = scale(0.33333, add(a, add(b, c)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"d3 = require(\"d3-drag\", \"d3-selection\", \"d3-dispatch\", \"d3-format\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"add = ([x1, y1], [x2, y2]) => [x1+x2, y1+y2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"sub = ([x1, y1], [x2, y2]) => [x1-x2, y1-y2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"scale = (s, [x,y]) => [s*x, s*y]","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"dot = ([px,py],[qx, qy]) => px * qx + py * qy","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"calc_barycentric = (pt, vert_a, vert_b, vert_c) => {\n const ab = sub(vert_b, vert_a);\n const ac = sub(vert_c, vert_a);\n const ap = sub(pt, vert_a);\n\n const nac = [vert_a[1] - vert_c[1], vert_c[0] - vert_a[0]];\n const nab = [vert_a[1] - vert_b[1], vert_b[0] - vert_a[0]];\n\n const bary_beta = dot(ap, nac) / dot(ab, nac);\n const bary_gamma = dot(ap, nab) / dot(ac, nab);\n const bary_alpha = 1.000 - bary_beta - bary_gamma;\n \n return [bary_alpha, bary_beta, bary_gamma];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"isPointInTriangle = (p, a, b, c) => {\n const as_x = p[0] - a[0];\n\tconst as_y = p[1] - a[1];\n\tconst s_ab = (b[0]-a[0])*as_y-(b[1]-a[1])*as_x > 0;\n\n\tif ((c[0]-a[0])*as_y-(c[1]-a[1])*as_x > 0 == s_ab) return false;\n\tif ((c[0]-b[0])*(p[1]-b[1])-(c[1]-b[1])*(p[0]-b[0]) > 0 != s_ab) return false;\n\treturn true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"update = (event) => {\n mutable p = [event.x, event.y];\n const [bary_alpha, bary_beta, bary_gamma] = calc_barycentric(mutable p, a, b, c);\n mutable alpha = bary_alpha;\n mutable beta = bary_beta;\n mutable gamma = bary_gamma;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"{\n d3.selectAll(\".point > circle\")\n .attr(\"cx\", p[0])\n .attr(\"cy\", p[1]);\n d3.selectAll(\".point > text\")\n .attr(\"x\", p[0])\n .attr(\"y\", p[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}