Repository files navigation

• Quick start
• How to use
• Reference manual
  • InteractiveGraph API
  • dependencies
• MainFrame, applications
  • controls
  • theme
  • event handling
  • data connector
• GSON
• Datasets
  • honglou.json
  • WorldCup2014.json
• Building an IGP server
• Applications
  • GraphNavigator
  • GraphExplorer
  • RelFinder
• Contributing to InteractiveGraph
• Build & Debug
• Build & Release
• LICENSE

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 andRelFinder.

GraphNavigator: online demohttps://grapheco.github.io/InteractiveGraph/dist/examples/example1.html

GraphExplorer: online demohttps://grapheco.github.io/InteractiveGraph/dist/examples/example2.html

RelFinder: online demohttps://grapheco.github.io/InteractiveGraph/dist/examples/example3.html

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

Step 2. unzip and deployexamples.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

changeexample1.html toexamples2.html orexamples3.html, etc.

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

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

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

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

Step 4. use functions and classes defined inigraph namespace:

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

As shown above, aGraphNavigator application object is created and used to load graph data fromhonglou.json.

For more details, seehttps://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 onGraphNavigator and other application classes. Furthermore, users can create new application classes via using aMainFrame class directly.

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

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

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

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

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. AControl class and two derived classesUIControl(controls with UI) andBGControl(backgroud control with no UI) are defined in InteractiveGraph.

All controls are listed in the table below.

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

<scripttype="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:

<scripttype="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.

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

MainFrame and controls communicate with applications through events. For example, when the window is resizing, MainFrame and all controls will receive FRAME_RESIZE events.

To subscribe a event, call aon(event, handler) method on MainFrame or a Control. To cancel the subscription, useoff(event, handler) instead.

To fire an event to MainFrame, useMainFrame.emit(event, args) orMainFrame.fire(event, args) method. Unlike theemit() method,fire() put default context objects includingmainFrame,htmlMainFrame,theme intoargs before emition. To fire an event to aControl, useemit(event, args) method.

MainFrame loads data via aConnector which may connect to aLocalGraph or aRemoteGraph. ALocalGraph loads all data once from a GSON object or file, while aRemoteGraph interacts with a remote graph server each time if no cache data is available.

An application always employe an embedded MainFrame to load a GSON file vialoadGson() method:

app.loadGson("honglou.json");

Or callingconnect() method to load an interactive graph from remote IGP server:

app.connect("http://localhost:9999/graphserver/connector-bolt");

MainFrame loads data from aLocalGraph inGSON format.GSON is actually an enhancedJSON format for graph data. The enhancement isGSON recoginzesfunctions, which is not valid in JSON.

GSON consists of some data items, it is defined as follow:

exportinterfaceGSON{"data":{nodes:object[];edges?:object[];}"dbinfo"?:object;"categories"?:object;"translator"?:{"nodes"?:(node:object)=>void;"edges"?:(node:object)=>void;};}

Here,translator defines translator functions for graph nodes and edges, which will be invoked on loading. An example is shown below, in whichdescription of each node is evaluated on loading time.

"translator":{"nodes":function(node){//set descriptionif(node.description===undefined){vardescription="<p align=center>";description+="<img src='"+node.image+"' width=150/><br>";description+="<b>"+node.label+"</b>"+"["+node.id+"]";description+="</p>";node.description=description;}},}

Two GSON datasets are provided in examples as.json files: honglou.json, WorldCup2014.json.

The honglou dataset comes from the Chinese famous novelDream of the Red Chamber(also calledThe Story of the Stone,https://en.wikipedia.org/wiki/Dream_of_the_Red_Chamber), in whichJia Baoyu,Lin daiyu, andXue baochai are famous characters. The honglou dataset defines 300+ entities represent persons, locations, and events in the novel, and 500+ links between them.

nickel2008@github provides this dataset. Maybe there are some mistakes in the dataset, but it is good enough to use as an example graph.

The world cup 2014 data set comes fromhttp://visjs.org/examples/network/exampleApplications/worldCupPerformance.html. The edges in particular (~9200) are very computationally intensive to draw.

The next screenshot shows how WorldCup2014.json is rendered inGraphNavigator (empowered by visjs).

AnRemoteGraph is always provided by an IGP(interactive graph protocol, seehttps://github.com/grapheco/InteractiveGraph/blob/master/IGP.md) server. To build an IGP server, refer to the InteractiveGraph-neo4j project and other 3-party projects.

It would be highly appreciated if you commit any codes or documents to InteractiveGraph. If you have any good idea, please fork this project and create pull requests.

• To contribute new applications, you may define new application class derived fromBaseApp.

• To contribute any controls, you may define new control class derived fromUIControl andBGControl.

• To contribute new themes.

• To contribute new tool button, you may define new ButtonInfos. Note thatFont Awesome icons are available in button icon!

• To contribute new data sets or modification, you may submit data in GSON format!

Tested development environment:

• Node.js: v11.15.0
• npm: 6.7.0

Step 1. usenpm run build orgulp build to build InteractiveGraphBrowser, which generatesinteractive-graph.js andinteractive-graph.css inbuild dir.

Step 2. opensrc/test/webapp/example1.html in Web browser (Google Chrome, for example).

Step 1. usegulp release if you want to get a distribution version, which will outputexamples andinteractive-graph-<VERSION> indist dir.

Step 2. opendist/examples/example1.html in Web browser.

InteractiveGraph is licensed under the BSD 2-Clause "Simplified" License.

Please cite this project as reference if you are to mention it:

InteractiveGraph: a web-based interactive operating framwork for large graph data［EB/OL］. https://github.com/grapheco/InteractiveGraph, 2018-09-09

or add following paper as reference:

赵子豪,沈志宏*. 一种适合多元异构图数据管理系统的交互分析框架[J]. 数据分析与知识发现,2019,10(34):37-46.

Furthermore, it is appreciated if you let us know how you use InteractiveGraph in your projects!!! Please fill the use case table (https://github.com/grapheco/InteractiveGraph/wiki/use-case-collection) with your name (github username), organization, and project.