replace complicated v-counties example with state labels

Author: Fil

docs/transforms/centroid.md

@@ -6,7 +6,6 @@ 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 : []);
@@ -20,34 +19,15 @@ 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 the U.S. counties with names starting with V—this is more interesting than it seems—we can use a [dot mark](../marks/dot.md) and 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. For instance, a [text mark](../marks/text.md) to label the U.S. States.
 
-:::plot defer https://observablehq.com/@observablehq/plot-v-counties
+:::plot defer https://observablehq.com/@observablehq/plot-state-labels
 ```js
 Plot.plot({
   projection: "albers-usa",
   marks: [
-    Plot.geo(countymesh, {strokeWidth: 0.1}),
-    Plot.geo(statemesh, {strokeWidth: 0.5}),
-    Plot.dot(
-      counties,
-      Plot.centroid({
-        filter: (d) => d.properties.name.match(/^V/),
-        fill: "currentColor",
-        stroke: "var(--vp-c-bg)"
-      })
-    ),
-    Plot.text(
-      counties,
-      Plot.centroid({
-        filter: (d) => d.properties.name.match(/^V/),
-        text: (d) => d.properties.name,
-        fill: "currentColor",
-        stroke: "var(--vp-c-bg)",
-        frameAnchor: "left",
-        dx: 6
-      })
-    )
+    Plot.geo(statemesh),
+    Plot.text(states, Plot.centroid({text: (d) => d.properties.name, fill: "currentColor", stroke: "var(--vp-c-bg)"}))
   ]
 })
 ```