rufuspollock-okfn / bubbletree Goto Github PK
View Code? Open in Web Editor NEWRadial Bubble Tree Visualization
Home Page: http://okfnlabs.org/bubbletree
Radial Bubble Tree Visualization
Home Page: http://okfnlabs.org/bubbletree
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
Fails inside the traverse function:
node.urlToken = urlTokenSource.toLowerCase().replace(/\W/g, "-");
Failing data:
{
label: 'Total',
amount: 9800565400,
children: [ { label: 2016, amount: 9800565400 } ]
}
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.
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?
aka go through the source code of the wdmmg bubbletree
Move the random data tutorial to the bubbletree website
People should be able to learn how to use fancy icon bubbles and custom colors in their bubbletrees.
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
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
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'
});
});
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.
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.
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 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):
Add to config a function callbak that's called when a bubble is created
me.createBubble = function(node, origin, rad, angle, color) {
....
I use to set custom shortLabel
Need to write a proper announce post for bubbletree :-)
Namely we should
master
gh-pages
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)
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 .
The labels in the explorer overlap and are difficult to read.
Also there is often unused empty space.
For example:
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.
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);
}
}
};
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
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.
Hi.
Is it possible to have an example of data to generate a donut bubble?
Thanks in advance
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....
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.
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
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.
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
But create weak url token that depends on row order.
Have anyone seen bubbletree alternative, implemented in D3? Would it make sense to port current project to D3?
..and refine it thereby.
@akariv Could you give me permissions to do so? This is so we can stop using it through GitHub (related to openspending/openspending#1198)
should group the smallest amounts instead of the largest.
http://openspending.org/de-bund/explorer?drilldown=einzelplan|kapitel|titel&cut=year:2011#/~/total
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!
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.
npm run review
pretty much every line of code here throws a warningThe 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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.