Custom format for the tip mark?

[mbostock]

Like #1596, but for the tip mark.

[net]

Isn't custom formatting supported?

{ channels: { height: d => `${d.height} in` } }

[Fil]

It's a (hacky) way to address the task for now, but we'd prefer a way to format the display of values in the tip, rather than having to derive extra channels of formatted strings.

[mbostock]

And to add to what @Fil said, the channels option is overriding the channel, so overriding the x channel for example would interfere with the placement of the tip.

[aborruso]

It would be very convenient to have it

I'm making my first steps with plot, and I would like for example to have in bold the first line of tooltip (it’s a title) and to add a hyperlink at the end of the tooltip text.

[mbostock]

@aborruso That should probably be a separate issue to allow the title channel (or similar) to contain rich text or markup. Since the tooltip is rendered in SVG that won’t be easy.

[aborruso]

@aborruso That should probably be a separate issue to allow the title channel (or similar) to contain rich text or markup. Since the tooltip is rendered in SVG that won’t be easy.

I'll do it. Thank you again

[aborruso]

@aborruso That should probably be a separate issue to allow the title channel (or similar) to contain rich text or markup. Since the tooltip is rendered in SVG that won’t be easy.

The new issue #1767

[bzalk]

@mbostock @Fil it is super impressive how active you both are in supporting and enhancing d3/plot. Plot has progressed very nicely since you first released it. I am building a solution using plot and just ran into this tooltip issue. I'm going to post what I would like to be able to create via the tooltip rendering (even if it won't be possible to do for some time):

[jonhelfman]

These current values are very small, but the tip shows them as zero

[mbostock]

@jonhelfman You could try a y scale transform to multiply by 1e6 and change the units.

[jonhelfman]

Thank you for your comment.
I see the smiling face, so I guess you are joking, but I'm not really sure.
I think what would be nice is a way to set tickFormat:"~s" on the tooltip, right?

[jonhelfman]

Oh, snap, there's a smiley face on every comment. . .

[jonhelfman]

If you weren't joking, Could you please show me how your idea would fix the chart without making it seem like the data value are different? thanks

[mbostock]

@jonhelfman If you want to share your code I can show you how to use the transform option. You would use it with the label option to make clear that the units are micro-whatevers.

[jonhelfman]

Thank you very much! I put it here: https://observablehq.com/@jonhelfman/plot-tooltip-formatting-for-small-values

[mbostock]

Plot.plot({
  y: {
    transform: (d) => d * 1e6,
    label: "value (μ)"
  },
  marks: [
    Plot.lineY(data2, {
      x: "Time (s)",
      y: "value",
      z: "cellId",
      tip: true
    })
  ]
})

[jonhelfman]

Nice. It is actually now consistent with the X axis labeling. Also, because these are current values, I can add the units, A for amps, like this: label: "value (µA)". Thank you!

[jonhelfman]

Unfortunately, I can't tell in advance is 1e6 is going to be the correct multiplier. It works for this dataset, but I would like the same code to work for other data as well. I was relying on the "~s" formatting to make the tick labels as brief as possible. I like how I can specify tickFormat: "~s" on the color legend. For these reasons I would still like to upvote custom tip formatting. Thanks.

[mbostock]

@jonhelfman Yes, you’d have to look at the values (Plot.valueof(data2, "value")) to figure out the appropriate units. You might find d3.extent or d3.precisionPrefix helpful. I also filed #1816 as a separate enhancement; Plot could determine the appropriate units automatically from the channel values.

[jonhelfman]

Thank you. I'm confused by #1816 -- don't we already have code for this for the "~s" formatting of the tick labels of the chart and color legend? I had imagined that we just wanted to reuse that same code for the tip, no?

[mbostock]

@jonhelfman The “~s” format adds the units every time a value is formatted, and in some contexts, the units can change depending on the value. The #1816 idea is to apply the units as a transform to all values, and then show the units in the label rather than the formatted value, as we did by hand above. The only difference is that the e.g. 1e6 (micros) is determined automatically.

[jonhelfman]

k. thanks again. I updated the example to be slightly more complex, but closer to what I am actually trying to do: https://observablehq.com/@jonhelfman/plot-tooltip-formatting-for-small-values

Now there are two different ranges of values (one for 'diff' and one for 'value'), but they have different Si prefixes in the legend tick labels and the chart tick labels, respectively. Now I'm not sure I can use the scale transform and label trick

[Fil]

Another suggestion would be an option to censor some of the channels, adding to (or overriding) the ignoreChannels set.

plot/src/marks/tip.js

Line 21 in ec4e8f0

// These channels are not displayed in the tip; TODO allow customization.