How to color the bubble using different colors?

[xieduo7]

In this example you change the size of the bubble based on the number of copies. But if I have different types of tips and I want to colour them with different colours. How can I do it? Use bubble-styler?

[stevenweaver]

Dear @xieduo7,

You should be able to use bubble-styler but for some reason the configurable option isn't being called in our Observable notebook when it is defined. I'm going to keep this issue open while I track down what is happening.

Best,
Steven

[xieduo7]

Dear @stevenweaver ,

Thank you for the update on the bubble-styler issue. phylotree.js is a really good tool!

Best,
Duo

[rafEmweb]

bubble-styler is not like node-styler in that it does not have the element parameter. It can only really be used to return a size, it seems. A simple workaround is to enable render option draw-size-bubbles and then use the node-styler:

'draw-size-bubbles': true,
'node-styler': function(element, node) {
  element.selectAll('circle').style('fill', color);
}