31:[] 2f:{"title":"Maps - Centroids, Bounds, Abstractions","cells":[{"id":0,"value":"# Maps - Centroids, Bounds, Abstractions\nSometimes we want to use the feature geometry to compute new feature geometry, like finding country centroids or country bounding boxes. \nWe might use that to plot points, labels, circles, or other elements at these locations.\nWe might even then use these to generate an abstraction of the map itself and not have the traditional country boundaries show, but still use geographic lat/lon arrangements as a less traditional map.","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"### Map with labels and dots:","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":20,"value":"map = d3.select(mapContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"import {getMapData, drawMapLayer} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"world = getMapData(\"world110m\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"mapLayers = {\n let mapLayers = [];\n mapLayers[\"countries\"] = drawMapLayer(map,\"countries\",world.features,world.idField);\n return mapLayers;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":34,"value":"-------","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"### and we use [path.centroid](https://github.com/d3/d3-geo/blob/v3.0.1/README.md#path_centroid), [d3.geoCentroids](https://github.com/d3/d3-geo/blob/v3.0.1/README.md#geoCentroid), [path.bounds](https://github.com/d3/d3-geo/blob/v3.0.1/README.md#path_bounds), and [d3.geoBounds](https://github.com/d3/d3-geo/blob/v3.0.1/README.md#geoBounds) to get new locations\nSee the API references linked to each for detail. \n\nI've created some functions to import to make this a little quicker, but the core is in the API.","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"import {centroids, geoCentroids, bounds, geoBounds} with {projection} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"This gets lon/lat spherical centroids for each country feature in the world dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"countryCentroids = {\n let countryCentroids = geoCentroids(world.features, \"id\");\n countryCentroids.forEach(d => {\n d.lon = d.coord[0];\n d.lat = d.coord[1];\n });\n return countryCentroids;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"So I can use those to place labels on the above map:","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"mapLayers[\"countrylabels\"] = map.append(\"g\").attr(\"id\",\"countrylabels\")\n .selectAll(\"text\")\n .data(countryCentroids)\n .join(\"text\")\n .attr(\"x\", d => projection([d.lon,d.lat])[0])\n .attr(\"y\", d => projection([d.lon,d.lat])[1])\n .text(d => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"mapLayers[\"countryDots\"] = map.append(\"g\").attr(\"id\",\"countryDots\")\n .selectAll(\"circle\")\n .data(countryCentroids)\n .join(\"circle\")\n .attr(\"cx\", d => projection([d.lon,d.lat])[0])\n .attr(\"cy\", d => projection([d.lon,d.lat])[1])\n .attr(\"r\", d => Math.random()*10) // random right now, but you get the idea.","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"import {rFromArea} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":217,"value":"--------","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"# Abstracted maps:\nAlternately you could do the same, but without the original country path boundaries to make one a few different types of abstracted maps.","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"### Text only:","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":124,"value":"textMap = d3.select(textMapContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"textMap.select(\"#countrylabels\").selectAll(\"text\")\n .data(countryCentroids)\n .join(\"text\")\n .attr(\"x\", d => projection([d.lon,d.lat])[0])\n .attr(\"y\", d => projection([d.lon,d.lat])[1])\n .text(d => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"### Dots as a map:","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":130,"value":"circleMap = d3.select(circleMapContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"circleMap.select(\"#circleslayer\").selectAll(\"circle\")\n .data(countryCentroids)\n .join(\"circle\")\n .attr(\"cx\", d => projection([d.lon,d.lat])[0])\n .attr(\"cy\", d => projection([d.lon,d.lat])[1])\n .attr(\"r\",5) // of course this could also be sized from data.","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"### Bounding Boxes as an abstract map:\nOK, some of them (Russia?) are really messing with this because they cover so much of the globe, but you get the idea.","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":152,"value":"bbMap = d3.select(boundingBoxMapContainer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"// using the planar (post projection) path.bounds for this one instead of spherical lon/lat\ncountryBBoxes = {\n let countryBBoxes = bounds(world.features, \"id\");\n countryBBoxes.forEach(d => {\n // returned arrays are [left,bottom] then [right,top]\n d.width = d.coord[1][0] - d.coord[0][0];\n d.height = d.coord[1][1] - d.coord[0][1];\n });\n return countryBBoxes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"bbMap.select(\"#bblayer\").selectAll(\"rect\")\n .data(countryBBoxes)\n .join(\"rect\")\n .attr(\"x\", d => d.coord[0][0])\n .attr(\"y\", d => d.coord[1][1])\n .attr(\"width\", d => d.width)\n .attr(\"height\", d => d.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"bbMap.select(\"#bblabels\").selectAll(\"text\")\n .data(countryBBoxes)\n .join(\"text\")\n .attr(\"x\", d => d.coord[0][0] + 2)\n .attr(\"y\", d => d.coord[1][1] + 10)\n .text(d => d.name)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}