3e:null 3f:["$","title",null,{"children":"Voronoi Simulation | Yan Wu | Observable"}] 45:Tc32,{ const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.left + margin.right)); const voronoi = svg.append("g").attr('class', 'voronoiG').attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const giantCircleG = svg.append("g").attr('class', 'giantG').attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const labels = svg.append("g").attr('class', 'labelG').attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const pop_labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const reducer = (acc, cur) => acc + cur.market_cap; const allMktCap = data.reduce(reducer, 0); const mkt_radius = 20* Math.sqrt(allMktCap); const weightScale = function(d){return d.market_cap} const clippingPoly = computeClippingPolygon(mkt_radius) const giantCircle = giantCircleG.selectAll('.circle') .data([1]).enter().append('circle').attr('class', 'circle') .attr('cx', mkt_radius+100) .attr('cy', mkt_radius) .attr('r', 20* Math.sqrt(46.16)) .attr('stroke', '#000') .attr('stroke-dasharray', '3 3') .attr('fill', 'none') .attr('stroke-width', 2) var simulation = d3.voronoiMapSimulation(data) .weight(function(d){ return weightScale(d); } ) // set the weight accessor .clip(clippingPoly) // set the clipping polygon .on ("tick", ticked) // function 'ticked' is called after each iteration function ticked() { var state = simulation.state(), // retrieve the simulation's state polygons = state.polygons, // retrieve polygons drawnCells; const area_scale = d3.scaleSqrt() .domain([0, 100000]) .range([2, 30]) drawnCells = voronoi.selectAll('path').data(polygons); // d3's join drawnCells = drawnCells .enter().append('path') // create cells at first render .merge(drawnCells) // assigns appropriate shapes and colors .attr('id', d=>`${d.site.originalObject.data.originalData.ticker}`) .attr('d', function(d) { let area0 = d3.polygonArea(d) return drawRoundedPolygon(d, area_scale(area0)) //rounded-corners.js // return `M${d.join("L")}Z` }) .attr('stroke', 'white') .style('fill', function(d) { return fillScale(d.site.originalObject); }); let labelText = labels.selectAll('.label').data(polygons); labelText = labelText.enter().append('text').attr('class', 'label') .merge(labelText).text(d=> `${d.site.originalObject.data.originalData.ticker}` ) .attr('x',function(d){ return d.site.x } ) .attr('y', d=> d.site.y ) .attr('fill', 'black') .attr('stroke', 'none') .attr('font-family', 'Retina') } function fillScale(d){ if(d.data.originalData.role =='giant'){ return '#0098db'; } return '#e2e3e4' } return svg.node(); }46:Tad6,function drawRoundedPolygon(points, r) { var i, n = points.length, p0, p1, p2, p3, n1 = 0, t012, t123, x21, y21, x4, y4, x5, y5, moved, circle = polygonInCircle(points); // Build a linked list from the array of vertices so we can splice. for (i = 0, p1 = points[n - 2], p2 = points[n - 1]; i < n; ++i) { p0 = p1, p1 = p2, p2 = points[i]; p1.previous = p0; p1.next = p2; } // The rounding radius can’t be bigger than the polygon’s incircle. // The fudge factor of 1px lets the rounded polygon get squished a bit. // TODO Abort the search for the incircle if one is found larger than r. r = Math.min(r, circle.radius - 1) if (r <= 0) return; // TODO do we need to make all these extra passes? for (i = 0, p3 = p2.next; n1 <= n; ++n1) { p0 = p1, p1 = p2, p2 = p3, p3 = p3.next; t012 = cornerTangent(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], r); t123 = 1 - cornerTangent(p3[0], p3[1], p2[0], p2[1], p1[0], p1[1], r); // If the following corner’s tangent is before this corner’s tangent, // replace p1 and p2 with the intersection of the lines 01 and 23. if (t012 >= t123) { p2 = p0.next = p3.previous = lineLineIntersection(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]); p2.previous = p0; p2.next = p3; p3 = p2; p2 = p3.previous; p1 = p2.previous; p0 = p1.previous; n1 = 0; if (--n < 3) break; }//if }//for i // If we removed too many points, just draw the previously computed incircle. function draw(context) { if (n < 3) { context.moveTo(circle[0] + circle.radius, circle[1]); context.arc(circle[0], circle[1], circle.radius, 0, 2 * Math.PI); return; }//if // Draw the rounded polygon, compting the corner tangents. for (i = 0; i <= n; ++i) { p0 = p1, p1 = p2, p2 = p3, p3 = p3.next; t012 = cornerTangent(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1], r); t123 = 1 - cornerTangent(p3[0], p3[1], p2[0], p2[1], p1[0], p1[1], r); x21 = p2[0] - p1[0], y21 = p2[1] - p1[1]; x4 = p1[0] + t012 * x21, y4 = p1[1] + t012 * y21; x5 = p1[0] + t123 * x21, y5 = p1[1] + t123 * y21; if (moved) context.arcTo(p1[0], p1[1], x4, y4, r); else moved = true, context.moveTo(x4, y4); context.lineTo(x5, y5); }//for i return context }//function draw let p = d3.path() return draw(p).toString() }//function drawRoundedPolygon 47:T6e5,// A horrible brute-force algorithm for determining the largest circle that can // fit inside a convex polygon. For each distinct set of three sides of the // polygon, compute the tangent circle. Then reduce the circle’s radius against // the remaining sides of the polygon. function polygonInCircle(points) { var circle = { radius: 0 }; for (var i = 0, n = points.length; i < n; ++i) { var pi0 = points[i], pi1 = points[(i + 1) % n]; for (var j = i + 1; j < n; ++j) { var pj0 = points[j], pj1 = points[(j + 1) % n], pij = j === i + 1 ? pj0 : lineLineIntersection(pi0[0], pi0[1], pi1[0], pi1[1], pj0[0], pj0[1], pj1[0], pj1[1]); search: for (var k = j + 1; k < n; ++k) { var pk0 = points[k], pk1 = points[(k + 1) % n], pik = lineLineIntersection(pi0[0], pi0[1], pi1[0], pi1[1], pk0[0], pk0[1], pk1[0], pk1[1]), pjk = k === j + 1 ? pk0 : lineLineIntersection(pj0[0], pj0[1], pj1[0], pj1[1], pk0[0], pk0[1], pk1[0], pk1[1]), candidate = triangleInCircle(pij[0], pij[1], pik[0], pik[1], pjk[0], pjk[1]), radius = candidate.radius; for (var l = 0; l < n; ++l) { var pl0 = points[l], pl1 = points[(l + 1) % n], r = pointLineDistance(candidate[0], candidate[1], pl0[0], pl0[1], pl1[0], pl1[1]); if (r < circle.radius) continue search; if (r < radius) radius = r; } circle = candidate; circle.radius = radius; } } } return circle; }//function polygonInCircle48:[] 43:{"id":"1c0ce57bb95635d8","slug":null,"title":"Voronoi Simulation","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-01-05T19:51:07.010Z","update_time":"$D2022-12-19T22:37:39.920Z","view_time":null,"first_public_time":"$D2022-12-19T22:31:25.631Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b395fcc1dd8ae22e","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":"starter_2024","bio":"Designer, Coder, Journalist, Storyteller","following":false},"version":135,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"bio":"Designer, Coder, Journalist, Storyteller","following":false}],"members":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Voronoi Simulation","cells":[{"id":0,"value":"md`# Voronoi Simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"function getMyCentroid(element) {\n var bbox = element.node().getBBox();\n return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function computeClippingPolygon(radius) {\n var circlingPolygon = [];\n const _2PI = Math.PI*2;\n for (let a=0; a<_2PI; a+=_2PI/60) {\n circlingPolygon.push(\n [radius + (radius-1)*Math.cos(a)+100, radius + (radius-1)*Math.sin(a)]\n )\n }\n \n \treturn circlingPolygon;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// Given a circle of radius r that is tangent to the line segments 01 and 12,\n// returns the parameter t of the tangent along the line segment 12.\nfunction cornerTangent(x0, y0, x1, y1, x2, y2, r) {\n var theta = innerAngle(x0, y0, x1, y1, x2, y2),\n x21 = x2 - x1, y21 = y2 - y1,\n l21 = Math.sqrt(x21 * x21 + y21 * y21),\n l14 = r / Math.tan(theta / 2);\n return l14 / l21;\n}//function cornerTangent","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// Returns the angle between segments 01 and 12.\nfunction innerAngle(x0, y0, x1, y1, x2, y2) {\n var x01 = x0 - x1, y01 = y0 - y1,\n x12 = x1 - x2, y12 = y1 - y2,\n x02 = x0 - x2, y02 = y0 - y2,\n l01_2 = x01 * x01 + y01 * y01,\n l12_2 = x12 * x12 + y12 * y12,\n l02_2 = x02 * x02 + y02 * y02;\n return Math.acos((l12_2 + l01_2 - l02_2) / (2 * Math.sqrt(l12_2 * l01_2)));\n}//function innerAngle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Returns the intersection of the infinite lines 01 and 23.\nfunction lineLineIntersection(x0, y0, x1, y1, x2, y2, x3, y3) {\n var x02 = x0 - x2, y02 = y0 - y2,\n x10 = x1 - x0, y10 = y1 - y0,\n x32 = x3 - x2, y32 = y3 - y2,\n t = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10);\n return [x0 + t * x10, y0 + t * y10];\n}//function lineLineIntersection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// Returns the signed distance from point 0 to the infinite line 12.\nfunction pointLineDistance(x0, y0, x1, y1, x2, y2) {\n var x21 = x2 - x1, y21 = y2 - y1;\n return (y21 * x0 - x21 * y0 + x2 * y1 - y2 * x1) / Math.sqrt(y21 * y21 + x21 * x21);\n}//function pointLineDistance","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"// Returns the largest circle inside the triangle 012.\nfunction triangleInCircle(x0, y0, x1, y1, x2, y2) {\n var x01 = x0 - x1, y01 = y0 - y1,\n x02 = x0 - x2, y02 = y0 - y2,\n x12 = x1 - x2, y12 = y1 - y2,\n l01 = Math.sqrt(x01 * x01 + y01 * y01),\n l02 = Math.sqrt(x02 * x02 + y02 * y02),\n l12 = Math.sqrt(x12 * x12 + y12 * y12),\n k0 = l01 / (l01 + l02),\n k1 = l12 / (l12 + l01),\n center = lineLineIntersection(x0, y0, x1 - k0 * x12, y1 - k0 * y12, x1, y1, x2 + k1 * x02, y2 + k1 * y02);\n center.radius = Math.sqrt((l02 + l12 - l01) * (l12 + l01 - l02) * (l01 + l02 - l12) / (l01 + l02 + l12)) / 2;\n return center;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"ellipse = d3\n .range(100)\n .map(i => [\n (width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 500 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"width = 750 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = ({top: 20, right: 20, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"data = origin_data.company.filter(t=>t.role!='giant' && ['YUM', 'QSR', 'CMG'].indexOf(t.ticker)==-1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"origin_data = d3.json(\"https://wsjnewsgraphics.s3.amazonaws.com/projects/archibald/1RECjZL0QOp8OSrvsRxhWCr0M230lH_MKwALylJ1Issk-dev.json\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"