Graph visualization library in JavaScript (转)

Graph visualization library in JavaScript

I‘ve just put together what you may be looking for: http://www.graphdracula.net

It‘s JavaScript with directed graph layouting, SVG and you can even drag the nodes around. Still needs some tweaking, but is totally usable. You create nodes and edges easily with JavaScript code like this:

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

I used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm I found on the net (everything open source, MIT license). If you have any remarks or need a certain feature, I may implement it, just ask!



You may want to have a look at other projects, too! Below are two meta-comparisons:

  • SocialCompare has an extensive list of libraries, and the "Node / edge graph" line will filter for graph visualization ones.
  • DataVisualization.ch has evaluated many libraries, including node/graph ones. Unfortunately there‘s no direct link so you‘ll have to filter for "graph":

Here‘s a list of similar projects (some have been already mentioned here):

Pure JavaScript Libraries

  • vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. Auto-layout, auto-clustering, springy physics engine, mobile-friendly, keyboard navigation, hierarchical layout, animation etc. MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks.
  • Cytoscape.js - interactive graph analysis and visualization with mobile support, following jQuery conventions. Funded via NIH grants and developed by by @maxkfranz (see his answer below) with help from several universities and other organizations.
  • The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree. Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010.
  • D3.js Powerful multi-purpose JS visualization library, the successor of Protovis. See the force-directed graph example, and other graph examples in the gallery.
  • sigma.js Lightweight but powerful library for drawing graphs
  • jsPlumb jQuery plug-in for creating interactive connected graphs
  • Springy - a force-directed graph layout algorithm
  • Processing.js Javascript port of the Processing library by John Resig
  • JS Graph It - drag‘n‘drop boxes connected by straight lines. Minimal auto-layout of the lines.
  • RaphaelJS‘s Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS can‘t layout nodes automatically; you‘ll need another library for that.
  • JointJS Core - David Durman‘s MPL-licensed open source diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Works in browsers supporting SVG. Layout algorithms not-included in the core package

Commercial libraries

Abandoned libraries

  • Cytoscape Web Embeddable JS Network viewer (no new features planned; succeeded by Cytoscape.js)
  • Canviz JS renderer for Graphviz graphs. Abandoned in Sep 2013.
  • arbor.js Sophisticated graphing with nice physics and eye-candy. Abandoned in May 2012. Several semi-maintained forks exist.
  • jssvggraph "The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects". Abandoned in 2012.
  • jsdot Client side graph drawing application. Abandoned in 2011.
  • Protovis Graphical Toolkit for Visualization (JavaScript). Replaced by d3.
  • Moo Wheel Interactive JS representation for connections and relations (2008)
  • JSViz 2007-era graph visualization script
  • dagre Graph layout for JavaScript

Non-Javascript Libraries

  • Graphviz Sophisticated graph visualization language
  • Flare Beautiful and powerful Flash based graph drawing
  • NodeBox Python Graph Visualization

src: http://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript

时间: 2024-08-29 18:16:05

Graph visualization library in JavaScript (转)的相关文章

Graph Visualization

1. 什么是graph visualization? Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. It has important applications in networking, bioinformatics, software engineering, database and web design, ma

流程图 Graphviz - Graph Visualization Software

0.目录 1.参考 https://www.processon.com/  应该值得一试 知乎 用什么软件画流程图? 9款国内外垂直领域的在线作图工具[可代替visio] 程序员必知的七个图形工具 说到流程图还是再次提及一下,我们之前说到的Graphviz . Graphviz (英文:Graph Visualization Software的缩写)是一个由AT&T实验室启动的开源工具包,用于绘制DOT语言脚本描述的图形.它也提供了供其它软件使用的库. 它的主要特点是代码生成图像,并且足够的简单

JavaScript周报#185

This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 185June 13, 2014 Editor: Peter Cooper   Featured ECMAScript 6 Schedule Changes — Allen Wirfs-Brock, editor of the ECMAScript 6 specification, recently ment

[转载]几个开源Javascript图形库

[转载]原文地址:http://www.cnblogs.com/webgis8/articles/1516639.html 因为Google Map项目的需要,最近一直在寻求相关的Javascript图形库,在尝试用Google Map API提供的javascript接口绘图时发现其效果和效率都不太理想,同时也用过jsgraphics库,也不是很好.又在网上找到了下面几个. mxGraph mxGraph是一款基于web的绘制流程图的javascript库工具,虽然目前还尚未提供注册,不过好在

10+ Useful Javascript Libraries for Your New Proje

JavaScript Library is basically a pre-written scripting language that ease the development of JavaScript based applications such as AJAX and other web-centric technologies.These JavaScript libraries are often called JavaScript frameworks.Popular Java

25个免费的jQuery/ JavaScript的图表和图形库

1.  JS Charts Features Prepare your chart data in XML, JSON or JavaScript Array Create charts in different templates like bar charts, pie charts or simple line graphs You don't need any server-side plugins/modules It's compatible with most web browse

7 Tools for Data Visualization in R, Python, and Julia

7 Tools for Data Visualization in R, Python, and Julia Last week, some examples of creating visualizations with htmlwidgets and R were presented. Fortunately, there are many more options available for creating nice visualizations. Tools and libraries

为新项目添彩的 10+ 超有用 JavaScript 库

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

15款很棒的 JavaScript 开发工具

在开发中,借助得力的工具可以事半功倍.今天,我爱互联网向大家分享最新收集的15款非常有用的 javascript 开发工具. TestSwarm: Continious & Distributed JS Testing TestSwarm是Mozilla实验室推出的一个开源项目,它旨在为开发者提供在多个浏览器版本上快速轻松测试自己javascript代码的方法. Minimee在网络上,速度是很重要的,Minimee能帮助你将css和javascript文件进行自动压缩和打包. Doctor J