Stroke property for Observable Plot.image() images

I am wondering if there is a stroke property for images drawn using Observable Plot.image() function which would draw a border with {stroke, fill, strokeWidth}

Appreciate if there’s any alternative that can do a similar job. I’ve tried drawing a Plot.rect() with custom x1,x2,y1,y2 pairs but I need more control with the strokes as the width’s of my images are dynamic

Any help is appreciated

The Plot.image mark creates svg:image nodes, which don’t accept a stroke property. Here’s a work-around with svg filters: Plot.image border / Fil / Observable

This is an awesome workaround, thanks.

I would also like to know how can I bind data so I can change the stroke color dynamically based on a function?

Yes: the datum associated to each image is its index in the original data. For example, the first image has an associated datum of 0. If you add a specific filter to that image, and change that filter’s values (the “stroke width” and color) dynamically with javascript, it should work. (It’s a bit of work though… not as easy as strokeWidth.)

Ah this works perfect! Thanks a lot