Faceted multiline chart with tooltips

I have some faceted line plots with one set of data repeated across all the facets.

I’d like to show a tooltip that shows the data for the lines in the facet.

If I put a `tip:true` on the “faceted” line and the “repeating” line then I get two tips, that often occlude.

I made a working but janky example here and wondered if there was a more sane/canonical way to do it.

Thanks for any guidance you can provide

you could combine the first and last marks into one:

``````Plot.lineY(flattenedMpg, {
y: "mpg",
x:"date",
fx: "brand",
stroke: "#969696",
title: tipTitle,
tip: true
}),
``````

For performance (if you have thousands of points) I’d also suggest to group the data by date rather than do this linear search.

Thanks. I agree the linear search is undesirable. I was looking at the documentation for group and bin and couldn’t suss out how to do it.

I took a whack at it in the example above but its not working like the linear search one.

How do I group by date so it usefully makes this tip easier to create?

I was thinking of using d3.group to group by date, so you could easily look up the values. We can even create the tooltips at that point with d3.rollup:

``````Plot.plot({
grid: true,
fx: { domain: ["ford", "gm", "honda"] },
marks: [
Plot.frame(),
Plot.lineY(flattenedMpg, {
y: "mpg",
x: "date",
fx: "brand",
stroke: "#969696",
title: tipTitle,
tip: true
}),
Plot.lineY(toyotaMpg, {
y: "mpg",
x: "date",
stroke: "#0000FF"
})
]
})
``````
``````tipTitle = {
const tips = d3.rollup(
flattenedMpg,
(v) => v.map(({ brand, mpg }) => `\${brand}: \${mpg}`).join("\n"),
(d) => d.date
);
return ({ date }) => tips.get(date);
}
``````

Ahh ok. Thanks for clarifying. That gives all the “brands” data in the tip in each facet.

I didn’t say I was going for a single tip like

date: 1
honda: 24
toyota: 26

So in each brand’s facet, only their data and toyota data are shown, instead of all brands. I could pre-construct the tips so when rendering its just a lookup by date+brand or something. But that also seems extra because not all points need a tip drawn.

And also, just thinking aloud, what about mis-aligned timestamps. Like if the “toyota” data has weekly samples and the other brands are monthly how does a person get the interpolated value Plot draws on the honda line when showing the tip on a mid-month toyota data point.

I wonder if there’s a way to access the data in the active facet when constructing the tip.