29:null 2a:["$","title",null,{"children":"HHI from Barycentric Coordinates Triangle Control | puri | Observable"}] 2f:T684,triangle = { mutable p = [149, 140]; const tri = html`

`; d3.select(tri) .selectAll(".point > circle") .call(d3.drag() .on("drag", update)); // update(); return tri; }30:[] 2d:{"id":"65c0a64b606f9e30","slug":"hhi-from-barycentric-coordinates-triangle-control","title":"HHI from Barycentric Coordinates Triangle Control","thumbnail":"d5ce2d3b4fe660ec8820128cdb280997495248b5b5c5fd37cdd939cf0b982a06","access_level":"public","create_time":"$D2018-11-14T04:43:48.971Z","update_time":"$D2020-10-11T16:35:48.806Z","view_time":null,"first_public_time":"$D2018-11-14T16:29:14.579Z","has_unpublished_edits":null,"fork":{"id":"7c739561bce11ff8","slug":"herfindahl-hirschman-index-hhi","title":"Herfindahl–Hirschman Index (HHI)","owner":{"id":"75c85bddc2cee955","login":"puripant","name":"puri"}},"stars":0,"starred":false,"owner":{"type":"team","id":"75c85bddc2cee955","login":"puripant","name":"puri","avatar_url":"https://avatars-next.observableusercontent.com/e3a2bb727c9eca90f56b9af63f8e90e9b012d1da5787f2e7bcb8d464f5f1a46c","tier":"starter_2024"},"version":670,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a740fb618035a0b","login":"puripant","name":"puri","avatar_url":"https://avatars-next.observableusercontent.com/e3a2bb727c9eca90f56b9af63f8e90e9b012d1da5787f2e7bcb8d464f5f1a46c","tier":null}],"members":[{"type":"individual","id":"6a740fb618035a0b","login":"puripant","name":"puri","avatar_url":"https://avatars-next.observableusercontent.com/e3a2bb727c9eca90f56b9af63f8e90e9b012d1da5787f2e7bcb8d464f5f1a46c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"HHI from Barycentric Coordinates Triangle Control","cells":[{"id":0,"value":"md`# HHI from Barycentric Coordinates Triangle Control`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"mutable alpha = 0.3333\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"mutable beta = 0.3333","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"mutable gamma = 0.3333","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"a = [150, 50]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"b = [50, 200]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"c = [250, 200]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"mutable p = scale(0.33333, add(a, add(b, c)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"d3 = require(\"d3-drag\", \"d3-selection\", \"d3-dispatch\", \"d3-format\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"add = ([x1, y1], [x2, y2]) => [x1+x2, y1+y2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"sub = ([x1, y1], [x2, y2]) => [x1-x2, y1-y2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"scale = (s, [x,y]) => [s*x, s*y]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"dot = ([px,py],[qx, qy]) => px * qx + py * qy","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"