Quick start
How to use
Reference manual
- InteractiveGraph API
- dependencies
MainFrame, applications
GSON
Datasets
- honglou.json
- WorldCup2014.json
Building an IGP server
Applications
Contributing to InteractiveGraph
Build & Debug
Build & Release
LICENSE

InteractiveGraph

InteractiveGraph provides a web-based interactive operating framwork for large graph data, which may come from a GSON file, or an online Neo4j graph database.

InteractiveGraph also provides three applications built on the framework: GraphNavigator, GraphExplorer and RelFinder.

GraphNavigator: online demo https://grapheco.github.io/InteractiveGraph/dist/examples/example1.html <img alt="GraphNavigator" src="docs/navi.png" width="700">

GraphExplorer: online demo https://grapheco.github.io/InteractiveGraph/dist/examples/example2.html <img alt="GraphExplorer" src="docs/exp.gif" width="700">

RelFinder: online demo https://grapheco.github.io/InteractiveGraph/dist/examples/example3.html <img alt="RelFinder" src="docs/rel.gif" width="700">

<a name='Quickstart'></a>Quick start

Step 1. download examples.zip: https://github.com/grapheco/InteractiveGraph/releases

Step 2. unzip and deploy examples.zip as a webapp in a Web server (Apache, Tomcat, etc). A Web server is required, otherwise the graph data loading via AJAX will get an error.

Step 3. visit the webapp in Web browser, url may looks like: https://localhost:8080/examples/example1.html

change example1.html to examples2.html or examples3.html, etc.

<a name='Howtouse'></a>How to use

Step 1. download interactive-graph-<VERSION>.zip(interactive-graph-0.1.0.zip, for example) from dist directory: https://github.com/grapheco/InteractiveGraph/dist/

Step 2. unzip interactive-graph-<VERSION>.zip, two files will be got: interactive-graph.min.js and interactive-graph.min.css.

Step 3. import the .js and .css files in HTML page, like that:

<script type="text/javascript" src="./lib/interactive-graph-0.1.0/interactive-graph.min.js"></script>
<link type="text/css" rel="stylesheet" href="./lib/interactive-graph-0.1.0/interactive-graph.min.css">

Step 4. use functions and classes defined in igraph namespace:

<script type="text/javascript">
    igraph.i18n.setLanguage("chs");
    var app = new igraph.GraphNavigator(document.getElementById('graphArea'));
    app.loadGson("honglou.json");
</script>

As shown above, a GraphNavigator application object is created and used to load graph data from honglou.json.

For more details, see https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html.

To develop custom applications, it is a good idea to write new application classes derived on GraphNavigator and other application classes. Furthermore, users can create new application classes via using a MainFrame class directly.

<a name='Referencemanual'></a>Reference manual

<a name='InteractiveGraphAPI'></a>InteractiveGraph API

InteractiveGraph is written in TypeScript. Visit https://grapheco.github.io/InteractiveGraph/dist/api/index.html to get online API documents.

<a name='dependencies'></a>dependencies

This project depends on some open sourced components including visjs, npm, gulp, jQuery, jQueryUI, Font Awesome and so on.

More dependencies, see https://github.com/grapheco/InteractiveGraph/blob/master/package.json.

<a name='MainFrameapplications'></a>MainFrame, applications

InteractiveGraph provides a MainFrame, which actually is a facade of Web UI, event handling and graph data connection.

<a name='controls'></a>controls

As shown above, MainFrame consists of a main graph rendering canvas, a set of navigation buttons, and serveral controls: search bar, tool bar, info box, highlight control and so on.

Some controls have Web UI, such as InfoBoxCtrl, MessageBoxCtrl, etc. While others work with no UI, such as HighlightNodeCtrl, ExpansionCtrl, etc. A Control class and two derived classes UIControl(controls with UI) and BGControl(backgroud control with no UI) are defined in InteractiveGraph.

All controls are listed in the table below.

<a name='theme'></a>theme

You can set the theme of an app when you create it:

<script type="text/javascript">
    igraph.i18n.setLanguage("chs");
    var app = new igraph.GraphNavigator(document.getElementById('graphArea'), 'LIGHT');
    app.loadGson("honglou.json");
</script>

Or you can customize the theme according to your own needs:

<script type="text/javascript">
    igraph.i18n.setLanguage("chs");
    var app = new igraph.GraphNavigator(document.getElementById('graphArea'),{
       groups: {
           useSeqColors: false,
           custom: {
               person: {color:'blue'},
               location: {color:'red'},
               event: {color:'green'}
           }   
       }
    });
    app.loadGson("honglou.json");
</script>

Then each type of node will change to the specified color. The parameters of the Theme object are as follows.

export interface Theme {
    canvasBackground: string,
    highlight: {
        gradientInnerColor: string,
        gradientOutterColor: string,
    }
    expansion: {
        backgroudColorCollapsed: string,
        backgroudColorExpanded: string,
        fontColor: string
    }
    edges: object,
    nodes: object,
    groups?: {
        useSeqColors: boolean,
        SeqColors?:NodeColor[],
        custom?:{}
    }
}

| Name | Type | Default | Description | |-----------------------------------|-------------|----------------------------|------------------------------------------------------------------------------------------------------------| | canvasBackground | String | "none" | Canvas background color | | highlight.gradientInnerColor | String | "#00FF00" | Internal color gradient when node highlights. | | highlight.gradientOutterColor | String | "#FFFFFF" | External color gradient when node highlights. | | expansion.backgroudColorCollapsed | String | "rgba(127, 127, 127, 0.9)" | The color of the tag when node is collapsed. | | expansion.backgroudColorExpanded | String | "rgba(0, 128, 0, 0.9)" | The color of the tag when node is expanded. | | expansion.fontColor | String | "#FFFFFF" | The font color of the tag. | | edges | Object | Object | All options in this object are explained in here.| | | nodes | Object | Object | All options in this object are explained in here.|

InteractiveGraph

Install / Use

README

InteractiveGraph

<a name='Quickstart'></a>Quick start

<a name='Howtouse'></a>How to use

<a name='Referencemanual'></a>Reference manual

<a name='InteractiveGraphAPI'></a>InteractiveGraph API

<a name='dependencies'></a>dependencies

<a name='MainFrameapplications'></a>MainFrame, applications

<a name='controls'></a>controls

<a name='theme'></a>theme