I am trying to show text in each square, in a way similar to this block:
With the following code…
Plot.plot({
color: {
scheme: "greys",
reverse: true
},
y: {
label: "↑ Population",
tickFormat: "s",
grid: true
},
marks: [
Plot.barY(
data_sortable,
Plot.groupX(
{ y: "sum"},
{ x: "state",
y: "population",
fill: "ageGroup",
sort: {x: 'y', reverse: true}
}
)
),
// Add text to each box
Plot.textY( data_sortable,
Plot.groupX(
{ y: "sum", text: 'first'},
{ x: "state",
y: "ageGroup",
text: "ageGroup", // <-- not the right approach
fill: "red", // for debugging
sort: {x: 'y', reverse: true},
}
)
)
],
})
…I get this result (the red labels are all on the x axis):
As an additional feature: Ideally, if a square is too small to show text, that square would not show any.
If anyone has an idea on how to accomplish this/these with Observable Plot, I would greatly appreciate hearing it. Many thanks in advance!
Here is also a notebook in which I isolated the issue with minimal code.