Giter VIP home page Giter VIP logo

grapheco / interactivegraph Goto Github PK

View Code? Open in Web Editor NEW
1.0K 56.0 248.0 111.95 MB

InteractiveGraph provides a web-based interactive visualization and analysis framework for large graph data, which may come from a GSON file, or an online Neo4j graph database. InteractiveGraph also provides applications built on the framework: GraphNavigator, GraphExplorer and RelFinder.

License: BSD 2-Clause "Simplified" License

JavaScript 95.74% HTML 0.17% TypeScript 1.98% SCSS 1.07% Less 0.85% CSS 0.20%
graph browser neo4j html5-canvas interactivegraphprotocol visualizer relfinder navigator explorer visjs

interactivegraph's Introduction

InteractiveGraph

GitHub releases GitHub downloads GitHub issues GitHub forks GitHub stars GitHub 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 and RelFinder.

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

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

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

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.

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.

Reference manual

InteractiveGraph API

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

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.

MainFrame, applications

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

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.

control function type
ConnectCtrl show a load data dialog UIControl
ExpansionCtrl expands a graph node on double click BGControl
HighlightNodeCtrl highlight selected graph nodes BGControl
InfoBoxCtrl show a infomation box on click on a graph node UIControl
MessageBoxCtrl show a message box on demand UIControl
RelFinderCtrl finding relations between graph nodes BGControl
RelFinderDialogCtrl show a dialog for user to launch a finding task UIControl
SearchBarCtrl show a search bar for keyword input UIControl
ToolbarCtrl show a tool bar UIControl

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.
groups.useSeqColors Boolean false If true, the node will cycle use the colors in the color sequence. If false, nodes will use custom colors.
groups.SeqColors NodeColor[] null The color sequence.
groups.custom Object null The custom colors.

event handling

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 a on(event, handler) method on MainFrame or a Control. To cancel the subscription, use off(event, handler) instead.

To fire an event to MainFrame, use MainFrame.emit(event, args) or MainFrame.fire(event, args) method. Unlike the emit() method, fire() put default context objects including mainFrame, htmlMainFrame, theme into args before emition. To fire an event to a Control, use emit(event, args) method.

data connector

MainFrame loads data via a Connector which may connect to a LocalGraph or a RemoteGraph. A LocalGraph loads all data once from a GSON object or file, while a RemoteGraph 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 via loadGson() method:

app.loadGson("honglou.json");

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

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

GSON

MainFrame loads data from a LocalGraph in GSON format. GSON is actually an enhanced JSON format for graph data. The enhancement is GSON recoginzes functions, which is not valid in JSON.

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

export interface GSON {
    "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 which description of each node is evaluated on loading time.

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

Datasets

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

honglou.json

The honglou dataset comes from the Chinese famous novel Dream of the Red Chamber(also called The Story of the Stone, https://en.wikipedia.org/wiki/Dream_of_the_Red_Chamber), in which Jia Baoyu, Lin daiyu, and Xue 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.

WorldCup2014.json

The world cup 2014 data set comes from http://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 in GraphNavigator (empowered by visjs).

Building an IGP server

An RemoteGraph is always provided by an IGP(interactive graph protocol, see https://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.

project description language
InteractiveGraph-neo4j InteractiveGraph-neo4j(https://github.com/grapheco/InteractiveGraph-neo4j) serves GSON files, Neo4j databases as InteractiveGraph providers, it generates InteractiveGraphs for remote frontend InteractiveGraph clients on demand. Scala+Java+Spring
InteractiveGraph-RDF InteractiveGraph-RDF(https://github.com/grapheco/InteractiveGraph-RDF) serves RDF stores as InteractiveGraph providers Scala+Java+Spring

Applications

GraphNavigator

GraphExplorer

RelFinder

Contributing to InteractiveGraph

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 from BaseApp.

  • To contribute any controls, you may define new control class derived from UIControl and BGControl.

  • To contribute new themes.

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

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

Build & Debug

Step 1. use npm run build or gulp build to build InteractiveGraphBrowser, which generates interactive-graph.js and interactive-graph.css in build dir.

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

Build & Release

Step 1. use gulp release if you want to get a distribution version, which will output examples and interactive-graph-<VERSION> in dist dir.

Step 2. open dist/examples/example1.html in Web browser.

LICENSE

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.

interactivegraph's People

Contributors

airzihao avatar bluejoe2008 avatar dependabot[bot] avatar hc-teemo avatar nickel2018 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

interactivegraph's Issues

JS/CSS files for Latest Version

Good day,

Thank you for sharing this awesome project.

I am doing some tests with this library and I am sure this is very useful and helpful.

Just, could you do me a favor?
image

Could you share the js/css of the latest version files without minimization? min.js and min.css are difficult to read for me.

Hope you can help me... Thank you so much.

请问可以自定义边的样式吗

你好,感谢分享这么优秀的知识图谱可视化项目,但是在导入自己的数据时,边往往颜色很淡,请问有方法可以自定义边的样式吗

making RelFinder work with a SPARQL endpoint.

I'd like to have a longer chat with you to find out more about what you're doing and to share with you my interests. We might find some good synergies

Thanks for your help in getting started with your InteractiveGraph software, I think it will be very useful. I have been able to build the minified javascript file now and will look at greeting some graph files on my own data. After that, I am interested in having something like relfinder that can work with a SPARQL endpoint.

Cannot change node's color after using app.insertNodes()

Hi! I would like to ask you a question about change the theme, especially changing nodes' color. I am using app.insertNodes() to insert nodes and edges into the graph, but I notice that all new nodes color is default blue color instead of the color I defined when I create GraphNavigator. I also used app.updateTheme(), but it can only change the nodes shape or all nodes color to be one color instead of changing nodes color to be different color in the pre-defined group object.

image
image

Node deletion

Excuse me,how can I delete or hide the displayed nodes and relationships?

Listen the node be hovered

Hi, there is a question that how this tool to listen which node be hovered or I say how to listen nodes be hovered?

如何设置节点标签大小(How to set the size of labels)

所有的节点的标签名称的大小似乎都是默认统一的14pt。如何设置节点标签名称大小。比如节点的度越大标签名越显著。
(The size of labels of all nodes seems to be the same as 14pt by default. How to set the node label size? For example, the greater the degree of the node, the more prominent the label size)

any chance we can change the layout?

When there are many nodes, the layout is chaotic. It's difficult for people to get the point in the network.
Some nodes are crossing together, and the edge are too thin to distinguish who is whose child node.

especially in example2.html

Is there any chance wo can use the vis.js Hierarchical Layout or other layout

是否可以将 gson 中的function 写到 html 页面的script中??

我都没发自动生成 json 文件了。小哥哥,我并不是做前端的,所以不会操作。

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

igraph.war

I want to know where is the igraph.war?I only can find igraph.zip instead of igraph.war.I'll be so glad if you can answer me.

如何使用RDF数据进行展示

我看到有个InteractiveGraph-RDF后端,由于没有使用手册,我不太了解这个应该怎么用。
是需要自己把这个后端部署在服务器吗?然后前端用app.connect来连接么?

你好,这个项目好像出现了一些问题

你好,我看到包括你的在线实例在内,使用GraphExplorer的搜索框组件时,之前的搜索按钮变成了GraphNavigator中的样式,搜索按钮无法使用,我的本地项目也出现了这样的问题,请问你知道是什么原因吗

Add new node and edge

I have a question about adding node and edge. I use the app.insertNodes() and app.insertEdges() to add a new node and an edge which between the selected node and the new node, but the label of the new edge and INFO box of the new node did not show. And there is an error like that:
image

右上角的面板是否能实现颜色图示

右上角的面板,有每个结点的的颜色配置。如果不进行修改,该处的颜色都是白色。
image

我通过自定义定义了我每个节点的颜色,是否能够实现在最开始就把这款颜色变为当前颜色?
像这样:
image

节点图片在web界面不显示的问题

您好,不好意思,打扰您一下!我在使用neo4j+interactivegraph知识图谱可视化中发现web界面上节点的图片都显示不出来,我知道是因为图片链接地址已经被豆瓣给修改了,但是我在neo4j中一个电影节点的'image"属性给修改成了一个可以打开的图片URL,可是在web界面仍然没有显示,,我现在不知道该如何去解决这个问题,还请您在百忙之中,指点我一下,麻烦您了。

NETWORK_DESELECT_NODES

I do not think that the NETWORK_DESELECT_NODES event has been implemented. So, we can only use NETWORK_DESELECT_EDGES?

Neo4j+InteractiveGraph可视化出现的节点图片为显示问题

您好,打扰一下!我已经成功部署了Neo4j+InteractiveGraph实现豆瓣电影知识图谱可视化,但目前存在一个问题,就是电影节点的海报图片根本就不显示,我看您提到的是因为数据集中的图片链接被豆瓣改了,我重新找了一个豆瓣的电影海报链接,比如我在neo4j数据库中将”少年班“这一电影节点的”image‘属性给修改成了’https://img9.doubanio.com/view/photo/raw/public/p2246429565.jpg‘,我确定这个链接是能的打开的,但是在运行example2的时候,仍然显示不出来这个“少年班”电影节点的海报图片,我现在就想在interactivategraph上显示节点的图片,不知道您这边知道去解决尼?

how to show multirelation?

As tow entities may have multirelation , like a couple may also are classmates
issue5

explorer.html shown like this, relation "竞争"covered relation "合作”
issue6

其它的数据读取方式以及和其它框架的适配

您好,感谢您开源那么方便的工具。 由于我对前端不是太熟悉,所以想请教一些问题:

  1. 默认推荐的数据读取格式是用loadGson从一个GSON文件中读取,然后进行可视化。我想问一下如果是后端传过来的一个GSON格式的变量,怎么样使用类似的方式对其进行可视化了?
  2. 如果想要在类似Vue这种框架中使用InteractivateGraph, 有什么建议或者例子吗?

Question of icon

A small question, are these icons you defined by your self or you use some third-party icon library like font awesome?

Can't display edge label in GraphExplorer.

使用最新版本的GraphExplorer点击节点无法显示关系,在线展示的网站中也不行。
Clicking on a node with the latest version of GraphExplorer does not display the relationship label, nor does it work in the website displayed online.

I can't show the info from the nodes inserted by API insertNodes

I use example1.html as base. When I insert nodes by api app.insertNodes throught javascript code, It show the node only but can't show the info when I click the node. What can I do to show it once I click the nodes?
For example, Can I use some api to call eventHandler when click the node as if the second argument of app.loadGson()?

pinning of nodes

When using the relfinder approach of the InteractiveGraph there is a force-directed layout of the nodes, and the nodes can be dragged out. However, once the mouse cursor is removed from a node, the force-directed physics is re-applied and the node returns to the place it was dragged from. This is not very useful when I want to spread out the nodes a little more than is done automatically.

Is there any setting for allowing the node to be 'pinned' to a position by dragging so that I can manually spread nodes out for inspection?

如何更改一些默认的操作,例如默认让边和边的表现显示出来

你好,非常感谢您开源了那么好的可视化工具。
因为GraphNavigator默认只显示节点,如果要显示边或者标签的话,需要点击右上角的按钮或者点击边,

  1. 我想请教一下如何在代码里面默认更改这个参数,让他能够自动显示出边和标签了?
  2. 如果想自动保存显示的界面到本地,有相应的功能支持吗?

Control the colors

Is there any option that provides a control on the circle color per label?
I want to configure that label "person" will always be with the color red.

Great library :)

neo4j_interactivegraph知识图谱可视化中节点图片显示问题

您好,不好意思,打扰您一下!我在使用neo4j+interactivegraph知识图谱可视化中发现web界面上节点的图片都显示不出来,我知道是因为图片链接地址已经被豆瓣给修改了,但是我在neo4j中一个电影节点的'image"属性给修改成了一个可以打开的图片URL,可是在web界面仍然没有显示,,我现在不知道该如何去解决这个问题,还请您在百忙之中,指点我一下,麻烦您了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.