24:null 25:["$","title",null,{"children":"geometric.polygonCentroid, geometric.polygonMean | Harry Stevens | Observable"}] 2a:T1509,{ restart; let polygon = [], centroid = [], mean = []; const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("width", width) .attr("height", height) .on("mousemove", function(){ const p = d3.mouse(this); const vertexVirtual = svg.selectAll(".vertex-virtual") .data([p]) vertexVirtual.enter().append("circle") .attr("class", "vertex-virtual") .attr("r", 4) .merge(vertexVirtual) .attr("transform", d => `translate(${d})`) .raise(); const sidesVirtualData = polygon.length > 0 ? [[polygon[polygon.length - 1], p], [p, polygon[0]]] : [[[0, 0], [0, 0]], [[0, 0], [0, 0]]]; const sidesVirtual = svg.selectAll(".side-virtual") .data(sidesVirtualData) sidesVirtual.enter().append("line") .attr("class", "side-virtual") .merge(sidesVirtual) .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]) .raise(); const verticesVirtual = [...polygon, p], ghostCentroid = geometric.polygonCentroid(verticesVirtual), ghostMean = geometric.polygonMean(verticesVirtual); if (centroid[0]){ const centroidMove = svg.selectAll(".centroid-move") .data([[centroid, ghostCentroid]]); centroidMove.enter().append("line") .attr("class", "centroid-move") .merge(centroidMove) .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); } if (mean[0]){ const meanMove = svg.selectAll(".mean-move") .data([[mean, ghostMean]]); meanMove.enter().append("line") .attr("class", "mean-move") .merge(meanMove) .style("display", showMean ? "unset" : "none") .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); } const centroidVirtual = svg.selectAll(".centroid-virtual") .data([ghostCentroid]) centroidVirtual.enter().append("circle") .attr("class", "centroid-virtual") .attr("r", 5) .merge(centroidVirtual) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`) .raise(); const meanVirtual = svg.selectAll(".mean-virtual") .data([ghostMean]) meanVirtual.enter().append("circle") .attr("class", "mean-virtual") .attr("r", 5) .merge(meanVirtual) .attr("transform", d => `translate(${!polygon.length ? [-10, -10] : d})`) .style("display", showMean ? "unset" : "none") .raise(); }) .on("click", function(event){ d3.select(".centroid-move").remove(); d3.select(".mean-move").remove(); polygon.push(d3.pointer(event)); const vertexActual = svg.selectAll(".vertex") .data(polygon) vertexActual.enter().append("circle") .attr("class", "vertex") .attr("r", 4) .attr("cx", d => d[0]) .attr("cy", d => d[1]); const sidesActual = svg.selectAll("polygon") .data([polygon]) sidesActual.enter().append("polygon") .merge(sidesActual) .attr("points", d => d.join(" ")); mean = geometric.polygonMean(polygon); const meanActual = svg.selectAll(".mean") .data([mean]); meanActual.enter().append("circle") .attr("class", "mean") .attr("r", 5) .merge(meanActual) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`) .style("display", showMean ? "unset" : "none"); const meanLabel = svg.selectAll(".mean-label") .data([mean]) meanLabel.enter().append("text") .attr("class", "mean-label") .attr("dy", 14) .text("Mean") .merge(meanLabel) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`) .style("display", showMean ? "unset" : "none"); centroid = geometric.polygonCentroid(polygon); const centroidActual = svg.selectAll(".centroid") .data([centroid]); centroidActual.enter().append("circle") .attr("class", "centroid") .attr("r", 5) .merge(centroidActual) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`); const centroidLabel = svg.selectAll(".centroid-label") .data([centroid]) centroidLabel.enter().append("text") .attr("class", "centroid-label") .attr("dy", -6) .text("Centroid") .merge(centroidLabel) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`); vertexActual.raise(); }); return svg.node(); }2b:T488,{ const svg = d3.select(DOM.svg(width, height)) svg.append("rect") .style("isolation", "isolate") .attr("width", width) .attr("height", height); const polygon = geometric.polygonRegular(5, geometric.polygonArea([[0, 0], [width, 0], [width, height], [0, height]]) / 8, [width / 2, height / 2]); const centroid = geometric.polygonCentroid(polygon); const mean = geometric.polygonMean(polygon); svg.append("polygon") .attr("points", polygon.join(" ")); const blendMode = "lighten"; svg.append("circle") .attr("r", 5) .attr("class", "centroid") .attr("transform", `translate(${centroid})`); svg.append("circle") .attr("r", 5) .attr("class", "mean") .style("mix-blend-mode", blendMode) .attr("transform", `translate(${mean})`); svg.append("text") .attr("class", "centroid-label") .attr("dy", -6) .attr("transform", `translate(${centroid})`) .text("Centroid"); svg.append("text") .attr("class", "mean-label") .attr("dy", 14) .attr("transform", `translate(${mean})`) .text("Mean"); return svg.node(); }2c:T5a1,{ const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("width", width) .attr("height", height); const center = [width / 2, height / 2]; const polygon = [ [center[0] - 100, center[1]], [center[0] - 30, center[1]], [center[0] - 30, center[1] - 40], [center[0] - 10, center[1] - 97], [center[0] - 2, center[1] - 100], [center[0], center[1] - 130], [center[0] + 2, center[1] - 100], [center[0] + 10, center[1] - 97], [center[0] + 30, center[1] - 40], [center[0] + 30, center[1]], [center[0] + 100, center[1]], [center[0] + 100, center[1] + 120], [center[0] - 100, center[1] + 120] ]; const centroid = geometric.polygonCentroid(polygon); const mean = geometric.polygonMean(polygon); svg.append("polygon") .attr("points", polygon.join(" ")); svg.append("circle") .attr("r", 5) .attr("class", "centroid") .attr("transform", `translate(${centroid})`); svg.append("circle") .attr("r", 5) .attr("class", "mean") .attr("transform", `translate(${mean})`); svg.append("text") .attr("class", "centroid-label") .attr("dy", -6) .attr("transform", `translate(${centroid})`) .text("Centroid"); svg.append("text") .attr("class", "mean-label") .attr("dy", 14) .attr("transform", `translate(${mean})`) .text("Mean"); return svg.node(); }2d:[] 28:{"id":"592360fa5e466402","slug":"geometric-polygoncentroid-geometric-polygonmean","title":"geometric.polygonCentroid, geometric.polygonMean","thumbnail":"2d856cd8ca97e18b2cb6d87f6080e7efd4e8fa86511033f1a36729e8eb5bf17d","access_level":"public","create_time":"$D2019-06-25T01:11:53.409Z","update_time":"$D2026-06-12T14:30:18.342Z","view_time":null,"first_public_time":"$D2019-09-15T20:16:42.462Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":435,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"cb194ebcc81c247f","slug":"geometric","title":"Geometric.js","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"geometric.polygonCentroid, geometric.polygonMean","cells":[{"id":0,"value":"md`# geometric.polygonCentroid, geometric.polygonMean`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"md`Click anywhere to start drawing!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"viewof showMean = Inputs.toggle({ label: \"Show mean:\", value: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"viewof restart = Inputs.button(\"Restart\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"md`In geometry, a centroid is a polygon's center of mass, while the mean center is the average of its vertices. [Geometric.js](https://github.com/HarryStevens/geometric) provides functions for calculating these: [geometric.polygonCentroid](https://github.com/HarryStevens/geometric#polygonCentroid)(polygon) and [geometric.polygonMean](https://github.com/HarryStevens/geometric#polygonMean)(polygon).\n\nDepending upon the polygon, these points could be close to each other or far away. For instance, in a regular polygon, the centroid and mean center are the same.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"md`But if the polygon is irregular, and in particular if many of its vertices cluster near each other, the centroid and mean are quite different.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"geometric = require(\"geometric@3\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 29:"$28:body"