Resize fonts and fit the text in the circles

Hi all,

I new in observable and I am trying to make some changes in the example of Zoomable Circle Packing. I need two things:

  1. I would like the font size to change when zooming. With the fixed size, the fonts look very small at the beginning and when zooming in, they look huge. How make the size dynamic?
  2. When the text inside the circle is long, it does not display in several rows. It creates a very long line and the text goes out of the circle. Is there anyway to force the text to stay inside the circle shape?

This is my notebook: https://observablehq.com/@aoterope/zoomable-circle-packing/3

Thank you very much in advance and sorry for my ignorance in this field…
Best
Alvaro

1 Like