21种树状网络数据可视化Web前端库

本文主要是介绍基于Web应用的网络数据可视化方案,这类可视化方案众多,本文精选了一些相对典型的方案,供各位大佬参考。有些链接可能无法访问,请自备梯子。篇幅有限,欢迎补充。

1. Echarts

https://echarts.apache.org
Echarts有好几种类型的图标可以用来丛网络数据的可视化,主要类型如下:

对于3D展示需求,Echarts也提供了相应的解决方案:

2. G6

https://g6.antv.vision
G6相较于Echarts也具有非常丰富的展示类型,和网络相关的主要包括一下几种:

3. L7

https://l7.antv.vision

4. L7Plot

https://l7plot.antv.vision

5. F6

https://f6.antv.vision
F6主要是针对移动端的可视化工具,和G6类似,但是考虑充分考虑了移动端对于GPU的不同需求。

6. AVA

https://ava.antv.vision

7. D3

https://observablehq.com/@d3/gallery
D3提供了非常底层的可视化API,给与开发者极大的自由度。这种高自由度的代价是,对于复杂图形的开发成本高。D3也作为很多可视化工具的基础库。

  • D3—类型7 (https://observablehq.com/@d3/voronoi-labels)
    泰森多边形又叫冯洛诺伊图(Voronoi diagram),得名于Georgy Voronoi,是一组由连接两邻点线段的垂直平分线组成的连续多边形。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离。

8. Keylines

https://cambridge-intelligence.com/keylines

9. Vis.js

https://visjs.github.io/vis-network/examples

10. Sigma.js

https://www.sigmajs.org

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ermPDOwE-1662366655879)(https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/load-gexf-file)]](https://img-blog.csdnimg.cn/d18b5d5fad7b4b6ebb722a2cde097746.png"/>

11. Ogma

https://doc.linkurio.us/ogma/latest)

12. Ngraph

https://github.com/anvaka/ngraph

13. React-force-graph

https://github.com/vasturiano/react-force-graph
是一个3D视图的力引导布局的库。

14. Cola.js

https://ialab.it.monash.edu/webcola/

15. Cytoscape.js

https://js.cytoscape.org/
这是一个用纯JS编写的图形库,带有针对核心Cytoscape.js库和所有第一方扩展的开放源代码许可(MIT)。它在生产中的商业项目和开源项目中使用,并且首先面向用户(面向前端应用程序用例和开发人员用例)设计。它包括从BFS到PageRank的图论算法。一个非常适合做知识图谱的前端可视化图库。

16. dagre-d3

https://github.com/dagrejs/dagre-d3

17. ElGrapho

https://www.elgrapho.com/

18. GoJS

https://gojs.net.cn

19. Jointjs

https://resources.jointjs.com/

20. JavaScript InfoVis Toolkit

http://philogb.github.io/jit/demos.html

21. jsPlumb

https://demo.jsplumbtoolkit.com

参考资料

  1. Echarts (https://echarts.apache.org)
  2. G6 (https://g6.antv.vision)
  3. L7 (https://l7.antv.vision)
  4. L7Plot (https://l7plot.antv.vision)
  5. F6 (https://f6.antv.vision)
  6. AVA (https://ava.antv.vision)
  7. D3
  8. Keylines
  9. Vis.js
  10. Sigma.js (https://www.sigmajs.org/)
  11. Ogma (https://doc.linkurio.us/ogma/latest/)
  12. Ngraph (https://github.com/anvaka/ngraph)
  13. React-force-graph (https://github.com/vasturiano/react-force-graph)
  14. A Comparison of Javascript Graph Network Visualisation Libraries
  15. Cola.js (https://ialab.it.monash.edu/webcola)
  16. Cytoscape.js (https://js.cytoscape.org/)
  17. dagre-d3 (https://github.com/dagrejs/dagre-d3)
  18. ElGrapho (https://www.elgrapho.com/)
  19. GoJS (https://gojs.net.cn)
  20. Jointjs (https://resources.jointjs.com)
  21. JavaScript InfoVis Toolkit (http://philogb.github.io/jit/demos.html)
  22. jsPlumb (https://demo.jsplumbtoolkit.com)
  • 5
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
好的,以下是一个可能的数据可视化课程设计模板: 1. 课程概述 - 课程介绍:介绍课程目标、内容、教学方法和评估方式等。 - 数据可视化概述:介绍数据可视化的定义、作用、分类以及常用的表类型等。 2. 数据可视化的基本技能 - 数据准备:介绍如何进行数据清洗和预处理,以及如何从数据中提取有用的信息。 - 数据可视化工具使用:介绍如何使用数据可视化工具进行数据分析和可视化,比如Excel、Tableau、Python等工具的使用。 - 数据可视化原则:介绍数据可视化的基本原则,如数据精确性、清晰性、简洁性等。 3. 数据可视化的高级技能 - 高级表类型:介绍更复杂的表类型,如热力、流程、树等。 - 交互式可视化:介绍如何创建交互式可视化,使用户能够与数据进行互动。 - 数据挖掘和机器学习:介绍如何使用数据挖掘和机器学习技术进行数据分析和可视化。 4. 数据可视化的应用 - 商业分析:介绍如何使用数据可视化进行商业分析,如销售分析、市场调研等。 - 数据科学:介绍如何使用数据可视化进行数据科学研究,如数据挖掘、数据可视化等。 - 其他应用场景:介绍其他领域的数据可视化应用,如医疗、政策研究等。 5. 课程总结和展望 - 课程总结:总结课程的内容和收获,回顾学习过程和成果。 - 展望未来:展望数据可视化的发展趋势,如人工智能、虚拟现实等,以及如何进一步提升数据可视化的应用水平。 希望这个模板能够给你提供一些参考和启示!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呵呵你真行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值