Showing combined data in tooltip for stacked plots

[milianw]

Hey there,

I am struggling with adapting tooltips to my needs in stacked charts. My charts basically show data from two channels. The tooltip by default would only show me the data for the single channel that I’m hovering. I would like to customize this, to show the data for both channels and the sum of both channels, in the tooltip. What is the best way to achieve that?

So far, I managed it a bit by duplicating my data, basically I transform my data first:

tidyUp(rawGeneratedByHour, function(row) {
  return [{
    hour: row.hour - timeZoneHourOffset,
    channel: "East",
    out: row.ch1,
    out_ch1: row.ch1,
    out_ch2: row.ch2,
    out_combined: row.ch1 + row.ch2
  }, {
    hour: row.hour - timeZoneHourOffset,
    channel: "South",
    out: row.ch2,
    out_ch1: row.ch1,
    out_ch2: row.ch2,
    out_combined: row.ch1 + row.ch2
  }];
})

Then I can hide the “y” and instead show the custom data:

    resize((width) => Plot.plot({
      title: "Hourly Energy Production; Avg: " +
        formatEnergy(d3.mean(rawGeneratedByHour, sumCh1Ch2)) +
        ", Max: " + formatEnergy(d3.max(rawGeneratedByHour, sumCh1Ch2)),
      subtitle: "Generated power in the last 24h",
      width,
      x: {grid: true, type: "band", label: "Hour"},
      y: {grid: true, label: "Generated Energy [kWh]"},
      color: {legend: true},
      marks: [
        Plot.barY(generatedByHour, {x: "hour", y: "out", tip: {
          channels: {
            combined: { value: "out_combined", label: "Combined [kWh]" },
            ch1: { value: "out_ch1", label: "East [kWh]" },
            ch2: { value: "out_ch2", label: "South [kWh]" },
          },
          format: {
            combined: true,
            ch1: true,
            ch2: true,
            y: false,
            x: true,
          }
        }, fill: "channel"})
      ]
    }))

This works, but feels pretty convoluted - is there an easier way? And sadly it still shows the “channel” that I’m hovering and I cannot manage to hide that - how could I do that?

Now, I can live with the above. But when I try to apply the same trick on a sum-aggregated plot, e.g.:

    resize((width) => Plot.plot({
      title: "Weekly Energy Production",
      subtitle: "Generated energy in the last weeks",
      width,
      x: {type: "band"},
      y: {grid: true, label: "Generated Energy [kWh]"},
      color: {legend: true},
      marks: [
        Plot.barY(
          generatedByDayLastYear,
          Plot.binX(
            {y: "sum"},
            {x: {interval: d3.utcDay.every(7), value: "date"}, y: "out", tip: {
              channels: {
                combined: { value: "out_combined", label: "Combined [kWh]" },
                ch1: { value: "out_ch1", label: "East [kWh]" },
                ch2: { value: "out_ch2", label: "South [kWh]" },
              },
              format: {
                combined: true,
                ch1: true,
                ch2: true,
                y: false,
                x: true,
              }
            }, fill: "channel"}
          )
        ),
        Plot.ruleY([0]),
        Plot.axisX(d3.scaleTime([generatedByDayLastYear.at(0).date, generatedByDayLastYear.at(-1).date], [0, 12]).ticks(), {
          type: "band",
          grid: true,
          label: "Week",
          tickFormat: function(date, i) {
            return monthNames[date.getMonth()];
          }
        }),
      ]
    }))

then the tooltip would show me the raw data for an individual point, and not the summed one:

How would I handle that? I.e. how could I also apply something like y: "sum" for the y: "out" to my other data fields like out_ch1, out_ch2, and out_combined?

Again, it feels like my approach is backwards. The way it breaks down here makes me believe I’m not doing it the right way.

Cheers

[Fil]

See #2309 which suggests https://observablehq.com/@observablehq/plot-grouped-tips

[milianw]

thanks, that looks great. I will try to replicate that for my code. IIUC then I can share the binX that I am currently passing to the barY call in my code to the additional pointerX call, right?

[milianw]

Excellent, thanks a lot for your suggestion @Fil! I finally found the time to dig into this and it worked. Two pitfalls for me:

• I originally had transform: (x) => new Date(x) in my outer Plot, which then broke the binX. I now do this directly when I tidy up the data instead.
• the value for thresholds: 100 must be carefully chosen to ensure we don't lump together unrelated data fields, otherwise the tooltip would show multiple texts on top of each other. I'm now using thresholds: d3.utcMinute myself.

What I don't understand yet though: this will show me the data for the two channels:

                          Plot.text(data, {
                            y: "channel",
                            text: "channel",
                            frameAnchor: "left",
                            dx: 14
                          }),
                          Plot.text(data, {
                            y: "channel",
                            text: "energy_today",
                            frameAnchor: "right",
                            dx: -2
                          }),

But how could I put a third item, the combined sum of the two, below that? The layouting is giving me headaches. For now I abused the tooltip "heading" like so:

                          Plot.text([data[0]], {
                            frameAnchor: "top-left",
                            dy: -13,
                            text: (d) => d.time.toLocaleTimeString() + " / " + formatEnergy(d.energy_today_combined)
                          })

I would find it much cooler if that "Combined" data would be listed below the other two channels. Why can I not replace this part:

                    const data = values.title[i];

with something like

                    let data = values.title[i];
                    data.push({channel: "Total", "energy_today": data[0].energy_today_combined});

This seemingly has no affect for me and I don't understand why. I also have no clue how to debug it, if I try to add a console.log() there it doesn't show up in my console either?

[Fil]

Can you share a notebook with the point you're at?