InteractiveGraph 实现酷炫关系图谱之前瞻

本文代码和数据等,会等下一篇实战文章更新后一起放在 github/DesertsX 上,敬请期待!

前言

话说之前片刻老哥(群主/组织负责人之一)在 ApacheCN 中文开源组织 的机器学习群(qq 群:629470233)里问我下面这个项目(见于:安利一个惊艳的红楼梦可视化作品)研究的如何,我答曰那时安利过后仅分析了下该红楼梦关系图谱的 json 数据,并曾兴致高昂地写下左手读红楼梦,右手写BUG,闲快活一文。

再是不久前爬取明星相互关系的数据(还是那句话数据质量不一定多高,仅为练手),以供 neo4j 上手操练之用,并写有详细的入门教程: 一文教你用 Neo4j 快速构建明星关系图谱,而 neo4j 是赫然写在 grapheco/InteractiveGraph 这一开源项目的 github 介绍中的。

除此之外,再无有过多研究,只说来日因缘际会再去看看。虽然有因为不懂前端等技术、难以上手“官方教程”而推脱日后再研究之意,但或许更多地是古柳深信没准哪一天就有人助我填补了自身浅薄的知识与酷炫的开源项目之间的鸿沟,然后就像往昔文章中常常提到的“因缘际会”四字一般,一切自然而然地得以解决,新技能得以 get 了!

股票图谱

正所谓:“无巧不成书”,世上就果真有那么巧的事,没几日就看到利用 Tushare 数据实现知识图谱效果这篇新近出炉的文章(感谢作者提供完整代码和数据,下文将补上自己实践明星关系图谱的代码和数据后,统一开源供大家学习),原作者调用 Tushare API 接口,拿到股票及其最基础的属性数据,如股票所属地区 area、所属工业类别 industry 和所属板块 market 等。

将其转换成开源项目 grapheco/InteractiveGraph 所需的数据格式(上述代码均在 stock-demo.py 中,如果只是关心可视化结果,可以略过上述步骤,因为转换后的数据已经存在于webapp\static\stock_graph.json) ,运行 webapp\app_run.py ,打开 http://127.0.0.1:5000/graph/relation?stock1=平安银行&stock2=招商银行 就能看到漂亮的图谱,可改成其他股票名称查看效果。

以上,差不多就是全部流程了,如果你只是想了解下该项目是如何实现的,其实知道这么多就够了,真的非常简单,前端的东西都是现成的,只需要准备好数据,套用一下模板,就能拿出去“装逼”了。

热身一下

而如果你想更进一步应用到自己的数据上,并且像开头红楼梦项目一样加上图像的话(有图真的灵动好看很多),那么下面的实战部分将帮你实现这个愿望!

首先是用片刻老哥手动构造的关于 ApacheCN 中文开源组织 的小数据集 apachecn-basic.csv 热热身,当然我在此基础上将每个人的图像由统一的绿帽头盔图(老哥对绿帽真的情有独钟呢)改成了各人的 qq 头像,并在 webapp\static\images\person\ 文件夹下保存好相应图片;

注意:这里每一行是每个 person 对应每个 project (如:ml/dl/kaggle)的格式,所以单个 person 可能出现很多行

id,person,image,area,project,info
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,kaggle,那一抹微笑
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,ml,那一抹微笑
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,dl,那一抹微笑
2,片刻,static/images/person/片刻.jpg,北京,ml,世界很美,而你正好有空
2,片刻,static/images/person/片刻.jpg,北京,kaggle,世界很美,而你正好有空
2,片刻,static/images/person/片刻.jpg,北京,dl,世界很美,而你正好有空
3,瑶妹,static/images/person/瑶妹.jpg,北京,kaggle,瑶妹
3,瑶妹,static/images/person/瑶妹.jpg,北京,ml,瑶妹
3,瑶妹,static/images/person/瑶妹.jpg,北京,dl,瑶妹
4,飞龙,static/images/person/飞龙.jpg,上海,ml,飞龙
4,飞龙,static/images/person/飞龙.jpg,上海,ml,飞龙
4,飞龙,static/images/person/飞龙.jpg,上海,ml,飞龙
5,咸鱼,static/images/person/咸鱼.jpg,北京,kaggle,咸鱼
5,咸鱼,static/images/person/咸鱼.jpg,北京,dl,咸鱼

接着运行 apachecn-demo.py ,照旧将 csv 数据转换成所需的 json 格式, 存于webapp\static\apachecn-demo.json ,因为本次实战明星关系图谱的数据转换代码不同于片刻老哥的,所以此处不做详细介绍,大家可自行理解,不懂的可以去找他请教(你有福了,群主叫你晚上去他房间.avi);

当然由于后续我的版本将用 pandas 结合手头的项目手动一步步处理数据,可能不是很方便大家直接套用到自己的数据上,所以还是推荐搞懂 apachecn-demo.pystock-demo.py,更好地实现可重用的函数。

至于为什么我不是按照这里的代码去处理数据,而非要自行实现,实在是因为明星相互关系的数据和上述股票和组织的数据都不太一样,具体差异后续再说。

扯回来,有了 json 数据后,其实还需要插入下面一段玄妙的 JavaScript 代码(这段 translator 打头的代码可插在 categoriesdata 之间,可去文件中查看),至于为什么不一并在转换数据的代码中一并实现?

"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;
      }
    },
  },

对此菜鸡的片刻老哥和我都表示“非不为也,实不能也”,说人话就是“不会!”那也是很无奈了,只求万能的读者去实现了。

当然还有一个可能算是“薛定谔的好消息”是,片刻老哥去该项目的 github 提了 iusse是否可以将 gson 中的function 写到 html 页面的script中?

然后......然后项目贡献者可能手头正好有新版本的代码,于是顺势把代码从 InteractiveGraph 0.1.1 版本更新到了 InteractiveGraph 0.2.0

新版本的第二个特性是 Optimize the code,结合上面 issue 里的回复应该是不再需要在 json 里加那段玄妙的 JS 代码了,当然因为本次实践都还是基于旧版本的,所以依然需要手动加上。

在此讲述下这个插曲,方便后来人了解区别,可资选择。

再次说回数据准备好后,只需要将要渲染的 webapp\templates\apachecn-demo-relation.html里要加载的 json 文件名改成对应的即可。

至于这个 html 文件上面并没有提及,因为股票一例各方面都是匹配的,所以先行略过,等实战时需要修改了再涉及。

而回到 grapheco/InteractiveGraph 上来,原始开源项目支持三种模式:GraphNavigatorGraphExplorerRelFinder。股票一例是第三种,下图是第一种也是本次明星关系图谱将要实现的模式。

三种模式分别对应 example1.htmlexample2.htmlexample3.html,差别主要在于 <script>...</script> ,因为只是套用模板,所以想要那个,就复制一份对应 html 文件,改下文件名和里面 json 路径即可。 [图片上传失败...(image-5ff83e-1555860107961)]

最后只需在 webapp\views\graph_view.py 里加上几行代码,使得访问对应网址时能成功渲染出相应 html 即可。没接触的前端的读者需要注意,@graph.route('') 里怎么加网址就会怎么办,比如此处对应网址就是 http://127.0.0.1:5000/apachecndemo

@graph.route('/apachecndemo') 
# 不要写成 /graph/relation/apachecndemo 
# 否则加载图片时无法显示
def apachecndemo():
    return render_template('apachecn-demo-relation.html')

最后运行 webapp\app_run.py,打开对应网址,就行了。虽然扯了这么多,才出现这么个破图,但一切瞎扯都是值得的。

毕竟更酷炫的明星关系图谱,差不多也就是这么个流程,先放张效果图(和略大的GIF动图),下一篇文章再好好讲实战吧,这篇文章也是越写越飞、越写越歪、越扯越长,光顾着调侃片刻老哥,不过也确实绕不过去了。

再者想把全部内容都塞到一篇文章里也过于冗长,这样一分为二,倒也未为不可。最后再小结下几个关键步骤:

  1. 有一份 csv 或其他格式的想要图谱可视化的数据,想显示图像的,也需要准备好;
  2. 写代码将其转换成所需的 json 格式(虽然文章里一直也没讲数据格式到底如何,但相应链接的文章或文件里总有涉及),并手动加上那段关键的 JavaScript 代码;
  3. 修改对应 html 以及 graph_view.py 文件;
  4. 运行 app_run.py ,打开对应网页即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python无止境

Python骚操作:动态定义函数

标题:Python Tips: Dynamic function definition

13220
来自专栏Python无止境

别开心太早,Python 文档的翻译差远了

近几天,很多公众号发布了 Python 官方文档的消息。然而,一个特别奇怪的现象就发生了,让人啼笑皆非。

8010
来自专栏Python编程大咖

资深程序员说,要想系统的学Python基础就看这些书,附赠电子版

人工智能必然是大势所趋,而与之相关的Python编程语言的行情也是被一路看好,相应的Python招聘岗位也是越来越多,平均薪资更是其他的岗位无法比较的。

10720
来自专栏Python无止境

英文 | 傻傻分不清的 isdigit、isnumeric 和 isdecimal

花下猫语: 相对来说,Python 是一门编写难度较低的语言,然而,这并不意味着在基础的语法层面上,它就没有需要特别注意的用法。事实上,所有的语言系统都存在着一...

18020
来自专栏Python无止境

深度辨析 Python 的 eval() 与 exec()

Python 提供了很多内置的工具函数(Built-in Functions),在最新的 Python 3 官方文档中,它列出了 69 个。

11120
来自专栏云+技术

用Python的turtle模块画国旗

最近在学Python,发现Python的海龟绘图非常有趣,就分享一下!话不多说,先来Python turtle的官方文档链接: Python turtle。这里...

71520
来自专栏云+技术

Ceph对象存储安装部署及验证

今天来玩下Ceph的对象存储,在开始之前呢,先扯会闲篇,我觉得生活中处处是非结构化数据,最简单的举例,下面两个行业,一个是直播,一个是摄影。

42120
来自专栏Python无止境

介绍几款 Python 类型检查工具

近日,微软在 Github 上开源了一个 Python 静态类型检查工具:pyright ,引起了社区内的多方关注。

13810
来自专栏云+技术

OpenStack 系列之Manila install and using the Virtualenv

今天继续分享下Manila系列文章知识,之前两篇博文一个是Manila详解,一个是Manila for Centos的安装部署,今天呢我们采用Python Vi...

10120
来自专栏Python无止境

Python进阶:如何将字符串常量转为变量?

前几天,我们Python猫交流学习群里的 M 同学提了个问题。这个问题挺有意思,经初次讨论,我们认为它无解。

13220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励