Insights.js

A JavaScript library to visualize and navigate graphs.

Demo here

Installation

### With component.js

Insights can be installed with component.js.

$ component install ignacioola/insights

Without component.js

Add the insights.standalone.js and insights.standalone.css files located under build/ to your webpage.

## Usage

var Insights = require("insights");

Example Data

var nodes = [
    {
        id: 1,
        text: "apple",
        size: 9,
        cluster: 5
    },
    {
        id: 2,
        text: "google",
        size: 7,
        cluster: 2
    },
    {
        id: 3,
        text: "microsoft",
        size: 5,
        cluster: 1
    }
];

var links = [
    [ 1, 2 ], // [ source.id, target.id ]
    [ 2, 3 ],
    [ 1, 3 ]
];

## How to use it ?

var el = document.getElementById("container");
var graph = new Insights(el, nodes, links).render();

Adding a an event handler

graph.on("rendered", function() {
    // hide loader, ...
});

Events

• rendered: when the graph has finished rendering.
• no match: when a filter is applied and no matching nodes where found.
• node:click: when a node is clicked.
• node:mouseover: when the mouse is over a node.
• node:mouseout: when the mouse goes out from a node.

Filtering

The filter function decides which nodes are visible and which are not. Always after applying filters the graph must be updated by calling update().

graph.filters({...}).update();

To return to the graph initial state, you can call reset().

graph.reset();

### Filter by id

graph.filter({ id: 1 });

### Filter by partial text match

graph.filter({ text: "micro" });

### Filter by size

// filter by a range of values

graph.filter({ size: [1, 15] });

// filter greater than.. 

graph.filter({ size: [1, null] });

// filter lower than..

graph.filter({ size: [null, 15] });

### Filter by clusters

graph.filter({ cluster: 1 })

//  or multi-cluster filter...

graph.filter({ cluster: [1, 2, 3] })

### Filtering by more than one value

graph.filter({ text: "app", size: [1, 15], cluster: 0 })

Custom filters

graph.filter(function(node) {
  if (node.text == "something") {
    return true;
  } else {
    return false;
  }
})

Focusing

With .focus() you can decide which node and it's relations get highlighted.

Focusing by id

graph.focus(1);

//  or

graph.focus({ id: 1 });

Focus a node and it's incoming relations

graph.focus(1, { in: true })

Focus a node and it's outgoing relations

graph.focus(1, { out: true })

Focusing by exact text match

graph.focus({ text: "Apple" })

This will focus the graph on the first node that matches exactly the given text.

Method chaining

You can apply filters even in the focused state.

graph.focus({ id: 1 })
     .filter({ size: [50, 100] })
     .zoom(.2)
     .update()

Adding a tooltip

Using mustache synthax:

graph.tooltip("<div>name: {{text}}</div><div>count: {{size}}</div>")

API

Insights(el, nodes:array, links:array, options:obj)

Creates a new graph on the el element with the given nodes and links.

Available options include:

• width: the graph width.
• height: the graph height.
• collisionAlpha: used when trying to solve collisions to determine how far from each other to position nodes. Defaults to 0.5.
• initialScale: the chart's initial scale.
• tooltip: adds a tooltip with the passed template if a string if passed. If you pass a truthy value, that's not a string it uses the default template.
• colors: an object containing the colors for each cluster. For example: { "0": "blue", "1": "#FF0000" } .

### .filter(fn|obj)

Selects all the nodes that for which fn result evaluates to true or if an object passed by all of it's values.

### .focus(fn|obj|id, options:obj)

Focuses the graph on the first node that matches the passed parameters.

Available options include:

• in: highlight incoming relations.
• out: highlight outgoing relations.

.reset()

It returns the graph to it's original state.

.center(id)

Centers the graph. If there's a focused node it will be centered around it, if not it will center the graph on the mass center. If a node id is passed, it centers the graph around it.

### .zoom(scale)

Zooms the graph to the given scale.

### .zoomIn()

Zooms in the graph.

.zoomOut()

Zooms out the graph.

### .getClusters()

Returns an object with the available clusters.

### .tooltip(template:str)

Adds a tooltip with the given template to the node:mouseover event.

## Used in

• #8N Analysis

## Licence

MIT