From 055cc34079b54ec12542826e8ed476f19f7b7bbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 29 May 2023 11:51:58 +0200 Subject: [PATCH 1/6] document geo+centroid closes #1651 --- docs/marks/geo.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/marks/geo.md b/docs/marks/geo.md index 43d220b9dc..13e85795c6 100644 --- a/docs/marks/geo.md +++ b/docs/marks/geo.md @@ -128,6 +128,8 @@ Plot.plot({ ``` ::: +The geo mark doesn’t have **x** and **y** channels; to derive those, for example to add [interactive tips](https://observablehq.com/@observablehq/plot-maps-tips), you can apply a [centroid transform](../transforms/centroid.md) on the geometries. + 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 From 6d2e90d5232028f3d76f1cde66409a4c758e21ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 31 May 2023 14:58:17 +0200 Subject: [PATCH 2/6] inline interactive tip example --- docs/marks/geo.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/marks/geo.md b/docs/marks/geo.md index 13e85795c6..8a818a7cb5 100644 --- a/docs/marks/geo.md +++ b/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,7 +129,21 @@ Plot.plot({ ``` ::: -The geo mark doesn’t have **x** and **y** channels; to derive those, for example to add [interactive tips](https://observablehq.com/@observablehq/plot-maps-tips), you can apply a [centroid transform](../transforms/centroid.md) on the geometries. +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. From 0e159627bd2dcbc614aecb41f9be3f8c23501d18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 31 May 2023 14:58:40 +0200 Subject: [PATCH 3/6] copy interactive tip example to the centroid page --- docs/transforms/centroid.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/transforms/centroid.md b/docs/transforms/centroid.md index 9c8278f5c0..cc3fad0dbf 100644 --- a/docs/transforms/centroid.md +++ b/docs/transforms/centroid.md @@ -10,6 +10,7 @@ const countymesh = computed(() => us.value ? topojson.mesh(us.value, us.value.ob 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)); @@ -68,6 +69,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](./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 From 54d74eedbb54fa78c537ba1d9b5947c5c5179edb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 31 May 2023 15:04:26 +0200 Subject: [PATCH 4/6] replace complicated v-counties example with state labels --- docs/transforms/centroid.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/transforms/centroid.md b/docs/transforms/centroid.md index cc3fad0dbf..0e52c8f849 100644 --- a/docs/transforms/centroid.md +++ b/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,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. For instance, a [text mark](../marks/text.md) to label the U.S. States. :::plot defer https://observablehq.com/@observablehq/plot-state-labels ```js From 52e6b043e30613f1e252852984c7066d7c14c137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 31 May 2023 15:11:02 +0200 Subject: [PATCH 5/6] fix link --- docs/transforms/centroid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/transforms/centroid.md b/docs/transforms/centroid.md index 0e52c8f849..936beef9df 100644 --- a/docs/transforms/centroid.md +++ b/docs/transforms/centroid.md @@ -68,7 +68,7 @@ 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](./tip.md) on a map: +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 From 24abdeeb18d4f20e27fd19de4f0bb67b1aa55432 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 26 Jun 2023 20:20:39 +0200 Subject: [PATCH 6/6] Update docs/transforms/centroid.md Co-authored-by: Mike Bostock --- docs/transforms/centroid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/transforms/centroid.md b/docs/transforms/centroid.md index 18accf71cd..fb11d21c24 100644 --- a/docs/transforms/centroid.md +++ b/docs/transforms/centroid.md @@ -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, a [text mark](../marks/text.md) to label the U.S. States. +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