@IT·互联网程序员Web前端之路

填坑!完结娱乐圈明星关系图谱

2019-06-22  本文已影响59人  古柳_Deserts_X

填坑填坑!

娱乐圈明星关系图谱体验地址,建议先体验后阅读本文,或者先打开链接,等阅读完没准页面也加载好了(太卡警告!或者去B站看下录制的28s超短视频:超酷炫的娱乐圈明星关系图谱,初次录,戛然而止勿喷):
https://desertsx.github.io/yulequan-relations-graph/

InteractiveGraph 实现酷炫关系图谱之前瞻 一文里边扯皮边介绍了娱乐圈明星关系图谱的相关内容,并讲解了项目的关键步骤,但因为一直没有将代码上传到 GitHub,未免有些夸夸其谈,毕竟 talk is cheap, show me the code 才是正事。

在重新修改过各文件名称(因而会和前瞻一文有些出入,某些平台上可编辑的话会进行修改以确保和本文一致)、去掉无用冗余内容、加好注释说明后,代码已经开源在:DesertsX/YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph

文件目录结构如下所示,用的是可在线生成的工具:Dir Tree Noter,以下对各文件作用进行简单说明。

YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph
├─ stock_csv2json.py
├─ stock_data.csv
├─ apachecn_csv2json.py
├─ apachecn_data.csv
├─ ylq_all_star_relations.csv
└─ ylq_star_infos.csv
├─ ylq_star_images_spider.py
├─ Infos_and_Data2Json.ipynb
├─ webapp
│    ├─ __init__.py
│    ├─ app_run.py
│    ├─ static
│    │    ├─ honglou.json
│    │    ├─ stock_graph.json
│    │    ├─ apachecn_graph.json
│    │    └─ ylq_star_relation_graph_v2.json
│    │    ├─ images
│    │    │    ├─ person
│    │    │    └─ star
│    │    ├─ lib
│    │    │    ├─ font-awesome-4.7.0
│    │    │    ├─ interactive-graph-0.1.0
│    │    │    └─ jquery-3.2.1
│    ├─ templates
│    │    ├─ apachecn.html
│    │    ├─ stock_relation.html
│    │    └─ yulequan-relations-graph.html
│    └─ views
│           ├─ __init__.py
│           └─ graph_view.py

项目里其实包含三个小项目:stock / apachecn / ylq_star_relation_graph,且分别保留了原始 csv 数据及转换成所需 JSON 数据的 python 代码;处理后的数据位于 webapp/static 下;对应的 html 文件位于 web/templates/ 下;如果图谱里的节点用到了图像,一律在 webapp/static/images 下,而这里的 person 对应 apachecn 项目,star 对应 ylq_star_relation_graph 项目,其中后者由 ylq_star_images_spider.py 爬取获得所需的千余张明星图像;webapp/static/lib 里用到的是 InteractiveGraph 的资源,未做修改,直接使用即可。

项目用到了 Flask,需自行安装;运行 app_run.py 启动内建的服务器,浏览器里打开http://127.0.0.1:5000,再结合 graph_view.py 里定义过的路由,就能看到三个小项目的对应展示情况。

# graph_view.py
from flask import Blueprint, request, render_template
graph = Blueprint('graph', __name__)

# http://127.0.0.1:5000/graph/relation?stock1=%E5%B9%B3%E5%AE%89%E9%93%B6%E8%A1%8C&stock2=%E6%8B%9B%E5%95%86%E9%93%B6%E8%A1%8C
@graph.route('/graph/relation', methods=['GET'])
def get_relation():
    stock1 = request.args.get('stock1')
    stock2 = request.args.get('stock2')
    return render_template('stock_relation.html', stock1=stock1, stock2=stock2)

# http://127.0.0.1:5000/apachecn
@graph.route('/apachecn')
def apachecn():
    return render_template('apachecn.html')

# http://127.0.0.1:5000/yulequan-relations-graph
@graph.route('/yulequan-relations-graph') # 不要写成 /graph/yulequan-relations-graph 否则加载头像图片时无法显示
def ylq():
    return render_template('yulequan-relations-graph.html')

三个小项目分别对应的链接:

http://127.0.0.1:5000/graph/relation?stock1=%E5%B9%B3%E5%AE%89%E9%93%B6%E8%A1%8C&stock2=%E6%8B%9B%E5%95%86%E9%93%B6%E8%A1%8C
http://127.0.0.1:5000/apachecn
http://127.0.0.1:5000/yulequan-relations-graph

以上,如果你只想运行本项目,了解这么多即可。


如果你想构建自己的关系图谱,但对数据处理和转换没有头绪,接下来的内容或许能帮助到你。本次娱乐圈明星关系图谱的数据处理和转换在 Infos_and_Data2Json.ipynb 里有详细代码和必要的说明,本文仅简述下要点。

最终想构建出怎样的关系图谱,就需要预先准备好怎样的数据。


例如当点击明星节点时,想呈现哪些详细介绍内容,就需要在爬取数据时解析和存储对应的数据,本次仅为练手,所以只用到了明星个人主页里很少的数据,以刘烨为例(刘烨个人主页),其 infos 就是 ['中国吉林', '75 KG', '1978-03-23']

明星关系图谱里涉及明星类和地区类两类节点,而查看爬取完的数据,发现地区数据比较杂乱,还需进行处理。


这里是古柳的一种处理方式,大家可自行DIY:海外的地区一律用对应的国家名;中国的地区有细分的则一律用对应的省份名,无细分的则统一用“中国”;剩下的用“不详”。其中,area_listarea_map 是根据实际数据整理出来的,更详细代码见:DesertsX/YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph

area_list = ['美国', '以色列', '澳大利亚', '英国', '加拿大', '文莱', '新加坡', '西班牙', '越南', '罗马尼亚', '马来西亚', '菲律宾', '新西兰', 
           '韩国', '日本', '北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '江苏', '浙江', '安徽', '福建', '江西', '山东', 
           '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '广西', '西藏', '宁夏', '新疆', 
           '香港', '澳门', '内蒙古', '黑龙江']

area_map = {'纽约': '美国', '美籍': '美国', '俄克拉荷马': '美国', '加州': '美国', '伦敦': '英国', 
          '东京': '日本', '京畿道高阳市': '韩国', '大邱广域市': '韩国', '台北':'台湾', '遵义': '贵州',
          '南京': '江苏', '青岛': '山东', '深圳': '广东', '杭州': '浙江', '成都': '四川', '衡水': '河北', 
          '大连': '山东', '齐齐哈尔': '黑龙江', '淮安': '江苏', '温州': '浙江', '唐山': '河北', '福州': '福建', 
          '营口': '辽东', '武汉': '湖北', '广州': '广东'}

def get_city(address):
    for area in area_list:
        if area in address:
            return area
    for area in area_map.keys():
        if area in address:
            return area_map[area]
    if '中国' in address: return '中国'
    else: return '不详'
ylq_star_infos['area'] = ylq_star_infos['address'].apply(get_city)
ylq_star_infos.head()

接下来是将爬取的 CSV 数据转换成 InteractiveGraph 所需的 JSON 数据,可以参考Github/InteractiveGraph项目里给出的红楼梦数据:dist/examples/honglou.json。古柳对该数据集曾简单介绍和分析过,可见:安利一个惊艳的红楼梦可视化作品左手读红楼梦,右手写BUG,闲快活。详细代码一展开讲又会又臭又长,大家还是去 GitHub 看吧,有疑问可去“Python交友娱乐会所”(QQ群:613176398),最终 JSON 数据最终格式大致如下,InteractiveGraph 0.1.1 版本还需加一段 JavaScript 代码,InteractiveGraph 0.2.0 应该是不需要了,本次用了前者,后者还未尝试过,有机会再看:

{
  "categories": {
    "Star": "明星",
    "Area": "地区"
  },
  "data": {
    "nodes": [
      {
        "label": "中国",
        "value": 211,
        "id": 117971764772430883811744432104367026350,
        "categories": [
          "Area"
        ],
        "info": ""
      },
      ...
      {
        "label": "新垣结衣",
        "value": 1,
        "id": 71,
        "image": "static/images/star/新垣结衣.jpg",
        "categories": [
          "Star"
        ],
        "info": "日本 / 1988-06-11"
      },
      ...
    ],
    "edges": [
      {
        "id": 221862466013404320763033294366140362926,
        "label": "姐弟",
        "from": 801,
        "to": 1255
      },
      ...
      {
        "id": 300862216428897559752162867914678825134,
        "label": "出生于",
        "from": 1,
        "to": 117971766594678621641213275765944971438
       },
       ...
    ]
  }
}

处理完数据,回过头添加对应 yulequan-relations-graph.html 文件;在graph_view.py 里定义路由,渲染 html 文件,运行 app_run.py ,打开 http://127.0.0.1:5000/yulequan-relations-graph 就成功啦!欢迎大家在自己感兴趣的数据集上动手实现酷炫的关系图谱。

以上,完结撒花!

上一篇 下一篇

猜你喜欢

热点阅读