Hi , i have a bubble tree with numbers of data from my database , now when i tested it i just noticed that a node with single child is not populating . Can anyone help me ? how can i populate a node with single child on its click .

If the node has only one child, I don't see that dotted ring that indicates that the bubble has children. When I click on the bubble with single child, nothing happens. No console errors either.

Please help. I need to use this for my school project. The deadline is soon....

Fix (apply recursively)

me.preprocessData = function(root) {

    var me = this, maxNodes = me.config.maxNodesPerLevel;
    if (maxNodes) {
        if (maxNodes < root.children.length) {
            ....
        }

        for (index in root.children) {
            var child = root.children[index];
            me.preprocessData(child);
        }
    }
};

Hi, I am trying to add tooltip to bubbletree but not able to do so as I am not using openspending api with it . Can anybody help me on this .
Thanks.

aka go through the source code of the wdmmg bubbletree

Add to config a function callbak that's called when a bubble is created

me.createBubble = function(node, origin, rad, angle, color) {
....

• if ($.isFunction(me.config.bubbleCreatedCallback)) {me.config.bubbleCreatedCallback(bubble);}
  return bubble;
  }

I use to set custom shortLabel

Do we have any comprehensive document/article that describes algorithm of such bubble tree visualization?
I want try to implement similar algorithm for a native platform such as ios or android.
I would be very appreciated for your help.

Description

Hi, 2015 calling. It is time to reboot and dress up the BubbleTree.

We just did a first pass refactor so we can npm install and get it into a React app. Lot's more that can be done!

We at OK will do work on this over the coming months, but if anyone out there watching this repo wants to chip in and bring BubbleTree forward, please let us know here.

Tasks

• Style! Yes, we like to write neat and consistent JS these days :). Even using the conservative google style guide via jscs npm run review pretty much every line of code here throws a warning
• Write in ES6, compile for dist
• Port to D3 (Is this worth it?)
• Ship components for Angular and React (we already have one for React, but need to break it out into a new repo)
• Remove outdated wiki https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation
• Demos are broken on okfnlabs.org/bubbletree/ - perhaps we just remove them?
• Write tests

Moved from https://github.com/okfn/openspending/issues/320

Original issue:

The bubbletree doesn't produce a good error message when it gets negative amounts. It scales the radii of its circles to these amounts, and thus cannot handle the case of amounts which are negative. We should at the very least do something other than display a blank page when this condition is encountered.

Comments:

@pudo: I think this should either be in bubbletree or in the explorer plugin - putting it before means potentially screwing up the aggregator API to support JS that does not know negative nums.

I was getting an error reported as origEvent.pageX being "null or not an object". After some debugging I found that e.origEvent was undefined in the onhover (line 1378) and onunhover (line 1389) events. I tracked the problem to handleMemberHover, which uses vis4.DelayedTask. In vis4.DelayedTask (line 70), additional arguments (in this case just the event object that is to be assigned to origEvent) are processed using a "for (var i in args)" loop, which does not work in IE. I simply changed this to "for (var i = 0; i < args.length; i++)" and the problem was fixed.

Fails inside the traverse function:

node.urlToken = urlTokenSource.toLowerCase().replace(/\W/g, "-");

Failing data:

{ 
  label: 'Total',
  amount: 9800565400,
  children: [ { label: 2016, amount: 9800565400 } ] 
}

Hi Bubbletree developers,

i'm working on a 3rd level bubble but i could not seem to make it work below is the 3rd level script that i did. is there something wrong that i did? please help.

Thanks in advance...

$(function() {
var data = {
label: 'Total',
amount: 120,
children: [
{ label: '1rst Level', amount: 30, color: '#D95F02',
children: [
{ label: 'Dingen', amount: 15, color: '#D95F02' },
{ label: 'Stuff', amount: 15, color: '#D95F02' }
] },
{ label: '2nd Level', amount: 40, color: '#1B9E77',
children: [
{ label: 'Sub2', amount: 20, color: '#cccccc' },
{ label: 'Sub2', amount: 20, color: '#cccccc' }
]
},
{ label: '3rd Level', amount: 30, color: '#7570B3',
children: [
{ label: 'Bananen', amount: 15, color: '#7570B3',
children: [
{ label: 'glenn', amount: 10, color: '#7570B3' },
{ label: 'glenn', amount: 5, color: '#7570B3' }
]
},
{ label: 'Pyjamas', amount: 15, color: '#7570B3',
children: [
{ label: 'mark', amount: 5, color: '#000000' },
{ label: 'reales', amount: 10, color: '#cccccc' }
]
}
]
}
]
};

        new BubbleTree({
            data: data,
            bubbleType: 'donut',
            container: '.bubbletree'
        });

    });

Hello all!
@okfn I was wondering if its possible to port the bubbletree to the last version of jquery, replacing the history plugin that now is not maintened anymore.

TIA,
Federico

I would like to use a json where internally change and the data are reflected in the chart.

I have performance leak (navigator freeze) when have 5k rows and same names. I resolved problem adding unique counter to url, instead of: while (me.nodesByUrlToken.hasOwnProperty(node.urlToken)) {node.urlToken += '-';}

bubbletree.js

• (ln 185) urlTokenSource += '-' + me.globalNodeCounter;

But create weak url token that depends on row order.

Hello. I've come across an issue with demos - ira and israel demos do not show bubbletree with no errors in browser console at all. Only "tooltip" and footer are shown.

Thank you in advance

Move the random data tutorial to the bubbletree website

Have anyone seen bubbletree alternative, implemented in D3? Would it make sense to port current project to D3?

When users click on the bubbles, besides just making the bubbles expand or rotate, can I also add other function such as load a .html from the server to a sidebar div? Thanks!

I don't know if bubbletree is meant to run in Internet Explorer 8 but it is not working in openspending.

Details of error:

Message: Expected identifier
Line: 37
Character: 36
Code: 0
URI: http://openspending.org/static/js/model.js

Message: Object doesn't support this property or method
Line: 50
Character: 5
Code: 0
URI: http://openspending.org/static/app/explorer-v2/js/explorer.js

Example dataset used to reproduce the problem (could be any):

http://openspending.org/city_of_bochum_expenditure/explorer

A simple removal of the question mark in demos/israel/aggregate?dataset=israel makes the OpenSpending Viewer buildable in Windows machines.

I know this is not a priority, but is simple enough to be a blocker.

People should be able to learn how to use fancy icon bubbles and custom colors in their bubbletrees.

var data = { label: 'Total', amount: 100,
 children: [
      { taxonomy: 'cofog', name:'01', label: 'First child', amount: 30 },
      { taxonomy: '02', label: 'Second child', amount: 40 },
      { label: 'Third child', amount: 30, color: '#ff3300',
         children: [
            { label: 'First child of Third', amount: 20, color: '#ff4400' },
            { label: 'Second child of Third', amount: 10, color: '#ff4400' }
         ]} 
]};

If delete one children root, for example: node{label:'First child'}, cant navigate into children's of node{label: 'Third child''}

(Sorry for the code format, no white spaces preserved)

should group the smallest amounts instead of the largest.

http://openspending.org/de-bund/explorer?drilldown=einzelplan|kapitel|titel&cut=year:2011#/~/total

Need to write a proper announce post for bubbletree :-)

Hi.

Is it possible to have an example of data to generate a donut bubble?

Thanks in advance

Hi All,

i'm new in this environment and trying to make a icon and Tooltip text combination when hovered. below is the sample link that i'm working on

http://ejeepney.org/adaptracker/bubbletree-master/sample-other-2.html

would it be possible to have a text popping when you hover your mouse on one of the SVG icon? with my current setup. something like this http://wheredoesmymoneygo.org/bubbletree-map.html#/~/total/running-the-country--social-systems/transport

if you can point me to the right direction that would be a great help.

many thanks

Hi All, i have been working on this and i'm currently exploring on how to do a combination of both Text and icon. is there any sample code that i could look at?

i have declare on my bubbleType: 'icon'

i use bubble tree minimal for my project i want to add a image into head bubble so it has logo
i used append it doesnt seem to work so i am looking for an answer

Thank you all

The minimal demo does not work out of the box because node.breakdowns is undefined (but not explicitly null) at line 212: $.each(node.breakdowns, function (c,bd) {
a895750#L1R212

This results in an error "Uncaught TypeError: Cannot read property 'length' of undefined" in jQuery and the bubbletree does not display.

I worked around this by making the conditional on line 210:
if (node.breakdowns !== null && typeof node.breakdowns != "undefined") {

but I don't know if that's the right way to do it. It does make the minimal demo work again though.

I love the visualization, but is it possible to load the data dynamically? I want to change what children nodes may show up based on nodes which have been selected.

Do I have to load the entire hierarchy before the bubbletree is rendered or can I change the children as the user clicks?

The text is getting stuck on the same place when circle is moving in mobile (small screen). We are getting some javascript error i.e Error: Invalid value for attribute cx="NaN"w @ raphael-min.js:10B.attr @ raphael-min.js:11me.draw @ bubbletree.js:2042update @ Tween.js:320TWEEN.update @ Tween.js:79loop @ bubbletree.js:1431
raphael-min.js:10

@akariv Could you give me permissions to do so? This is so we can stop using it through GitHub (related to openspending/openspending#1198)

Namely we should

• completely remove demos and docs from master
• completely remove sources from gh-pages
• create (or possibly re-use) a clean and good-looking site template
• include a showcase of real-world use cases (e.g. guardian)
• include tutorials and link to those written by others

Just a note to let you know that we're going to be upgrading OpenSpending.org fairly soon, and it's likely to break the bubbletree demos when we do.

In particular, the CRA dataset is now ukgov-finances-cra rather than cra, and regions are classifiers rather than values. The latter means that instead of the "region" field being a string in the aggregate json, it will be a dictionary instead, whose "label" property corresponds to the original string in the cra dataset.

An example of the output from the aggregator can be found at http://ckan.net/storage/f/file/01a68277-6baa-435a-9bdd-f06b73ada284, or you can simply use the API from http://staging.openspending.org

Google maps are not working because of the code in vis4.js script:

Function.prototype.bind = function(scope) {
  var _function = this;
  return function() {
    return _function.apply(scope, arguments);
  };
};

'''

This code is called by google main.js script and throws error.

Perhaps I misunderstood something in how to create an appropriate structure, but I found that when I had just 2 children for a node that an error occurred on line 523 of bubbletree.js. I found that on line 181 if node.right == node.left (when there are two nodes at the level), node.right is set to undefined. Then on line 523 node.right.amount is accessed but node.right is undefined, causing the error. I simply included a node.right==undefined check around the statement calculating rad2 and removed the node.right.amount component of the Math.max call in that case. My test case worked after making that change.

The labels in the explorer overlap and are difficult to read.
Also there is often unused empty space.

For example:

http://openspending.org/uy-credito-presupuestal/explorer?drilldown=area_programatica|programa|organismo&breakdown=area_programatica&cut=year:2012#/~/total/servicios-p-blicos-generales

..and refine it thereby.