Adding images into a shape while mapping through data

[hyfydistro]

Is there a way to add/embed/clip images into a <circle> (lowercase "c") in the visx library?

I'm looking to make a chart like the following. I want to surround the main person by other bubble (people) whom have different values (which should explain why the bubble is larger).

[williaster]

Hey @hyfydistro 👋 thanks for checking out visx. I think to do this you'd just need to lean on the SVG api for using an image as a fill. One way to do this is to create a <pattern /> for each image within a <defs /> tag, then use those patterns as the fill for the circle. Note that pattern id's that you define should be unique on the page else you will have overlap/non-determinant behavior.

Here's a sandbox demo, hope it helps!

[williaster]

based on your question about non-overlapping circles: sorry I assumed you already had x/y/radius coming from somewhere. if you don't you need to use an algorithm to layout the circles so they don't overlap.

there are many approaches to that but one which is easy in visx/d3 is circle packing for which we have a demo here (have you looked at the gallery?).

I didn't account for labels here, and you can remove the outermost circle (I left it to demonstrate what is going on) but here's an updated sandbox.

[hyfydistro]

Thanks! I was able to get it working nicely!

[hyfydistro]

Could you recommend me what method I should use to add tooltip on each bubble? @williaster I am planning add an "on-hover" information but I am lost at which options to choose. In addition, I want to add an "on-click" event that will get the data information of the bubble. I could handle that with state management, but is it possible with a tooltip wrapper?

[williaster]

Hi @hyfydistro I would check out the @visx/tooltip demo for triggering and rendering tooltips https://airbnb.io/visx/tooltip

[hyfydistro]

Thanks! I was able to get it in with useTooltipInPortal. Not sure why it didn't work with the basic Tooltip. Is there a difference or situational method?

[hyfydistro]

[hyfydistro]

All good! I just had to restart server! ^^;

[hyfydistro]

Is it possible for the bubbles not to overlap each other? I thought the had something but I'm having difficulty. @williaster