{"id":13553770,"url":"https://github.com/grapheco/InteractiveGraph","last_synced_at":"2025-04-03T05:31:31.203Z","repository":{"id":41819844,"uuid":"120999293","full_name":"grapheco/InteractiveGraph","owner":"grapheco","description":"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.","archived":false,"fork":false,"pushed_at":"2024-06-19T07:32:38.000Z","size":114645,"stargazers_count":1076,"open_issues_count":38,"forks_count":258,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-04-01T11:07:22.167Z","etag":null,"topics":["browser","explorer","graph","html5-canvas","interactivegraphprotocol","navigator","neo4j","relfinder","visjs","visualizer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grapheco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://bluejoe2008.github.io/open-source-sponser.png"}},"created_at":"2018-02-10T08:43:07.000Z","updated_at":"2025-03-26T00:08:47.000Z","dependencies_parsed_at":"2024-08-01T12:36:26.625Z","dependency_job_id":null,"html_url":"https://github.com/grapheco/InteractiveGraph","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapheco%2FInteractiveGraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapheco%2FInteractiveGraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapheco%2FInteractiveGraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapheco%2FInteractiveGraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grapheco","download_url":"https://codeload.github.com/grapheco/InteractiveGraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","explorer","graph","html5-canvas","interactivegraphprotocol","navigator","neo4j","relfinder","visjs","visualizer"],"created_at":"2024-08-01T12:02:32.982Z","updated_at":"2025-04-03T05:31:31.099Z","avatar_url":"https://github.com/grapheco.png","language":"JavaScript","readme":"\u003c!-- vscode-markdown-toc --\u003e\n* [Quick start](#Quickstart)\n* [How to use](#Howtouse)\n* [Reference manual](#Referencemanual)\n\t* [InteractiveGraph API](#InteractiveGraphAPI)\n\t* [dependencies](#dependencies)\n* [MainFrame, applications](#MainFrameapplications)\n\t* [controls](#controls)\n\t* [theme](#theme)\n\t* [event handling](#eventhandling)\n\t* [data connector](#dataconnector)\n* [GSON](#GSON)\n* [Datasets](#Datasets)\n\t* [honglou.json](#honglou.json)\n\t* [WorldCup2014.json](#WorldCup2014.json)\n* [Building an IGP server](#BuildinganIGPserver)\n* [Applications](#Applications)\n\t* [GraphNavigator](#GraphNavigator)\n\t* [GraphExplorer](#GraphExplorer)\n\t* [RelFinder](#RelFinder)\n* [Contributing to InteractiveGraph](#ContributingtoInteractiveGraph)\n* [Build \u0026 Debug](#BuildDebug)\n* [Build \u0026 Release](#BuildRelease)\n* [LICENSE](#LICENSE)\n\n\u003c!-- vscode-markdown-toc-config\n\tnumbering=false\n\tautoSave=true\n\t/vscode-markdown-toc-config --\u003e\n\u003c!-- /vscode-markdown-toc --\u003e\n# InteractiveGraph\n\n[![GitHub releases](https://img.shields.io/github/release/grapheco/InteractiveGraph.svg)](https://github.com/grapheco/InteractiveGraph/releases)\n[![GitHub downloads](https://img.shields.io/github/downloads/grapheco/InteractiveGraph/total.svg)](https://github.com/grapheco/InteractiveGraph/releases)\n[![GitHub issues](https://img.shields.io/github/issues/grapheco/InteractiveGraph.svg)](https://github.com/grapheco/InteractiveGraph/issues)\n[![GitHub forks](https://img.shields.io/github/forks/grapheco/InteractiveGraph.svg)](https://github.com/grapheco/InteractiveGraph/network)\n[![GitHub stars](https://img.shields.io/github/stars/grapheco/InteractiveGraph.svg)](https://github.com/grapheco/InteractiveGraph/stargazers)\n[![GitHub license](https://img.shields.io/github/license/grapheco/InteractiveGraph.svg)](https://github.com/grapheco/InteractiveGraph/blob/master/LICENSE)\n\nInteractiveGraph provides a web-based interactive operating framwork for large graph data, which may come from a GSON file, or an online Neo4j graph database.\n\nInteractiveGraph also provides three applications built on the framework: `GraphNavigator`, `GraphExplorer` and `RelFinder`.\n\n__GraphNavigator__: online demo https://grapheco.github.io/InteractiveGraph/dist/examples/example1.html\n\u003cimg alt=\"GraphNavigator\" src=\"docs/navi.png\" width=\"700\"\u003e\n\n__GraphExplorer__: online demo \nhttps://grapheco.github.io/InteractiveGraph/dist/examples/example2.html\n\u003cimg alt=\"GraphExplorer\" src=\"docs/exp.gif\" width=\"700\"\u003e\n\n__RelFinder__: online demo https://grapheco.github.io/InteractiveGraph/dist/examples/example3.html\n\u003cimg alt=\"RelFinder\" src=\"docs/rel.gif\" width=\"700\"\u003e\n\n## \u003ca name='Quickstart'\u003e\u003c/a\u003eQuick start\n__Step 1.__ download `examples.zip`:\nhttps://github.com/grapheco/InteractiveGraph/releases\n\n__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.\n\n__Step 3.__ visit the webapp in Web browser, url may looks like:\nhttps://localhost:8080/examples/example1.html\n\nchange `example1.html` to `examples2.html` or `examples3.html`, etc.\n\n## \u003ca name='Howtouse'\u003e\u003c/a\u003eHow to use\n__Step 1.__ download `interactive-graph-\u003cVERSION\u003e.zip`(`interactive-graph-0.1.0.zip`, for example) from `dist` directory: \nhttps://github.com/grapheco/InteractiveGraph/dist/\n\n__Step 2.__ unzip `interactive-graph-\u003cVERSION\u003e.zip`, two files will be got: `interactive-graph.min.js` and `interactive-graph.min.css`.\n\n__Step 3.__ import the `.js` and `.css` files in HTML page, like that:\n```javascript\n\u003cscript type=\"text/javascript\" src=\"./lib/interactive-graph-0.1.0/interactive-graph.min.js\"\u003e\u003c/script\u003e\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"./lib/interactive-graph-0.1.0/interactive-graph.min.css\"\u003e\n```\n\n__Step 4.__ use functions and classes defined in `igraph` namespace:\n```javascript\n\u003cscript type=\"text/javascript\"\u003e\n    igraph.i18n.setLanguage(\"chs\");\n    var app = new igraph.GraphNavigator(document.getElementById('graphArea'));\n    app.loadGson(\"honglou.json\");\n\u003c/script\u003e\n```\nAs shown above, a `GraphNavigator` application object is created and used to load graph data from `honglou.json`.\n\nFor more details, see https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html.\n\nTo 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.\n\n## \u003ca name='Referencemanual'\u003e\u003c/a\u003eReference manual\n\n### \u003ca name='InteractiveGraphAPI'\u003e\u003c/a\u003eInteractiveGraph API\nInteractiveGraph is written in TypeScript. Visit https://grapheco.github.io/InteractiveGraph/dist/api/index.html to get online API documents.\n\n### \u003ca name='dependencies'\u003e\u003c/a\u003edependencies\nThis project depends on some open sourced components including `visjs`, `npm`, `gulp`, `jQuery`, `jQueryUI`, `Font Awesome` and so on.\n\n\u003cimg src=\"docs/visjs.png\" height=\"50\"\u003e \u003cimg src=\"docs/npm.png\" height=\"50\"\u003e \u003cimg src=\"docs/gulp.png\" height=\"50\"\u003e \u003cimg src=\"docs/jquery.png\" height=\"50\"\u003e \u003cimg src=\"docs/jqueryui.png\" height=\"50\"\u003e \u003cimg src=\"docs/fa.png\" height=\"50\"\u003e\n\nMore dependencies, see https://github.com/grapheco/InteractiveGraph/blob/master/package.json.\n\n## \u003ca name='MainFrameapplications'\u003e\u003c/a\u003eMainFrame, applications\n\nInteractiveGraph provides a MainFrame, which actually is a facade of Web UI, event handling and graph data connection.\n\n### \u003ca name='controls'\u003e\u003c/a\u003econtrols\n\n\u003cimg src=\"docs/frame.png\" width=\"700\"\u003e\n\nAs 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.\n\nSome 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.\n\nAll controls are listed in the table below.\n\n| control | function | type |\n|-|-|-|\n|ConnectCtrl|show a load data dialog|UIControl|\n|ExpansionCtrl|expands a graph node on double click|BGControl|\n|HighlightNodeCtrl|highlight selected graph nodes|BGControl|\n|InfoBoxCtrl|show a infomation box on click on a graph node|UIControl|\n|MessageBoxCtrl|show a message box on demand|UIControl|\n|RelFinderCtrl|finding relations between graph nodes|BGControl|\n|RelFinderDialogCtrl|show a dialog for user to launch a finding task|UIControl|\n|SearchBarCtrl|show a search bar for keyword input|UIControl|\n|ToolbarCtrl|show a tool bar|UIControl|\n\n### \u003ca name='theme'\u003e\u003c/a\u003etheme\nYou can set the theme of an app when you create it:\n```javascript\n\u003cscript type=\"text/javascript\"\u003e\n    igraph.i18n.setLanguage(\"chs\");\n    var app = new igraph.GraphNavigator(document.getElementById('graphArea'), 'LIGHT');\n    app.loadGson(\"honglou.json\");\n\u003c/script\u003e\n```\n Or you can customize the theme according to your own needs:\n ```javascript\n \u003cscript type=\"text/javascript\"\u003e\n     igraph.i18n.setLanguage(\"chs\");\n     var app = new igraph.GraphNavigator(document.getElementById('graphArea'),{\n        groups: {\n            useSeqColors: false,\n            custom: {\n                person: {color:'blue'},\n                location: {color:'red'},\n                event: {color:'green'}\n            }   \n        }\n     });\n     app.loadGson(\"honglou.json\");\n \u003c/script\u003e\n ```\nThen each type of node will change to the specified color. The parameters of the Theme object are as follows.\n```javascript\nexport interface Theme {\n    canvasBackground: string,\n    highlight: {\n        gradientInnerColor: string,\n        gradientOutterColor: string,\n    }\n    expansion: {\n        backgroudColorCollapsed: string,\n        backgroudColorExpanded: string,\n        fontColor: string\n    }\n    edges: object,\n    nodes: object,\n    groups?: {\n        useSeqColors: boolean,\n        SeqColors?:NodeColor[],\n        custom?:{}\n    }\n}\n```\n| Name                              | Type        | Default                    | Description                                                                                                |\n|-----------------------------------|-------------|----------------------------|------------------------------------------------------------------------------------------------------------|\n| canvasBackground                  | String      | `\"none\"  `                   | Canvas background color                                                                                    |\n| highlight.gradientInnerColor      | String      | `\"#00FF00\"`                  | Internal color gradient when node highlights.                                                              |\n| highlight.gradientOutterColor     | String      | `\"#FFFFFF\"`                  | External color gradient when node highlights.                                                              |\n| expansion.backgroudColorCollapsed | String      | `\"rgba(127, 127, 127, 0.9)\"` | The color of the tag when node is collapsed.                                                               |\n| expansion.backgroudColorExpanded  | String      | `\"rgba(0, 128, 0, 0.9)\"`     | The color of the tag when node is expanded.                                                                |\n| expansion.fontColor               | String      | `\"#FFFFFF\"`                  | The font color of the tag.                                                                                 |\n| edges                             | Object      | `Object `                    | All options in this object are explained in [here](https://visjs.github.io/vis-network/docs/network/edges.html).|                                                          |\n| nodes                             | Object      | `Object `                    | All options in this object are explained in [here](https://visjs.github.io/vis-network/docs/network/nodes.html).|                                                         |\n| groups.useSeqColors               | Boolean     | `false  `                    | If true, the node will cycle use the colors in the color sequence. If false, nodes will use custom colors. |\n| groups.SeqColors                  | NodeColor[] | `null `                      | The color sequence.                                                                                        |\n| groups.custom                     | Object      | `null `                      | The custom colors.                                                                                         |\n### \u003ca name='eventhandling'\u003e\u003c/a\u003eevent handling\n\nMainFrame and controls communicate with applications through events. For example, when the window is resizing, MainFrame and all controls will receive FRAME_RESIZE events.\n\nTo subscribe a event, call a `on(event, handler)` method on MainFrame or a Control. To cancel the subscription, use `off(event, handler)` instead.\n\nTo 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.\n\n### \u003ca name='dataconnector'\u003e\u003c/a\u003edata connector\n\nMainFrame 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.\n\nAn application always employe an embedded MainFrame to load a GSON file via `loadGson()` method:\n```\napp.loadGson(\"honglou.json\");\n```\n\nOr calling `connect()` method to load an interactive graph from remote IGP server:\n```\napp.connect(\"http://localhost:9999/graphserver/connector-bolt\");\n```\n\n## \u003ca name='GSON'\u003e\u003c/a\u003eGSON\n\nMainFrame loads data from a `LocalGraph` in `GSON` format. `GSON` is actually an enhanced `JSON` format for graph data. The enhancement is `GSON` recoginzes `function`s, which is not valid in JSON.\n\n`GSON` consists of some data items, it is defined as follow:\n\n```typescript\nexport interface GSON {\n    \"data\": {\n        nodes: object[];\n        edges?: object[];\n    }\n    \"dbinfo\"?: object;\n    \"categories\"?: object;\n    \"translator\"?: {\n        \"nodes\"?: (node: object) =\u003e void;\n        \"edges\"?: (node: object) =\u003e void;\n    };\n}\n```\n\nHere, `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.\n\n```javascript\n  \"translator\": {\n    \"nodes\": function (node) {\n      //set description\n      if (node.description === undefined) {\n        var description = \"\u003cp align=center\u003e\";\n          description += \"\u003cimg src='\" + node.image + \"' width=150/\u003e\u003cbr\u003e\";\n        description += \"\u003cb\u003e\" + node.label + \"\u003c/b\u003e\" + \"[\" + node.id + \"]\";\n        description += \"\u003c/p\u003e\";\n        node.description = description;\n      }\n    },\n  }\n```\n## \u003ca name='Datasets'\u003e\u003c/a\u003eDatasets\n\nTwo GSON datasets are provided in examples as `.json` files: honglou.json, WorldCup2014.json.\n\n### \u003ca name='honglou.json'\u003e\u003c/a\u003ehonglou.json\n\nThe 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.\n\nnickel2008@github provides this dataset. Maybe there are some mistakes in the dataset, but it is good enough to use as an example graph.\n\n### \u003ca name='WorldCup2014.json'\u003e\u003c/a\u003eWorldCup2014.json\n\nThe 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.\n\nThe next screenshot shows how WorldCup2014.json is rendered in `GraphNavigator` (empowered by visjs).\n\n\u003cimg src=\"docs/worldcup2014.png\" width=\"700\"\u003e\n\n## \u003ca name='BuildinganIGPserver'\u003e\u003c/a\u003eBuilding an IGP server\n\nAn `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.\n\n|project|description|language|\n|-|-|-|\n|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|\n|InteractiveGraph-RDF|InteractiveGraph-RDF(https://github.com/grapheco/InteractiveGraph-RDF) serves RDF stores as InteractiveGraph providers|Scala+Java+Spring|\n\n## \u003ca name='Applications'\u003e\u003c/a\u003eApplications\n\n### \u003ca name='GraphNavigator'\u003e\u003c/a\u003eGraphNavigator\n\n### \u003ca name='GraphExplorer'\u003e\u003c/a\u003eGraphExplorer\n\n### \u003ca name='RelFinder'\u003e\u003c/a\u003eRelFinder\n\n## \u003ca name='ContributingtoInteractiveGraph'\u003e\u003c/a\u003eContributing to InteractiveGraph\n\nIt 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.\n\n* To contribute new applications, you may define new application class derived from `BaseApp`.\n\n* To contribute any controls, you may define new control class derived from `UIControl` and `BGControl`.\n\n* To contribute new themes.\n\n* To contribute new tool button, you may define new ButtonInfos. Note that `Font Awesome` icons are available in button icon!\n\n* To contribute new data sets or modification, you may submit data in GSON format!\n\n## \u003ca name='BuildDebug'\u003e\u003c/a\u003eBuild \u0026 Debug\n\n__Step 1.__ use `npm run build` or `gulp build` to build InteractiveGraphBrowser, which generates `interactive-graph.js` and `interactive-graph.css` in `build` dir.\n\n__Step 2.__ open `src/test/webapp/example1.html` in Web browser (`Google Chrome`, for example).\n\n## \u003ca name='BuildRelease'\u003e\u003c/a\u003eBuild \u0026 Release\n\n__Step 1.__ use `gulp release` if you want to get a distribution version, which will output `examples` and `interactive-graph-\u003cVERSION\u003e` in `dist` dir.\n\n__Step 2.__ open `dist/examples/example1.html` in Web browser.\n\n## \u003ca name='LICENSE'\u003e\u003c/a\u003eLICENSE\n\nInteractiveGraph is licensed under the BSD 2-Clause \"Simplified\" License.\n\nPlease cite this project as reference if you are to mention it:\n\n```\nInteractiveGraph: a web-based interactive operating framwork for large graph data［EB/OL］. https://github.com/grapheco/InteractiveGraph, 2018-09-09\n```\nor add following paper as reference:\n\n```\n赵子豪,沈志宏*. 一种适合多元异构图数据管理系统的交互分析框架[J]. 数据分析与知识发现,2019,10(34):37-46.\n```\n\nFurthermore, 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.\n","funding_links":["https://bluejoe2008.github.io/open-source-sponser.png"],"categories":["JavaScript","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrapheco%2FInteractiveGraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrapheco%2FInteractiveGraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrapheco%2FInteractiveGraph/lists"}