安利一个惊艳的红楼梦可视化作品

发表于

更新：《左手读红楼梦，右手写BUG，闲快活》一文对该数据集进行了分析挖掘，加了许多红楼梦的内容，以及几个书里的黄段子，逃。代码开源在：DesertsX/gulius-projects

直接上图，安利下这个关于红楼梦的可视化作品网址在此：InteractiveGraph/example1。要是有最近在读《红楼梦》的朋友，可以对照着来看，想来是很棒的体验。

在此关系图谱中，粉红色节点代表红楼梦中出现的人物，主要角色用了1987版红楼梦部分演员的剧照，点击每个节点能看到人物的介绍；黄色节点为书中出现过的主要地点；蓝色节点为书中主要的情节、事件，同样点击后能看到情节概述，不过不是原文内容。古柳虽然很久没看红楼梦原书和87版电视剧了，但这些还是门儿清的。


网页右上角提供了一些可选的按钮，其中第四个是展示节点间关系用的，对小说不了解、或初读的读者可能会有帮助，比我们那年月自己看书或一些读者搜网上单纯的罗列人物图谱要直观的多。比如宝玉的母亲、干娘、妻子、同宗、哥哥、仆人等等，越看越觉得这背后的数据集真的是厉害…..
更多细节大家可自行探索，古柳当初看到时就觉得很惊艳，作为一个“伪”红迷，看到这么棒的项目，幻想着要是能哪天自己复现出来，也是“死而无憾”了。幸运的是，这个项目所有代码也开源在了GitHub - InteractiveGraph。

在README_CN.md文件里介绍了具体实现细节，还是很详细的，哪怕里面很多技术没接触过，也能有个方向。不过，技术有了，用到的数据格式又是怎么样的呢？假如想迁移到其他小说、其他文本内容上又该怎么准备数据呢？

带着这个疑惑找到了dist/examples/honglou.json文件，简单的摘录开头部分数据。categories定义了上面关系图谱里节点类型；translator代码跳过（==）；data 处开始到最后5000多行就是各类所有节点的数据了，显示event事件的数据格式样例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
复制代码{
  "categories": {
    "person": "人物",
    "event": "事件",
    "location": "地点"
  },
  "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;
      }
    },
  },
  "data": {
    "nodes": [{
        "label": "共读西厢",
        "value": 2,
        "id": 3779,
        "categories": [
          "event"
        ],
        "info": "宝玉到沁芳桥边桃花底下看《西厢记》，正准备将落花送进池中，黛玉说她早已准备了一个花冢，正来葬花。黛玉发现《西厢记》，宝玉借书中词句，向黛玉表白。黛玉觉得冒犯了自己尊严，引起口角，宝玉赔礼讨饶，黛玉也借《西厢记》词句，嘲笑了宝玉。于是两人收拾落花，葬到花冢里去。"
      },
      {
        "label": "林如海捐馆扬州城",
        "value": 4,
        "id": 3780,
        "categories": [
          "event"
        ],
        "info": "林如海考中探花后，迁为兰台寺大夫，钦点为扬州巡盐御史。后身染重病于九月初三日巳时而亡。"
      },

《小戏骨红楼梦》之宝黛共读西厢：

地点节点数据样式：

1
2
3
4
5
6
7
8
9
复制代码{
        "label": "潇湘馆",
        "value": 3,
        "id": 3838,
        "categories": [
          "location"
        ],
        "info": "黛玉的居所。黛玉作诗的笔名就潇湘妃子，这是曹雪芹对黛玉这个人物的赞美。"
      },

《小戏骨红楼梦》之宝钗

人物节点数据：

1
2
3
4
5
6
7
8
9
10
复制代码{
        "label": "王熙凤",
        "value": 25,
        "image": "./images/photo/王熙凤.jpg",
        "id": 4041,
        "categories": [
          "person"
        ],
        "info": "金陵十二钗之九，来自四大家族之王家，王夫人的内侄女，贾琏之妻。她精明强干，深得贾母和王夫人的信任，成为荣国府的管家奶奶，她为人处事圆滑周到，图财害命的事也干过不少，在前80回里她支持宝黛爱情。"
      },

《小戏骨红楼梦》之宝黛美如画：


最后是所有节点所代表的实体之间的关系：

1
2
3
4
5
6
复制代码{
        "id": 3324,
        "label": "仆人",
        "from": 3876,
        "to": 4103
      },

最近也接触了些依存句法分析、信息提取等NLP的内容，但理论归理论，真要用来提取小说里进行命名实体识别、实体关系提取、事件抽取等等还是差得远，以后日后能复现这一项目。

最后再放张87版红楼梦的剧照，虽然真的觉得对小戏骨的红楼梦的喜好要超过前者了。逃……

欢迎关注公众号“牛衣古柳”（ID：Deserts-X）哈！

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%