update docs

Author: mbostock

docs/marks/geo.md

@@ -49,7 +49,8 @@ Plot.plot({
   marks: [
     Plot.geo(counties, {
       fill: (d) => d.properties.unemployment,
-      title: (d) => `${d.properties.name}\n${d.properties.unemployment}%`
+      title: (d) => `${d.properties.name} ${d.properties.unemployment}%`,
+      tip: true
     })
   ]
 })
@@ -129,17 +130,16 @@ 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.
+The geo mark doesn’t have **x** and **y** channels; when you use the [**tip** option](./tip.md), the [centroid transform](../transforms/centroid.md) is implicitly applied on the geometries to compute the tip position. <VersionBadge pr="2088" /> The centroids are shown below in red.
 
 :::plot defer https://observablehq.com/@observablehq/plot-state-centroids
 ```js
 Plot.plot({
   projection: "albers-usa",
   marks: [
-    Plot.geo(statemesh, {strokeOpacity: 0.2}),
+    Plot.geo(states, {strokeOpacity: 0.1, tip: true, title: (d) => d.properties.name}),
     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})))
+    Plot.dot(states, Plot.centroid({fill: "red", stroke: "var(--vp-c-bg-alt)"}))
   ]
 })
 ```
@@ -157,7 +157,7 @@ Plot.plot({
   marks: [
     Plot.geo(statemesh, {strokeOpacity: 0.2}),
     Plot.geo(nation),
-    Plot.geo(walmarts, {fy: (d) => d.properties.date, r: 1.5, fill: "blue"}),
+    Plot.geo(walmarts, {fy: (d) => d.properties.date, r: 1.5, fill: "blue", tip: true, title: (d) => d.properties.date}),
     Plot.axisFy({frameAnchor: "top", dy: 30, tickFormat: (d) => `${d.getUTCFullYear()}’s`})
   ]
 })

src/plot.js

@@ -513,9 +513,10 @@ function derive(mark, options = {}) {
   return initializer({...options, x: null, y: null}, (_data, _facets, _channels, scales, dimensions, context) => {
     const state = context.getMarkState(mark);
     const {facets, channels} = state;
-    // Promote the geometry channel to the x and y channel using the centroid initializer, if needed.
-    if (!channels.x && !channels.y && channels.geometry) {
-      const update = centroid().initializer(channels.geometry.value, facets, channels, scales, dimensions, context);
+    const {x, y, geometry} = channels;
+    if (!x && !y && geometry) {
+      // Promote the geometry channel to x and y channels using the centroid initializer.
+      const update = centroid().initializer(geometry.value, facets, channels, scales, dimensions, context);
       return {...state, channels: {...channels, x: update.channels.x, y: update.channels.y}};
     }
     return state;

test/output/geoText.svg

@@ -2,16 +2,16 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 import {feature} from "topojson-client";
 
-// export async function londonMap() {
-//   const london = feature(await d3.json("data/london.json"), "boroughs");
-//   return Plot.plot({
-//     projection: {type: "transverse-mercator", rotate: [2, 0, 0], domain: london},
-//     marks: [
-//       Plot.geo(london),
-//       Plot.text(london.features, Plot.centroid({text: "id", stroke: "var(--plot-background)", fill: "currentColor"}))
-//     ]
-//   });
-// }
+export async function geoText() {
+  const london = feature(await d3.json("data/london.json"), "boroughs");
+  return Plot.plot({
+    projection: {type: "transverse-mercator", rotate: [2, 0, 0], domain: london},
+    marks: [
+      Plot.geo(london),
+      Plot.text(london.features, Plot.centroid({text: "id", stroke: "var(--plot-background)", fill: "currentColor"}))
+    ]
+  });
+}
 
 export async function geoTip() {
   const london = feature(await d3.json("data/london.json"), "boroughs");
@@ -33,37 +33,60 @@ export async function geoTip() {
         fill: "access",
         stroke: "var(--plot-background)",
         strokeWidth: 0.75,
+        channels: {borough: "borough"},
         tip: true
       })
     ]
   });
 }
 
-// export async function londonCarAccessGeoCentroid() {
-//   const london = feature(await d3.json("data/london.json"), "boroughs");
-//   const wide = await d3.csv<any>("data/london-car-access.csv", d3.autoType);
-//   const access = wide.flatMap(({borough, y2001, y2011, y2021}) => [
-//     {borough, year: "2001", access: y2001},
-//     {borough, year: "2011", access: y2011},
-//     {borough, year: "2021", access: y2021}
-//   ]);
-//   const boroughs = new Map(london.features.map((d) => [d.id, d]));
-//   return Plot.plot({
-//     width: 900,
-//     projection: {type: "transverse-mercator", rotate: [2, 0, 0], domain: london},
-//     color: {scheme: "RdYlBu", pivot: 0.5},
-//     marks: [
-//       Plot.geo(
-//         access,
-//         Plot.geoCentroid({
-//           fx: "year",
-//           geometry: (d) => boroughs.get(d.borough),
-//           fill: "access",
-//           stroke: "var(--plot-background)",
-//           strokeWidth: 0.75,
-//           tip: true
-//         })
-//       )
-//     ]
-//   });
-// }
+export async function geoTip2() {
+  const us = await d3.json<any>("data/us-counties-10m.json");
+  const nation = feature(us, us.objects.nation);
+  const states = feature(us, us.objects.states).features;
+  return Plot.plot({
+    projection: "albers-usa",
+    marks: [
+      Plot.geo(states, {strokeOpacity: 0.1, tip: true, title: (d) => d.properties.name}),
+      Plot.geo(nation),
+      Plot.dot(states, Plot.centroid({fill: "red", stroke: "black"}))
+    ]
+  });
+}
+
+export async function geoTipCentroid() {
+  const london = feature(await d3.json("data/london.json"), "boroughs");
+  const wide = await d3.csv<any>("data/london-car-access.csv", d3.autoType);
+  const access = wide.flatMap(({borough, y2001, y2011, y2021}) => [
+    {borough, year: "2001", access: y2001},
+    {borough, year: "2011", access: y2011},
+    {borough, year: "2021", access: y2021}
+  ]);
+  const boroughs = new Map(london.features.map((d) => [d.id, d]));
+  return Plot.plot({
+    width: 900,
+    projection: {type: "transverse-mercator", rotate: [2, 0, 0], domain: london},
+    color: {scheme: "RdYlBu", pivot: 0.5},
+    marks: [
+      Plot.geo(access, {
+        fx: "year",
+        geometry: (d) => boroughs.get(d.borough),
+        fill: "access",
+        stroke: "var(--plot-background)",
+        strokeWidth: 0.75
+      }),
+      Plot.tip(
+        access,
+        Plot.pointer(
+          Plot.geoCentroid({
+            fx: "year",
+            geometry: (d) => boroughs.get(d.borough),
+            fill: "access",
+            format: {x: null, y: null},
+            channels: {borough: "borough"}
+          })
+        )
+      )
+    ]
+  });
+}