bubbletree.js tutorial: simple working example

Struggeling to get the beautiful bubbletree.js library running? If you’re not very familiar with JavaScript it may take you some considerable amout of time to overcome the setup procedure for even a basic visualization.

Even though there is already a good tutorial here, i decided to make my own up-to-date version which includes the things I had to look for to finally get my visualization where i wanetd it. So, i hope it will help you to save some time.

Get the bubbletree.js library and fix it

If you want to work with the original files get them here. Then open bubbletree.js in bubbletree/build, go to the line  521 and replace this:

rad2 = 0 - Math.max(
//web.archive.org/web/20130901195552/https://hw/ *0.8 - tgtScale * (a2rad(node.parent.amount)+a2rad(node.amount)), // maximum visible part
hw * 0.8 - tgtScale * (a2rad(node.parent.amount) + a2rad(Math.max(node.amount*1.15 + node.maxChildAmount*1.15, node.left.amount * 0.85, node.right.amount * 0.85))),
tgtScale*a2rad(node.parent.amount)*-1 + hw*0.15 // minimum visible part
) + hw;

with this

if (node.right==undefined) {
rad2 = 0 - Math.max(
//web.archive.org/web/20130901191143/https://hw/ *0.8 - tgtScale * (a2rad(node.parent.amount)+a2rad(node.amount)), // maximum visible part
hw * 0.8 - tgtScale * (a2rad(node.parent.amount) + a2rad(Math.max(node.amount*1.15 + node.maxChildAmount*1.15, node.left.amount * 0.85))),
tgtScale*a2rad(node.parent.amount)*-1 + hw*0.15 // minimum visible part
) + hw;
}
else {
rad2 = 0 - Math.max(
//web.archive.org/web/20130901191143/https://hw/ *0.8 - tgtScale * (a2rad(node.parent.amount)+a2rad(node.amount)), // maximum visible part
hw * 0.8 - tgtScale * (a2rad(node.parent.amount) + a2rad(Math.max(node.amount*1.15 + node.maxChildAmount*1.15, node.left.amount * 0.85, node.right.amount * 0.85))),
tgtScale*a2rad(node.parent.amount)*-1 + hw*0.15 // minimum visible part
) + hw;
}

Thanks to the guys here for this solution.

My example

In my example (check the source with Ctr-U) you’ll see how to build a simple visualization containing three children levels and how to integrate icons in your bubbles.  There are no complex functions. Simply adjust/extend the values, titles colors and icons in the index.html according to the structure/syntax to fit your needs.

Btw. the fix explained in the first part is already part of this example. So, all you need todo is just to grab all files from github and to put them on your server.

That’s it

Now you are ready to produce  some good looking stuff. Let me know if my example was of any help.

2 thoughts on “bubbletree.js tutorial: simple working example

  1. Thanks a lot for your help!

    I need to also make a fourth children level. Can you please help me do that?

    Thank you, Alexander.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.