Text + image as label of an horizontal bar chart in Plot

[espinielli]

I would like to have a y label composed of both text and image in an horizontal bar chart in Plot.
I have an example here where I would like to add the president image to the right of the relevant name on the y axis.

Any hints at how it could be achieved?

Is there a way to combine marks together (like a Plot.Text and an Plot.Image...if that would be a possible path to a solution)?

I am lost...

Any helps is welcome

[mbostock]

The main problem with your notebook is that you haven’t specified the types with your CSV. The default types are strings, so you end up with the x scale being ordinal by default instead of linear. You can fix this by specifying typed: true when loading the CSV:

presidents = FileAttachment("us-president-favorability-1.csv").csv({typed: true})

That fixed, you can simply add a Plot.image mark if you want an image.

Plot.plot({
  marginLeft: 170,
  marks: [
    Plot.barX(presidents, {
      y: "Name",
      x: "Very Favorable %"
    }),
    Plot.image(presidents, {
      y: "Name",
      x: "Very Favorable %",
      dx: 12,
      r: 9,
      preserveAspectRatio: "xMidYMin slice",
      src: "Portrait URL"
    })
  ]
})

Likewise if you want text, you can add a text mark. If you want to combine marks, take a look at Plot.marks, or just write a function that returns an array of marks.

[espinielli]

Ah, I haven't expressed myself clearly enough...
I am aiming at having for example "Abraham Lincoln <image>" as the bar label...maybe it is just a matter of pushing the names to the left and the Plot.image's to a negative position?

[espinielli]

Ok, I managed to do the following:

Plot.plot({
  marginLeft: 170,
  marks: [
    Plot.barX(presidents, {
      y: (d) => d["Name"],
      x: "Very Favorable %"
    }),
    Plot.image(presidents, {
      y: "Name",
      x: 0,
      dx: -12,
      r: 9,
      preserveAspectRatio: "xMidYMin slice",
      src: "Portrait URL"
    }),
    Plot.axisY({
      label: null,
      textAnchor: "end",
      fill: "black",
      dx: -18
    })
  ]
})

[espinielli]

still need to remove those ticks but progress...
Thank for heading me in the right direction @mbostock

[espinielli]

I changed order of axisY to come before images, so as to partially hide the ticks

[espinielli]

I enhanced (my judgement ;-) it as follows

Plot.plot({
  marginLeft: 170,
  marks: [
    Plot.barX(presidents, {
      y: (d) => d["Name"],
      x: "Very Favorable %"
    }),
    Plot.axisY({
      label: null,
      textAnchor: "end",
      fill: "black",
      tickPadding: 18
    }),
    Plot.image(presidents, {
      y: "Name",
      x: 0,
      dx: -12,
      r: 9,
      preserveAspectRatio: "xMidYMin slice",
      src: "Portrait URL"
    })
  ]
})