a graph visualization library using web workers and jQuery

Overview
arbor.js
--------

Arbor is a graph visualization library built with web workers and
jQuery. Rather than trying to be an all-encompassing framework, arbor
provides an efficient, force-directed layout algorithm plus
abstractions for graph organization and screen refresh handling.

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.

As a result, the code you write with it can be focused on the things
that make your project unique – the graph data and your visual style
– rather than spending time on the physics math that makes the
layouts possible.

Installation
------------

To use the particle system, add jquery and the file at lib/arbor.js
to your path somewhere and include them in your html:

  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/arbor.js"></script>  

If you want to let arbor handle realtime color and value tweens for
you, include the arbor-tween.js file as well. This will add a pair of
new tweening methods to the ParticleSystem object (see the docs to
decide if this appeals to you or not).

  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/arbor.js"></script>
  <script src="path/to/arbor-tween.js"></script>


Getting Started
---------------

The docs folder contains a sample project that demonstrates some of the
basic idioms for working with the library to build a visualization. More
detailed documentation can be found at http://arborjs.org/reference.

In addition, the demos folder contains standalone versions of the demos
at arborjs.org. But since all of them use xhr to fetch their data, you'll 
still need to view them from an http server. If you don't have a copy of
apache handy, use the demo-server.sh script to create a local server.

Colophon
--------

Arbor’s design is heavily influenced by Jeffrey Bernstein’s excellent
Traer Physics[1] library for Processing. In addition, much of the
physics code has been adapted from Dennis Hotson’s springy.js[2]. The
Barnes-Hut n-body implementation is based on Tom Ventimiglia and Kevin 
Wayne’s vivid description[3] of the algorithm.

Thanks to all for releasing such elegantly simple and comprehensible
code.

[1] <http://murderandcreate.com/physics/>
[2] <https://github.com/dhotson/springy>
[3] <http://arborjs.org/docs/barnes-hut>

Contribute
----------

Code submissions are greatly appreciated and highly encouraged. Please send
pull requests with fixes/enhancements/etc. to samizdatco on github. The 
oldschool may also pipe their diff -u output to [email protected].

License
-------

Arbor is released under the MIT license. http://en.wikipedia.org/wiki/MIT_License
Comments
  • node.fixed

    node.fixed

    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!

    opened by daralthus 6
  • Velocity Verlet Integration Change

    Velocity Verlet Integration Change

    Hi Christian:

    As we discussed, I have modified the Physics simulation to use velocity verlet integration. There is a considerable stability improvement in low-friction simulations.

    To see the stability difference:

    • Open up the halfviz demo for this fork by running the python SimpleHTTPServer.
    • Select "abominable snowman" from the examples list
    • Set Friction to 0%
    • Increase spring tension and monitor performance of the nodes. For me, around 3300 is when I begin to get "flickering" of the nodes. I suspect jittering occurs here because the timesteps are too large for such high forces.

    To compare to the stable branch:

    • Navigate to http://arborjs.org/halfviz
    • Select "abominable snowman"
    • Set Friction to 0%
    • Increase spring tension. Jittering for me begins around 1800, and once going into a jittering state, there is a considerable hysteresis (you must go far below 1800 to obtain stable motion).

    The only issue with this change is that the nodes reach stability quite quickly in most simulations, and the code to turn off the simulation activates too soon (because it detects a low amount of energy I believe). It can be somewhat visually jarring. I'm not sure where this code activates or if there is a default parameter to change (I looked for it in physics.js but had no luck), but changing this deactivation constant to a lower parameter might obtain the best results.

    Let me know what you think. This is my first pull request!

    Thanks, Peter

    opened by pcottle 3
  • Unexpected token in attribute selector: '!'.

    Unexpected token in attribute selector: '!'.

    using web workers physics: [xpconnect wrapped (nsISupports, nsIDOMEvent, nsIWorkerErrorEvent)] { type="error", target=Worker, more...}

    Failed to load script: /arbor.js (nsresult = 0x805303f4)

    opened by muratkesin 3
  • Can I improve the README?

    Can I improve the README?

    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

    opened by VitorCioletti 1
  • Replacing __defineGetter__ and __defineSetter__ with Object.defineProperty get and set

    Replacing __defineGetter__ and __defineSetter__ with Object.defineProperty get and set

    Methods defineGetter and defineSetter are deprecated (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineGetter). This is also what's stopping Arbor from displaying on IE9 (although there is still not complete functionality).

    I have replaced the deprecated methods with Object.defineProperty for: Node.prototype.p (and all contained within) Node.prototype.fixed Node.prototype.tempMass Node.prototype.mass

    This has been tested with the Atlas demo on Firefox 27.0.1, Chrome 24.0.1312.56 and IE9.

    opened by joedborg 0
  • massive cpu usage

    massive cpu usage

    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.

    opened by stephennancekivell 0
  • Uncaught DOMException: Failed to construct 'Worker':

    Uncaught DOMException: Failed to construct 'Worker':

    Hello! This code here works perfectly if you just copy & paste it in a .html file and open locally with a browser.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <h1>TEST</h1>
      <canvas id="viewport" width="800" height="500"></canvas>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <!-- run from the minified library file: -->
      <script src="https://dl.dropbox.com/s/y2msq2ttbxeu2qo/arbor.js"></script>
      <script src="https://dl.dropbox.com/s/578qe4k75xi9209/main.js"></script>
    </body>
    </html>
    

    But when I host it on github or put inside my rails app i get the following error:

    arbor.js:33 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://dl.dropbox.com/s/y2msq2ttbxeu2qo/arbor.js' cannot be accessed from origin 'https://dcts.github.io'.
        at Object.init (https://dl.dropboxusercontent.com/s/y2msq2ttbxeu2qo/arbor.js:33:713)
        at Kernel (https://dl.dropboxusercontent.com/s/y2msq2ttbxeu2qo/arbor.js:33:3165)
        at Object.ParticleSystem (https://dl.dropboxusercontent.com/s/y2msq2ttbxeu2qo/arbor.js:35:8072)
        at HTMLDocument.<anonymous> (https://dl.dropboxusercontent.com/s/578qe4k75xi9209/main.js:154:21)
        at Object.resolveWith (https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js:16:15102)
        at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js:16:10164)
        at HTMLDocument.z (https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js:16:14558)
    

    Any ideas on how to resolve that? Here is the direct link which throws the error: https://dcts.github.io/arbor-js-test/index.html

    Any help is very appreciated, I really love this library but just cant get it to work in production, which is super annoying. Thanks a lot in advance!

    opened by dcts 1
  • Excuse me !!!!

    Excuse me !!!!

    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 .

    opened by wvlkfoid 0
Owner
Christian Swinehart
Christian Swinehart
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 6k Jan 3, 2023
A library for visualization and creative-coding

Pts Pts is a typescript/javascript library for visualization and creative-coding. Get started at ptsjs.org. Please give it a try, file issues, and sen

William Ngan 4.9k Jan 3, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
A web application to 🔍inspect your GitHub Profile Stats📊 in a lucid way. Visualization made easy with Charts💡🚀

know-your-gitstats A web application to ?? inspect your GitHub Profile Stats ?? in a lucid way. Visualization made easy with Charts ?? ?? . ✅ Features

Shubham Jadhav 46 Oct 15, 2022
Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection

A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrap

Vasco Asturiano 1.3k Jan 3, 2023
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Epoch 5k Dec 30, 2022
Data visualization library for depicting quantities as animated liquid blobs

liquidity.js A data visualization library for depicting quantities as animated liquid blobs. For a demonstration of what the final product can look li

N Halloran 91 Sep 20, 2022
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

syt123450 1.6k Dec 29, 2022
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 740 Dec 31, 2022
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

obsidian-echarts Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

null 23 Dec 26, 2022
Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation

Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.

Nathan S. Santos 39 Jan 5, 2023
Gephi - The Open Graph Viz Platform

Gephi - The Open Graph Viz Platform Gephi is an award-winning open-source platform for visualizing and manipulating large graphs. It runs on Windows,

Gephi 5.1k Jan 4, 2023
3D graph viewer powered by WebGL (three.js)

Graphosaurus A three-dimensional static graph viewer. (click the image to try it out) Demos EVE Online map Add nodes incrementally Documentation JSDoc

Corey Farwell 362 Dec 4, 2022