2d:null 2e:["$","title",null,{"children":"Geographical Center Calculator | Duy Nguyen | Observable"}] 33: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"); } }); }34:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1592341658234.39,"size":756420}] 31:{"id":"9294f1c9e184ea2a","slug":"geographical-center-calculator","title":"Geographical Center Calculator","thumbnail":"d5567fec15d0cd635fbecd50c90962b15899b1e8972d5c777b07837af66093af","access_level":"public","create_time":"$D2020-06-16T20:47:02.541Z","update_time":"$D2020-08-30T16:19:06.107Z","view_time":null,"first_public_time":"$D2020-07-18T05:13:32.125Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fc7e2d71a30de93f","login":"duyknguyen","name":"Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/f19edf9e1118a419a9c0f4d4db777cc66b8fa72c62af89257261c01f09dff544","tier":"starter_2024"},"version":1064,"publish_version":1064,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f71a2edaa31e617","login":"duyknguyen","name":"Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/f19edf9e1118a419a9c0f4d4db777cc66b8fa72c62af89257261c01f09dff544","tier":null}],"members":[{"type":"individual","id":"3f71a2edaa31e617","login":"duyknguyen","name":"Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/f19edf9e1118a419a9c0f4d4db777cc66b8fa72c62af89257261c01f09dff544","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"67263413196eda4d","slug":"utilities","title":"Applications","owner":{"id":"fc7e2d71a30de93f","login":"duyknguyen","name":"Duy Nguyen"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"html`\n

${viewof clear}

${viewof filter}

${viewof prettify}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`*Selecting: ${chosenToString}*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"md`___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"viewof clear = button(\"Clear\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"viewof filter = checkbox({\n options: [{ value: \"b\", label: \"Only consider biggest polygon\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"viewof prettify = checkbox({\n options: [{ value: \"p\", label: \"Prettify results\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"centers = new Map(methods.map(d => [d, getCenter(d)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"methods = [\n \"d3.geoCentroid\",\n \"turf.centroid\",\n \"turf.centerOfMass\",\n \"mapbox.polylabel\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"color = d3.scaleOrdinal(methods.map(d => d.name), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"mutable chosen = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"mutable hovered = \"Select a country\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"chosenToString = chosen\n .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))\n .join(\" - \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"{\n map.update(centers);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"{\n clear;\n mutable chosen = [];\n map.clear();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = 510","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"projection = d3.geoNaturalEarth1().fitSize([width, height], countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"turf = require(\"@turf/turf@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"polylabel = require(\"https://bundle.run/@mapbox/polylabel@1.0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"import { button, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"md`___\n## Scratch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"