31:T657,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const map = svg.append("g"); /*const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed);*/ map .selectAll("path") .data(countries.features) .join("path") .attr("d", path) .attr("class", "unclicked") .attr("fill", "#f4f4f4") .attr("stroke", "#999") .attr("stroke-width", 0.3); map .selectAll("path") .on("touchmove mousemove", handleMouseMove) .on("touchend mouseleave", handleMouseLeave) .on("click", handleClick); const center = map.append("g"); center .selectAll("circle") .data(methods) .join("circle"); /*svg.call(zoom); function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function zoomed() { const { transform } = d3.event; map.attr("transform", transform); map.attr("stroke-width", 1 / transform.k); }*/ invalidation.then(() => { mutable chosen = []; }); return Object.assign(svg.node(), { update(centers) { center.selectAll("circle").call(c => { c.attr("r", d => (centers.get(d) ? 3 : 0)) .attr("transform", d => { if (centers.get(d)) return `translate(${projection(centers.get(d))})`; }) .attr("fill", d => color(d)); }); }, clear() { map .selectAll("path") .attr("class", "unclicked") .attr("fill", "#f4f4f4"); } }); }32:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1592341658234.39,"size":756420}] 2f:{"title":"Geographical Center Calculator","cells":[{"id":0,"value":"md`# Geographical Center Calculator\n\nA handy tool to calculate the center (x, y) of one country or a group of countries in ${methods.length} different ways, inspired by [@mendozaline](https://observablehq.com/@mendozaline/finding-the-center-of-a-polygon). \n\nNote that *polylabel* only works with Polygons, whereas the other three work with both Polygons and MultiPolygons. Therefore, *polylabel* results will only appear if the biggest-polygon option is checked, or when the selected countries form a single polygon on the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"html`\n

${viewof clear}

${viewof filter}

${viewof prettify}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`*Selecting: ${chosenToString}*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"textBox = html`\n

\n${hovered}
\n${[...centers.entries()].map((d, i) => {\n if (!chosen[0] || !d[1]) return html`
`;\n const arr = prettify ? format(d[1]) : d[1];\n return html`\n${d[0]}: ${arr.join(\", \")}
\n`;\n})}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"md`___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"viewof clear = button(\"Clear\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"viewof filter = checkbox({\n options: [{ value: \"b\", label: \"Only consider biggest polygon\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"viewof prettify = checkbox({\n options: [{ value: \"p\", label: \"Prettify results\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"function getCenter(method) {\n if (!chosen[0]) return null;\n\n const select = filter ? biggest : aggregate;\n\n if (method === \"d3.geoCentroid\") {\n return d3.geoCentroid(select);\n }\n\n if (method === \"turf.centroid\") {\n return turf.centroid(select).geometry.coordinates;\n }\n\n if (method === \"turf.centerOfMass\") {\n return turf.centerOfMass(select).geometry.coordinates;\n }\n\n if (filter || aggregate.type === \"Polygon\")\n return polylabel(select.coordinates, 1.0);\n return null;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":961,"value":"function format([x, y]) {\n const dir = [[\"N\", \"S\"], [\"E\", \"W\"]];\n return [y, x].map((d, i) => {\n const suffix = d >= 0 ? dir[i][0] : dir[i][1];\n const rawDeg = Math.abs(d);\n const deg = Math.floor(rawDeg);\n const rawMin = (rawDeg - Math.floor(deg)) * 60;\n const min = Math.floor(rawMin);\n const rawSec = (rawMin - min) * 60;\n const sec = Math.floor(rawSec);\n\n return `${deg}°${d3.format(\"02\")(min)}'${d3.format(\"02\")(sec)}''${suffix}`;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"centers = new Map(methods.map(d => [d, getCenter(d)]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"methods = [\n \"d3.geoCentroid\",\n \"turf.centroid\",\n \"turf.centerOfMass\",\n \"mapbox.polylabel\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"color = d3.scaleOrdinal(methods.map(d => d.name), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"biggest = {\n if (!chosen[0]) return null;\n\n if (aggregate.type === \"Polygon\") return aggregate;\n\n return aggregate.coordinates\n .map(d => ({ type: \"Polygon\", coordinates: d }))\n .sort((a, b) => d3.descending(d3.geoArea(a), d3.geoArea(b)))[0];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"aggregate = {\n if (!chosen[0]) return null;\n\n const aggregate = topojson.merge(\n world,\n world.objects.countries.geometries.filter(d =>\n chosen.includes(d.properties.name)\n )\n );\n\n // If the selected countries form a polygon\n if (aggregate.coordinates.length === 1)\n return {\n type: \"Polygon\",\n coordinates: aggregate.coordinates[0]\n };\n\n return aggregate;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"mutable chosen = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"mutable hovered = \"Select a country\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"chosenToString = chosen\n .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))\n .join(\" - \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"{\n map.update(centers);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"{\n clear;\n mutable chosen = [];\n map.clear();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"function handleMouseMove(d) {\n if (d3.select(this).attr(\"class\") === \"unclicked\") {\n d3.select(this).attr(\"fill\", \"#ccc\");\n }\n mutable hovered = d.properties.name;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"function handleMouseLeave() {\n if (d3.select(this).attr(\"class\") === \"unclicked\") {\n d3.select(this).attr(\"fill\", \"#f4f4f4\");\n }\n mutable hovered = \"Select a country\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"function handleClick(d) {\n if (d3.select(this).attr(\"class\") === \"unclicked\") {\n d3.select(this)\n .attr(\"class\", \"clicked\")\n .attr(\"fill\", \"#999\");\n } else {\n d3.select(this)\n .attr(\"class\", \"unclicked\")\n .attr(\"fill\", \"#f4f4f4\");\n }\n mutable chosen = d3\n .select(this.parentNode)\n .selectAll(\".clicked\")\n .data()\n .map(d => d.properties.name);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = 510","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"projection = d3.geoNaturalEarth1().fitSize([width, height], countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"turf = require(\"@turf/turf@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":821,"value":"polylabel = require(\"https://bundle.run/@mapbox/polylabel@1.0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"import { button, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`___\n## Scratch`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}