Is there a way to associate hyperlink to Plot text?

New To Observable
1

Hi,
I would like to insert a note, in the bottom-left, and to associate to it an URL, useful to get some related informations.

Is there a way to associate a Plot.text to an hyperlink?

Thank you

      Plot.text(
        [
          `
lorem ipsum
`
        ],
        {
          frameAnchor: "bottom-left",
          dx: 10,
          dy: -10,
          fontSize: 12
        }
      )
2 Likes
2

You could include just about anything you want as a function mark, like so:

() =>
  svg`<a target="_blank" href="https://allisonhorst.github.io/palmerpenguins/">
    <text transform="translate(40,280)">Reference</text>
  </a>`

Here it is in action:

1 Like
3

Thank you very much.

Could you explain how to use it inside this hello world example, replacing “lorem ipsum” with your “reference”?

     Plot.text(
        ["lorem ipsum"],
        {
          frameAnchor: "bottom-left",
          dx: 10,
          dy: -10,
          fontSize: 12
        }
      )
4

I don’t see how, no. Your example is a text mark and I don’t see any way to create a hyperlink using a text mark in Observable’s text mark examples or in the GitHub reference. I’m recommending that you not use a text mark but rather use a function mark. If you’d like to see how that fits into a complete example, you can follow the link in my first response. I’ve circled that link in the following static image:

Screen Shot 2023-04-25 at 12.58.52 PM
Screen Shot 2023-04-25 at 12.58.52 PM1448Ă—798 31.3 KB

5

You can specify an href channel:

Plot.text(
  ["lorem ipsum"],
  {
    frameAnchor: "bottom-left",
    dx: 10,
    dy: -10,
    fontSize: 12,
    href: d => `https://google.com?q=${d}`
  }
).plot()

The href channel is available on all marks.

1 Like
6

Documented here:

1 Like
7

Thank you very much, I was sure it could be done.

8

Thank you very much @Cobus

9

In more ways than 1!

1 Like
10

Thank you, but I was looking for plot text solution .