31:T408,{ const layers = [ new DeckGL.GeoJsonLayer({ id: "geojson-layer", data: data.features, pickable: true, getFillColor: d => [240, 240, 240, 245], getLineColor: d => [100, 100, 100, 255], lineWidthMinPixels: 1, getLineWidth: 7.5, autoHighlight: true, highlightColor: [255, 200, 0, 100] }), new DeckGL.ScatterplotLayer({ id: "sp-layer", data: choices.flatMap(d => allData[d]), getPosition: d => d.geometry.coordinates, getFillColor: d => colors[d.properties.center] ? colors[d.properties.center] : [240, 240, 240, 245], getLineColor: d => colors[d.properties.center] ? colors[d.properties.center] : [100, 100, 100, 255], pointRadiusMinPixels: 55, getRadius: 85, pickable: true, autoHighlight: true, highlightColor: [220, 20, 60, 175] }) ]; deck.setProps({ layers: [layers], getCursor: interState => "crosshair" }); return layers; }32:[] 2f:{"title":"Finding the Center of a Polygon","cells":[{"id":0,"value":"md`# Finding the Center of a Polygon `","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"viewof choices = checkbox({\n options: [\n { value: \"Turf Center of Mass\", label: \"Turf Center of Mass\" },\n { value: \"D3\", label: \"D3\" },\n { value: \"Turf Centroid\", label: \"Turf Centroid\" },\n { value: \"Mapbox Polylabel\", label: \"Mapbox Polylabel\" }\n ],\n value: [\"D3\", \"Turf Center of Mass\", \"Turf Centroid\", \"Mapbox Polylabel\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"container = html`\n

turf/center of mass

d3/geoCentroid

turf/centroid

mapbox/polylabel

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"deck = {\n return new DeckGL.DeckGL({\n container,\n map,\n mapStyle: \"mapbox://styles/mapbox/dark-v9\",\n initialViewState: {\n longitude: -122.66,\n latitude: 45.5431,\n zoom: 10.5,\n minZoom: 10.5,\n maxZoom: 14\n },\n controller: true,\n getTooltip,\n mapboxApiAccessToken: t,\n layers: []\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"getTooltip = d => {\n const hasObj = d && d.object;\n if (!hasObj) return null;\n const geoType = d.object.geometry.type;\n const center =\n d.object.properties && d.object.properties.center\n ? d.object.properties.center\n : \"N/A\";\n const ttp = {\n Point: `Name: ${d.object.properties.name}\n Geometry Type: ${geoType}\n Centroid Type: ${center}`,\n Polygon: `Name: ${d.object.properties.name}\n Geometry Type: ${geoType}`,\n MultiPolygon: `Name: ${d.object.properties.name}\n Geometry Type: ${geoType}`\n };\n const style = {\n color: \"white\"\n };\n return {\n text: ttp[geoType],\n style\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"colors = {\n return {\n \"Mapbox PolyLabel\": [65, 105, 225, 200],\n \"Turf Center of Mass\": [50, 205, 50, 200],\n \"Turf Centroid\": [139, 0, 139, 200],\n \"D3 Centroid\": [255, 140, 0, 200]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"mbPolylabel = data.features\n .filter(d => d.geometry.type !== \"MultiPolygon\")\n .map(d => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: polylabel(d.geometry.coordinates, 1.0)\n },\n properties: {\n center: \"Mapbox PolyLabel\",\n polyType: d.geometry.type,\n name: d.properties.name\n }\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"turfCent = data.features.map(d => {\n return turf.centroid(d.geometry, {\n center: \"Turf Centroid\",\n name: d.properties.name\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"turfCenterMass = data.features.map(d => {\n return turf.centerOfMass(d.geometry, {\n center: \"Turf Center of Mass\",\n name: d.properties.name\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"d3Cent = {\n function check_hemisphere(point) {\n return point[1] < 0 ? [point[0] - 180, -point[1]] : point;\n }\n\n return data.features.map(d => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: check_hemisphere(d3.geoCentroid(d.geometry))\n },\n properties: { center: \"D3 Centroid\", name: d.properties.name }\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = await fetch(\"https://gist.githubusercontent.com/mendozaline/9f29b125ebfd43d0bc139717bc538029/raw/037029fb185d07f6e7e11b03e6467602149f60ad/nhoods.json\").then(d => d.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"allData = {\n return {\n D3: d3Cent,\n \"Turf Center of Mass\": turfCenterMass,\n \"Turf Centroid\": turfCent,\n \"Mapbox Polylabel\": mbPolylabel\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"polylabel = require(\"https://bundle.run/@mapbox/polylabel@1.0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"DeckGL = require.alias({\n h3: {},\n s2Geometry: {}\n})('deck.gl@~8.2.0/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"map = await require('mapbox-gl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"t = \"pk.eyJ1IjoidGhlbWVuZG96YWxpbmUiLCJhIjoiY2p3NWpheGxxMXFtajQ5cHM2MHQ0ZndpOCJ9.xKEeKZfe48_dOSbF-qZnqQ\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}