Library for dinamyc visaulization such as code_swarm. Sandbox:
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
js
src
.gitignore
LICENSE
Makefile
README.md
blackhole.js
blackhole.min.js
bower.json
gen.js
index.html
package.json

README.md

blackHole.js

Introduce

Blackhole.js Analytics This library is child of two projects:

The main objective of this library is the visualization of data that change over time. Suitable for the visualization of such data as:

Depends on D3js

Structure

## Quick Examples

For fast look Example I

We have data (generated by script):

[
  {
    "key": 119,
    "category": "nemo,",
    "parent": {
      "name": "cumque5",
      "key": 5
    },
    "date": "2014-01-29T15:39:45.340Z"
  },
  {
    "key": 96,
    "category": "nemo,",
    "parent": {
      "name": "cumque5",
      "key": 5
    },
    "date": "2014-01-29T19:56:18.885Z"
  },
  {
    "key": 125,
    "category": "nemo,",
    "parent": {
      "name": "cumque5",
      "key": 5
    },
    "date": "2014-01-30T01:00:53.648Z"
  },
  {
    "key": 51,
    "category": "nemo,",
    "parent": {
      "name": "eveniet1",
      "key": 1
    },
    "date": "2014-01-30T06:46:51.531Z"
  },
  {
    "key": 237,
    "category": "nemo,",
    "parent": {
      "name": "cumque5",
      "key": 5
    },
    "date": "2014-01-30T12:25:14.810Z"
  },
  //...
]

And code:

<div id="canvas"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://lib.artzub.com/js/blackhole.js/blackhole.js"></script>
<script>
var data = rawData.map(function(d) {
        d.date = new Date(d.date);
        return d;
    })
    , stepDate = 864e5
    , d3bh = d3.blackHole("#canvas")
    ;

d3bh.setting.drawTrack = true;

d3bh.on('calcRightBound', function(l) {
        return +l + stepDate;
    })
    .start(data)
    ;
</script>
## Documentation

For creation instance of the blackHole object, need call method of the d3js object

var bh = d3.blackHole('#canvas');

d3.blackHole([node])

node — or a selector, or a dom node, or a d3 node (default: document.body)
returning the blackHole object

Next describe the properties and methods of the blackHole object.

Properties

Settings

All fields can change dynamic.

For try how to work setting look this example II
also try this dataset

Methods

Most of the methods returning blackHole object in order to use chain.


  • bh.selectNode([node])

    Gets or sets a selected node.
    nodenode object
    If called without arguments then returns the selected node,
    else sets the selected node and returns blackHole object.

    If set the selected node, then colors of nodes will be colorless,
    if a category of a node is not equals a category of the selected node.

  • bh.selectCategory([category])

    Gets or sets a selected category
    categorycategory object
    If called without arguments then returns the selected category,
    else sets the selected node and returns blackHole object.

    If set the selected category, then colors of nodes will be colorless,
    if a category of a node is not equals the selected category.

  • bh.frozenCategory([category])

    Gets or sets a frozen category
    categorycategory object
    If called without arguments then returns the frozen category,
    else sets the frozen node and returns blackHole object.

    If set the frozen category, then nodes will be hidden,
    if a category of a node is not equals the frozen category.


  • bh.parents([arg])

    Gets or sets d3_Map object of parents nodes
    arg — must be or hash object, or d3_Map object where a key is a key field of a parent node

    If called without arguments then returns the d3_Map object of patents nodes
    else sets patents nodes and returns blackHole object.

  • bh.children([arg])

    Gets or sets d3_Map object of children nodes
    arg — must be or hash object, or d3_Map object where a key is a key field of a child node

    If called without arguments then returns the d3_Map object of children nodes
    else sets children nodes and returns blackHole object.

  • bh.categories([arg])

    Gets or sets d3_Map object of categories
    arg — must be or hash object, or d3_Map object where a key is a key field of a category

    If called without arguments then returns the d3_Map object of categories
    else sets categories and returns blackHole object.




Complex example using maps

Realtime Mode

bh.setting.realtime bh.append(array)

Node object

Parent node

Child node

Category object

## For developers

If you want to modify blackHole.js, click the "Fork" button in the top-right corner of this page, and then clone your fork from the command line by replacing username with your GitHub username:

git clone git://github.com/username/blackhole.js.git

On the other hand, if you want to extend blackHole with new features, fix bugs, or run tests, you should fork the blackHole repository, and install Node.js (version 0.10.x or higher). From the root directory of this repository, you can then install blackHole's dependencies:

npm install

For make:

make full