document geo+centroid (#1652)

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

docs/marks/geo.md

@@ -11,6 +11,7 @@ const walmarts = shallowRef({type: "FeatureCollection", features: []});
 const world = shallowRef(null);
 const statemesh = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.states, (a, b) => a !== b) : {type: null});
 const nation = computed(() => us.value ? topojson.feature(us.value, us.value.objects.nation) : {type: null});
+const states = computed(() => us.value ? topojson.feature(us.value, us.value.objects.states).features : []);
 const counties = computed(() => us.value ? topojson.feature(us.value, us.value.objects.counties).features : []);
 const land = computed(() => world.value ? topojson.feature(world.value, world.value.objects.land) : {type: null});
 
@@ -128,6 +129,22 @@ Plot.plot({
 ```
 :::
 
+The geo mark doesn’t have **x** and **y** channels; to derive those, for example to add [interactive tips](./tip.md), you can apply a [centroid transform](../transforms/centroid.md) on the geometries.
+
+:::plot defer https://observablehq.com/@observablehq/plot-state-centroids
+```js
+Plot.plot({
+  projection: "albers-usa",
+  marks: [
+    Plot.geo(statemesh, {strokeOpacity: 0.2}),
+    Plot.geo(nation),
+    Plot.dot(states, Plot.centroid({fill: "red", stroke: "var(--vp-c-bg-alt)"})),
+    Plot.tip(states, Plot.pointer(Plot.centroid({title: (d) => d.properties.name})))
+  ]
+})
+```
+:::
+
 The geo mark supports [faceting](../features/facets.md). Below, a comic strip of sorts shows the locations of Walmart store openings in past decades.
 
 :::plot defer https://observablehq.com/@observablehq/plot-map-large-multiples

docs/transforms/centroid.md

@@ -6,10 +6,10 @@ import * as topojson from "topojson-client";
 import {computed, shallowRef, onMounted} from "vue";
 
 const us = shallowRef(null);
-const countymesh = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.counties) : {type: null});
 const statemesh = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.states) : {type: null});
 const states = computed(() => us.value ? topojson.feature(us.value, us.value.objects.states).features : []);
 const counties = computed(() => us.value ? topojson.feature(us.value, us.value.objects.counties).features : []);
+const nation = computed(() => us.value ? topojson.feature(us.value, us.value.objects.nation) : []);
 
 onMounted(() => {
   d3.json("../data/us-counties-10m.json").then((data) => (us.value = data));
@@ -19,7 +19,7 @@ onMounted(() => {
 
 # Centroid transform
 
-Plot offers two transforms that derive centroids from GeoJSON geometries: [centroid](#centroid-options) and [geoCentroid](#geocentroid-options). These transforms can be used by any mark that accepts **x** and **y** channels. For instance, to label U.S. states we can use a [text mark](../marks/text.md).
+Plot offers two transforms that derive centroids from GeoJSON geometries: [centroid](#centroid-options) and [geoCentroid](#geocentroid-options). These transforms can be used by any mark that accepts **x** and **y** channels. Below, a [text mark](../marks/text.md) labels the U.S. states.
 
 :::plot defer https://observablehq.com/@observablehq/plot-state-labels
 ```js
@@ -68,6 +68,22 @@ Plot.dot(counties, Plot.hexbin({r:"count"}, Plot.geoCentroid())).plot({projectio
 ```
 :::
 
+Combined with the [pointer transform](../interactions/pointer.md), the centroid transform can add [interactive tips](../marks/tip.md) on a map:
+
+:::plot defer https://observablehq.com/@observablehq/plot-state-centroids
+```js
+Plot.plot({
+  projection: "albers-usa",
+  marks: [
+    Plot.geo(statemesh, {strokeOpacity: 0.2}),
+    Plot.geo(nation),
+    Plot.dot(states, Plot.centroid({fill: "red", stroke: "var(--vp-c-bg-alt)"})),
+    Plot.tip(states, Plot.pointer(Plot.centroid({title: (d) => d.properties.name})))
+  ]
+})
+```
+:::
+
 ## centroid(*options*)
 
 ```js