Faceted multiline chart with tooltips

Community Help
1

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

2

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.

3

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?

4

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);
}
5

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.