30:[{"id":"9195e34f330033be326a613a679f8885110ee0c3d16cdaff4b2e3ca95fe19a8b7c4831fb7d1bc69d1d403dcc3581a71487f72fcd693362768a9be8c2a01ada06","href":"https://static.observableusercontent.com/files/9195e34f330033be326a613a679f8885110ee0c3d16cdaff4b2e3ca95fe19a8b7c4831fb7d1bc69d1d403dcc3581a71487f72fcd693362768a9be8c2a01ada06","name":"countyShapes.json","type":"application/json","lastModified":1674224588745.905,"size":3055950}] 2e:{"title":"Centroid Transform / Observable Plot","cells":[{"id":0,"value":"

Centroid Transform / Observable Plot

Observable Plot › Transforms › Centroid · API

\n\n# Plot: Centroid\n\nPlot offers two helpers that derive centroids from GeoJSON geometries: the [centroid](https://github.com/observablehq/plot/blob/main/README.md#plotcentroidoptions) initializer, and the [geoCentroid](https://github.com/observablehq/plot/blob/main/README.md#plotgeocentroidoptions) transform.\n\nBoth can be used to position a symbol or a text label on a given geometry. While Plot.centroid computes the centroid of a geometry _after_ projection, Plot.geoCentroid computes it _before_ projection, then projects the resulting coordinates. This difference has a few implications.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"Let’s begin with [**centroid**](https://github.com/observablehq/plot/blob/main/README.md#plotcentroidoptions). It is an [initializer](https://github.com/observablehq/plot/blob/main/README.md#initializers), and as such operates _after_ the geometries have been projected to screen coordinates. The resulting **x** and **y** channels reference the pixel coordinates of the planar centroid of the _projected_ shapes. No assumption is made about the geometries: they can be in any coordinate system, and the returned value is in the frame—as long as the projected geometry returns at least one visible point.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"counties = FileAttachment(\"countyShapes.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"Plot.dot(counties.features, Plot.centroid()).plot({projection: \"albers-usa\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"The centroid and geoCentroid transforms can be used by any mark that consumes the x and y channels, not only dots! For instance, to create labels for the counties whose names start with V—this is more interesting than it seems—, we use the [text](/@observablehq/plot-text) mark:","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"Plot.plot({\n projection: \"albers-usa\",\n style: \"overflow: visible\",\n marks: [\n Plot.geo(counties, { strokeOpacity: 0.125, strokeWidth: 0.5 }),\n Plot.dot(\n counties.features,\n Plot.centroid({\n fill: \"currentColor\",\n stroke: \"white\",\n filter: (d) => d.properties.name.match(/^V/)\n })\n ),\n Plot.text(\n counties.features,\n Plot.centroid({\n text: (d) => d.properties.name,\n fill: \"currentColor\",\n stroke: \"white\",\n textAnchor: \"start\",\n dx: 4,\n filter: (d) => d.properties.name.match(/^V/)\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"Or, with the [voronoiMesh](/@observablehq/plot-voronoi) mark:","pinned":false,"hidden":false,"mode":"md"},{"id":275,"value":"Plot.voronoiMesh(counties.features, Plot.centroid()).plot({projection: \"albers\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"---\nThe **[geoCentroid](https://github.com/observablehq/plot/blob/main/README.md#plotgeocentroidoptions)** transform is more specialized, as the **x** and **y** channels it derives represent the longitudes and latitudes of the centroids of the given GeoJSON geometries, before projection. It expects the geometries to be specified in _spherical_ coordinates. It is more correct, in a geospatial sense—for example, the spherical centroid always represents the center of mass of the original shape, and it will be rotated exactly in line with the projection’s rotate argument. However, this also means that it might land outside the frame if only a part of the land mass is visible, and might be clipped by the projection.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"In practice, the difference is generally imperceptible. The map below shows how they are aligned (with the Albers-USA projection) for all the US counties… _but_ for the Aleutians West (dashed circle at the bottom-left). That county’s western-most islands happen to be clipped out by the projection; the geoCentroid (in pink) takes into account the hidden part, while the centroid (blue) focuses on the visible part.","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"Plot.plot({\n marginLeft: 30,\n marginBottom: 30,\n projection: \"albers-usa\",\n inset: 3,\n marks: [\n Plot.frame(),\n Plot.dot([\"O\"], {\n frameAnchor: \"bottom-left\",\n strokeWidth: 1.2,\n fill: \"white\",\n fillOpacity: 0.9,\n stroke:\"currentColor\",\n strokeDasharray: 4,\n r: 38,\n dx: 12,\n dy: -20\n }),\n Plot.dot(counties.features, Plot.geoCentroid({ fill: \"pink\", r: 3.5 })),\n Plot.dot(\n counties.features,\n Plot.centroid({ stroke: \"steelblue\", title: (d) => d.properties.name })\n ),\n Plot.geo(\n counties.features.filter((d) => d.properties.name === \"Aleutians West\"),\n { dy: 3 } // cheat a bit to make the problem more visible\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"The geoCentroid transform is slightly faster than the centroid initializer—which might be useful if you have tens of thousands of features and want to show their density on a [hexbin map](https://observablehq.com/@observablehq/plot-mapping?collection=@observablehq/plot):","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"Plot.dot(counties.features, Plot.hexbin({r:\"count\"}, Plot.geoCentroid())).plot({projection: \"albers\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}