'title' not showing on hover

Hello All,

I have working on a binned stack of songs. Cannot make the ‘title’ of song (or any other data show on hover). What am I doing wrong?

https://observablehq.com/d/7cb15f49bbb37d50

Looking at the examples here it looks like the way to set the title is like this:

Plot.binX(
        {
          y: "count",
          title: bin => bin.map(d => d.Song)
        },
        { rx: 8, x: "Year", fill: "Song"}
      )

Yes you need to use a “reducer”, that is a function that takes all the elements in the bin and returns a single result (a string).

You can do, as Cobus mentionned:

Plot.binX({…, title: bin => bin.map(d => d.Song).join(", ") }, { … })

Compared to Cobus’s solution, I added an explicit join (useless since JavaScript will flatten an array implicitly to a string, using commas). This will show the titles of all the songs in the bin, concatenated.

A more canonical method might be:

Plot.binX({…, title: "first" }, {…, title: "Song" })

to retain the title of the first song of the bin.

Since the bins are always made of 1 song, thanks to the z grouping (fill: “Song”), these code paths all arrive at the same result.

1 Like

Thank you, Cobus!

Thank you, Fil!