Some Plot properties can't be dynamic?

Community Help
1

Trying to adjust the position of text based on where it would be placed… is it not possible to do this?

      Plot.text(data, Plot.selectMaxY({
        x: "time", y: "value",
        text: d => `Observed Max: ${d.value}`,
        dy: d => d.time < x_axis_midpoint ? -2 :  2,
        dx: d => d.time < x_axis_midpoint ?  2 : -2,
        textAnchor: d => d.time < x_axis_midpoint ? "start" : "end",
        frameAnchor: "bottom",
        fill: "red",
        fontSize: label_size,
      })),

When I try this, I literally get d => d.time < x_axis_midpoint ? "start" : "end", as the value of the text-anchor attribute.

2

Looking at the docs it seems like these text options are constant options.

The following text-specific constant options are also supported:

  • textAnchor - the text anchor for horizontal position; start, end, or middle

So not sure if that is possible.

1 Like
3

It’s not supported at the moment (see variable styles by Fil · Pull Request #909 · observablehq/plot · GitHub).

My solution to this type of situation is usually something like:

Array.from(d3.group(data, d => d.time < x_axis_midpoint),
  ([lower, values]) => 
     Plot.text(values, Plot.selectMaxY({
        x: "time", y: "value",
        text: d => `Observed Max: ${d.value}`,
        dy: lower ? -2 :  2,
        dx: lower ?  2 : -2,
        textAnchor: lower ? "start" : "end",
        frameAnchor: "bottom",
        fill: "red",
        fontSize: label_size,
      })),

(But in this precise case it will one value for each case, so it doesn’t work…)

PS: please prefer github discussions as we’re trying to centralize the knowledge, support and discussions there.

1 Like
4

Thanks @Cobus, I didn’t really see (or grep) the “constant options” definition.

@Fil, I didn’t know the cool kids we’re moving on from forums… got it. :slight_smile:

FWIW, for posterity I did this and it seems good:

const max = data.reduce((max, obj) => obj.value > max.value ? obj : max, data[0]);
const max_label_to_right = max.time < x_axis_midpoint
// ...then in the mark...
  dx: max_label_to_right ?  3 : -3,
  textAnchor: max_label_to_right ? "start" : "end",
1 Like