samizdatco / arbor Goto Github PK
View Code? Open in Web Editor NEWa graph visualization library using web workers and jQuery
Home Page: http://arborjs.org
a graph visualization library using web workers and jQuery
Home Page: http://arborjs.org
Currently its possible to modify the stiffness of the all the edges in one go, by adjusting the stiffness system parameter.
But, having the ability to tweak the stiffness of individual edges rather than the whole system, should be an very useful feature?
(This feature is not there in Arbor currently)
I though about using Google Maps as the canvas, but I think it might be overkill.
What do you think ?
Sometimes I need to put a icon image as a node.
I didn't found anything about that in API reference. Is it possible?
Is this project abandoned?
It hasn't been updated for a while.
Would be great if it's marked as abandoned if that is the case.
Well, I was getting started with this lib and did not find the README friendly. I would like to make a better version of it, what you guys think?
I can upload a sample in this issue so you can see what I am thinking.
:) thk
hi
i wanted to all node to fix by fixed Point
so i gave all Point to node
at that time i found in screenUpdate method not call a redraw method
also chrome had dead by memory leak
i wanna got hint to correct them
thx :)
Hello,
I want to make a commercial application using this source code what do i need to buy here to do that legally
Any plan to support retina resolution?
It looks kind of blurry on my macbook pro retina, maybe I've missed something.
In physics/system.js, the object initializer (i.e. ParticleSystem({repulsion:1000, stiffness:80)) does not work.
Changing lines 20-21 from
if (typeof stiffness=='object'){
var _p = stiffness
to
if (typeof repulsion=='object'){
var _p = repulsion
fixes the problem
Hey there. I need some help with adding nodes. I'm trying to set an initial x,y when adding the node.
E.g. addNode( 'uniqueId', { x: -10, y: -15 } )
If i'm understanding the grid correctly it's a Cartesian coordinate grid with 0,0 at the center of the canvas.
The problem i'm having is that it's simply crashing the browsers when i set a given nodes x,y. On page load the nodes seem to basically explode in an apparent infinite loop. it seems to be with specific values. So say i have 6 nodes, i can set 3 of them and they seem to be in the correct position on page load and everything is ok. On the 4th node, I can set it, but it may or may not work.
FireFox (7,8) does its straight-up freeze/crash/memory thing. WebKit (Safari5, Chrome latest) keeps crashing in a loop, but the browser tries to recover. (Windows7/Mac)
Any input is appreciated. Great library!
Thanks.
When I try to load arborjs.org in IE8 or IE 9, I get the following errors:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; AskTbTRL2/5.9.1.14019)
Timestamp: Fri, 10 Jun 2011 16:04:50 UTC
Message: Object doesn't support this property or method
Line: 46
Char: 3
Code: 0
URI: http://arborjs.org/js/lib/arbor.js
Message: Object doesn't support this property or method
Line: 66
Char: 3
Code: 0
URI: http://arborjs.org/js/lib/arbor-tween.js
Message: Object doesn't support this property or method
Line: 36
Char: 3
Code: 0
URI: http://arborjs.org/js/lib/arbor-graphics.js
Message: Object doesn't support this property or method
Line: 382
Char: 5
Code: 0
URI: http://arborjs.org/site.js
V
Area: parser for Halfviz
There is a parser error when parsing, say, {color:none}
.
Problem: jQuery has been updated and no longer iterates over a string as an array of char.
Solution: downgrade jQuery until code is patched.
TypeError: Cannot use 'in' operator to search for '11' in {color:none}
at j (http://codeorigin.jquery.com/jquery-2.0.3.min.js:4:6559)
at Function.x.extend.each (http://codeorigin.jquery.com/jquery-2.0.3.min.js:4:4430)
at recognize (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:13:9)
at lechs (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:77:24)
at String.<anonymous> (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:158:24)
at Function.x.extend.each (http://codeorigin.jquery.com/jquery-2.0.3.min.js:4:4575)
at that.parse (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:157:11)
at http://localhost:9001/js/directives.js:133:33
at wrappedCallback (http://localhost:9001/lib/angular/angular.js:9769:81)
at wrappedCallback (http://localhost:9001/lib/angular/angular.js:9769:81) angular.js:8296
TypeError: Cannot use 'in' operator to search for '11' in {color:none}
at j (http://codeorigin.jquery.com/jquery-2.0.3.min.js:4:6559)
at Function.x.extend.each (http://codeorigin.jquery.com/jquery-2.0.3.min.js:4:4430)
at recognize (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:13:9)
at lechs (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:77:24)
at String.<anonymous> (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:158:24)
at Function.x.extend.each (http://codeorigin.jquery.com/jquery-2.0.3.min.js:4:4575)
at that.parse (http://localhost:9001/lib/arbor/demos/halfviz/src/parseur.js:157:11)
at http://localhost:9001/js/directives.js:133:33
at wrappedCallback (http://localhost:9001/lib/angular/angular.js:9769:81)
at wrappedCallback (http://localhost:9001/lib/angular/angular.js:9769:81)
Hi,
I've been playing around with arbor, pretty cool stuff. I don't really understand the physics. Do you know what parameters I should focus on to slow it down? Here is a video of what is going on, the graph just goes crazy.
http://picture.in.th/id/743ab94901e384047b7b1e80614d904a
This demo of me.
i have a click on circle node(dot.pink) to show node(box),
I just can do it any way .
Force directed layouts generally use a random seed for the simulation. It would be nice to have an option to set this value manually.
Made use of the halfviz example to make a force directed graph and am noticing that in Firefox (tested in 3.6.17 on Red Hat 5 and Firefox 6.0 in OSX Lion) that once the graph is set it contains to slightly jitter. All nodes visibly shake and when changing tabs it seems like the graph shits to one direction, going off the canvas at points, but returns once you change back to the tab containing tha graph.
I've also noticed this on the atlas page on the arbor website. I can go to these pages in Firefox and see the jittering of nodes described above.
If I stop the particle system while it's running, the system doesn't stop completely. The nodes seem to stop moving relative to their connected nodes, but the entire system continues to gravitate toward the center.
I have trying to analyze the performance of the Library and found that it slows down the browser. Even my working computer is 4GB RAM powerful, I have noticed when running the library in FF3+, that Real Memory used turns up to ±1GB of the browser. It depends on the number and complicity of the nodes displayed. Sometimes FF growing up to 3GB of taken RAM and than, even my powerful machine, starts to go slow, but FF goes down completely and not responding.
I have made those tests on examples provided on arborjs.org websites and mines.
When I was debugging, Javascript profiler shown that some of the functions in arbor library and arbor-graphics.js has been called almost million of times while I was just opening the graph and made some movements with the mouse.
Any toughs?
Is there any documentation on how to do a custom shape like diamond or triangle?
I have an XML file.
Do you have any idea to make graph from it?
From the demo, i only saw they made it from JSON file.
just as title, If I continue adding node and edges that works fine, Arbor will automatically display the nodes and edges added,
But When it comes to adding nodes and edges after pruning all the nodes and edges, it won work, left nothing but a empty canvass. Is there any way to refresh / redraw them?
There are 9 pending pull requests and no activity for over 2 years. It's kinda sad... Would it be possible to pass the torch to someone else interested in maintaining an official version of this lib? Perhaps through a github organization?
In Chrome, the system runs for several seconds, and then I keep getting the following error message:
Uncaught RangeError: Maximum call stack size exceeded
d.extend.type
d.extend.isPlainObject
d.extend.d.fn.extend
d.extend.d.fn.extend
d.extend.d.fn.extend
...
In Firefox, it runs for awhile, then the browser stops responding for awhile, and when it returns, I get the error "Too much recursion."
If this is an error in my code, I apologize for opening an issue here. However, I'm almost positive it's not.
Would anyone be interested in a patch to add (optional) Velocity Verlet integration? You can see the algorithm here:
http://en.wikipedia.org/wiki/Verlet_integration#Velocity_Verlet
It wouldn't be a huge performance hit, but since Arbor currently uses Euler integration, the energy of the dynamical system is not conserved. One compensation for this is heavy amounts of friction, but Verlet integration would allow for simulation at low friction levels and also increase the general stability of the simulation.
Thanks,
Peter
The arborjs.org home page (and things I've tried to build with it) cause Firefox (versions 3.x, 7.0.1) to increase memory usage until the system falls over. CPU runs at 90%-ish.
Chromium works fine - cpu runs at about 30% max when moving stuff around on the homepage, then zeroes off as the objects stabilise. Memory usage doesnt increase.
So probably some memory leak in Firefox, and possibly also related to the CPU usage issue filed here. Would be a shame to tell everyone 'This site looks best in Chromium'.
Haven't tested IE/WebKit browsers/Opera/lynx :)
using web workers
physics: [xpconnect wrapped (nsISupports, nsIDOMEvent, nsIWorkerErrorEvent)] { type="error", target=Worker, more...}
Failed to load script: /arbor.js (nsresult = 0x805303f4)
You can just load the arborjs.org webpage on any android browser and see that it loads twice. Still looking into a cause for this.
I built an arbor rails engine and I'm having some trouble between different environments. I've discovered that if I set config.assets.debug
to false
in the environments file it breaks with the following message in the log:
Started GET "/nullarbor.js" for 127.0.0.1 at 2012-09-20 16:43:42 -0700
ActionController::RoutingError (No route matches [GET] "/nullarbor.js"):
Checking through the code, I think it's linked to the arbor_path
function inside https://github.com/samizdatco/arbor/blob/master/src/etc.js
. Is there a reason it needs to find itself?
If I start off with a graph consisting of a single node, then the node will start running around like I was doing a Brownian motion simulation. Furthermore, if I later add nodes and edges to this graph, the initial node will stabilize in the center, but the new nodes and edges will not appear. Also, after this, firefox dies pretty soon because of low resources.
I'm using the basic example codes, with the following settings:
sys = arbor.ParticleSystem(1000, 600, 0.5);
sys.parameters({gravity:true});
To reproduce, in $(document). ... do:
sys.addNode('a')
window.setTimeout(add,3000);
and in add(), add additional elements:
function add() {
sys.addNode('b');
sys.addEdge('b', 'a');
}
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library samizdatco/arbor
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "samizdatco/arbor",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hi, I have this problem, I hope it will be easier than I think, but I haven't found a solution.
I want to show the node name when the mouse is over it, that's it. I've already change the its alpha to 0, but I can't make de over effect.
Hope anyone can help or guide me.
Thanks
The problem seems related to how the weight for the lines are being set to a null value, see lines 39 - 47. Chrome doesn't seem to mind but Firefox does.
Hi, I can't get arbor.js working in IE10.
When trying arborjs.org, I get that in the console :
using web workers
SCRIPT438: L’objet ne gère pas la propriété ou la méthode « defineGetter »
arbor.js, Ligne 35 Caractère 8042
Based on the docs' sample project, I add one more particle system in the main.js. But only the last one can response to the mouse event. How I can use two in one page?
In the part of initializing kernel at arbor.js, following part occurs the error:
at init:
- The error message is:
```error: Could not get domain!
I found following code snippets of firefox on the web.
if (NS_FAILED(tldService->GetBaseDomain(codebase, 0, domain))) { /* ERROR */ JS_ReportError(aCx, "Could not get domain!"); return nsnull; }
There are several bug reports about Web Worker problem on Firefox like:
https://bugzilla.mozilla.org/show_bug.cgi?id=682450
https://bugzilla.mozilla.org/show_bug.cgi?id=683280
As the title said I am unable to start a ParticleSystem again after it was running before. This is without workers (it might have worked fine with workers, didn't test).
Hi, it looks like node.fixed has no effect on the physics.
You can try the sample project.
It only seems to work for the dragging, but it is because the "dragged" function sets some new coordinates when the mouse is moving.
If you add a node with the fixed property, then it has no effects and will still move.
Also adding a node with some default starting points, doesn't seems to work also.
Thx for any ideas!
Is there a way to prevent overlapping edges, such as drawing arched edges?
In the following example, there are two arrows between "a" and "b", but they are overlapped:
a -> b
b -> a
The visualization looks great and I really like the simplicity of specifying the graph.
What is really missing for me is the ability to add label to edges.
If arbor.js is included without any explicit path, as in:
<script src="arbor.js"></script>
then the arbor_path() function incorrectly returns "/arbor.js", which doesn't work when it is not run from the root directory.
A workaround is to instead include arbor with:
<script src="./arbor.js"></script>
but perhaps arbor_path() should default to the current directory instead of the root?
Even after a while when the nodes stop moving, arbor uses lots of cpu. This must be the physics still going hard. It might be a good idea to measure if the nodes are moving and decrease the update interval.
PS, Thanks. This is awesome.
Go to arborjs.org, drag a node, and then hold the mouse still without letting go of the button, the node drifts away from the mouse instead of staying fixed.
From the introduction:
"It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs."
But how does one use SVG or HTML elements?
(I would like to be able to use HTML elements, because then I can CSS style the nodes... but the documentation is well hidden if it exists....
Ignore this issue
Physics error and Uncaught TypeError: Cannot read property 'extend' of undefined in arbor line 105
Apart from the number of nodes, all values are NaN at all times. It would be nice to have this measure to i.e. stop the display updates until the graph is changed again.
It would be nice to have a base to start with as far as UI. Is it possible for you to wrap up the UI elements from the arborjs homepage?
I´ve tried to re-package the arbor tween and graphics js into but encountered a number of issues... First, the web worker held me up and the overall packaging of the JS isn´t as simple as it could me... It seems quite fickle when minifying code as well...
I´ve actually tried to port it over to coffeescript as the coffeescript "class" seems a perfect match for the structure and would add more clarity to the code (rather than handling this and that manually)...
Do you think it´s a good match?
PS: Sorry for using the Issues to communicate...
I have tried tweening a node, which works fine. But tweening an Edge in an existing particle system is obfuscating. It has not worked for me yet.
The syntax given in the reference is:
tweenEdge(edge, duration, opts)
How do I specify an edge in a single parameter?
I tried all this, but does not work:
sys.tweenEdge({"somenode1":"somenode2"},1,{length:50})
sys.tweenEdge("somenode1":{"somenode2"},1,{length:50})
sys.tweenEdge({"somenode1":{"somenode2"}},1,{length:50})
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.