Fill the hole! Fill the hole!

Entertainment star relationship atlas experience address, it is recommended to experience after reading this article, or first open the link, and so on, maybe the page is loaded (too card warning! Or to stand watch recorded under 28 s B ultra short video: cool dazzle relations of showbiz star atlas, recorded for the first time, don’t spray) : halt desertsx. Making. IO/yulequan – re…

In InteractiveGraph’s Cool Relationship Graph preview, I explained the relationship Graph of entertainment stars and the key steps of the project, but I didn’t upload the code to GitHub, so IT was a bit of a boast. After all, talk is cheap, show me the code.

After changing the names of the files (so they differ from the previous article and are modified to make sure they are the same as this article if they are editable on some platforms), removing unnecessary and redundant content, and adding comments, the code is open source at: DesertsX/YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph.

The structure of the file directory is as follows, using the tool that can be generated online: Dir Tree Noter. The functions of each file are briefly described as follows.

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 ├ ─ Ipynb │ ├─ WebApp │ ├─ __init__. Py │ ├─ Static │ │ ├─ Honglou. Json │ ├─ Stock_graph. Json │ │ ├ ─ apachecn_graph. Json │ │ └ ─ ylq_star_relation_graph_v2. Json │ │ ├ ─ images │ │ │ ├ ─ person │ │ │ ├─ ├─ │ ├─ ├─ ├─ ├ -awesome4.7. 0│ │ ├─ Interactive -graph0.1. 0│ ├ ─ garbage ─ jquery3.21.│ ├ ─ templates │ │ ├ ─ apachecn. HTML │ │ ├ ─ stock_relation. HTML │ │ └ ─ yulequan - relations - graph. HTML │ └ ─ views │ ├ ─ Just set py │ └ ─ graph_view. PyCopy the code

The project actually contains three small projects: stock/apachecn/YLq_star_relation_graph, and retains the original CSV data and python code to convert the required JSON data respectively; The processed data is in webApp /static; The corresponding HTML file is located under Web /templates/; If the node in the graph uses the image, it will be under webApp /static/images, where person corresponds to apachecn project, star corresponds to ylq_star_relation_graph project. The latter is crawled by YLq_star_images_spider. py to obtain more than 1000 star images. Webapp /static/lib uses the resources of InteractiveGraph.

Flask is used for the project, which needs to be installed by itself. Run app_run.py to start the built-in server, open http://127.0.0.1:5000 in your browser, and combine the routes defined in graph_view.py to see how the three small projects are displayed.

# 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(a):
    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(a):
    return render_template('apachecn.html')

# http://127.0.0.1:5000/yulequan-relations-graph
@graph.route('/ yulequan-relation-graph ') # do not write /graph/ yulequan-relation-graph otherwise it will not display when loading the image
def ylq(a):
    return render_template('yulequan-relations-graph.html')Copy the code

Links to the three small projects:

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%A 1% 8 c http://127.0.0.1:5000/apachecn http://127.0.0.1:5000/yulequan-relations-graphCopy the code

Above, if you just want to run the project, that’s all you need to know.

If you want to build your own relationship graph, but don’t have a clue about data processing and transformation, the following may help you. There are detailed codes and necessary instructions in infOS_AND_data2json. ipynb for the data processing and conversion of the entertainment star relationship map. This paper only briefly describes the main points.

In order to build the relationship map, you need to prepare the data in advance.

For example, when you click the star node, you need to analyze and store the corresponding data when you want to display the detailed introduction. This time is just for practice, so you only use a little data in the star’s personal homepage. Take Liu Ye for example (Liu Ye’s personal homepage). Its INFOS is [‘ Jilin, China ‘, ’75 KG’, ‘1978-03-23’].

The star relationship atlas involves nodes of star class and region class. However, after checking the climbed data, it is found that the region data is messy and needs to be processed.

Here is a way to deal with ancient liu, you can DIY: overseas regions will be the corresponding country name; The regions of China with subdivision will all use the corresponding province name, no subdivision is unified with “China”; The rest is “unknown”. Area_list and areA_map are compiled based on actual data. For more details, see DesertsX/YuLeQuan_Stars_Relation_Graph_By_InteractiveGraph.

area_list = ['the United States'.Israel.'Australia'.'the UK'.'Canada'.'the brunei'.'Singapore'.'Spain'.'Vietnam'.'Romania'.'Malaysia'.'Philippines'.'New Zealand'.'Korea'.'Japan'.'Beijing'.'tianjin'.'Shanghai'.'chongqing'.'hebei'.'the shanxi'.'the liaoning'.'jilin'.'jiangsu'.'zhejiang'.'anhui'.'fujian'.'jiangxi'.'shandong'.'henan'.'hubei'.'in hunan province'.'in guangdong'.'hainan'.'sichuan'.'guizhou'.'yunnan'.'the shaanxi'.'gansu'.'the qinghai'.'Taiwan'.'the guangxi'.'Tibet'.'the ningxia'.'the xinjiang'.'Hong Kong'.'the'.Inner Mongolia.'Heilongjiang']

area_map = {'New York': 'the United States'.'American': 'the United States'.'Oklahoma': 'the United States'.'California': 'the United States'.'London': 'the UK'.'Tokyo': 'Japan'.'Goyang, Gyeonggi Province': 'Korea'.Daegu Metropolitan City: 'Korea'.'Taipei':'Taiwan'.'zunyi': 'guizhou'.'nanjing': 'jiangsu'.'Qingdao': 'shandong'.'shenzhen': 'in guangdong'.'hangzhou': 'zhejiang'.'chengdu': 'sichuan'.'hengshui': 'hebei'.'dalian': 'shandong'.'Qiqihar': 'Heilongjiang'.'huaian': 'jiangsu'.'the city of wenzhou: 'zhejiang'.'the tangshan': 'hebei'.'the fuzhou': 'fujian'.'yingkou': 'liaodong'.'wuhan': 'hubei'.'guangzhou': 'in guangdong'}

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 'China' in address: return 'China'
    else: return 'not'
ylq_star_infos['area'] = ylq_star_infos['address'].apply(get_city)
ylq_star_infos.head()Copy the code

Next is to crawl the CSV data into a JSON data needed for the InteractiveGraph, can give reference for making/InteractiveGraph project data: a dream of red mansions dist/examples/honglou JSON. Gu Liu has briefly introduced and analyzed this data set, and it can be seen that amway has an amazing visualisation of dream of Red Mansions and has fun reading dream of Red Mansions with left hand and writing bugs with right hand. If you have any questions, you can go to the “Python Friends club” (QQ group: 613176398), the final format of the JSON data is approximately as follows, InteractiveGraph 0.1.1 needs to add some JavaScript code, InteractiveGraph 0.2.0 should not need the former, this time uses the former. The latter has not yet been tried, but have a chance to see:

{
  "categories": {
    "Star": "Star"."Area": "Area"
  },
  "data": {
    "nodes": [{"label": "China"."value": 211,
        "id": 117971764772430883811744432104367026350,
        "categories": [
          "Area"]."info": ""},... {"label": "Niigaki Noyi"."value": 1,
        "id": 71,
        "image": "Static /images/star/ niigaki Noie.jpg"."categories": [
          "Star"]."info": "Japan/June 11, 1988"},... ] ."edges": [{"id": 221862466013404320763033294366140362926,
        "label": "Sister"."from": 801,
        "to": 1255},... {"id": 300862216428897559752162867914678825134,
        "label": "Born"."from": 1,
        "to": 117971766594678621641213275765944971438},... ] }}Copy the code

After processing the data, go back and add the corresponding yulequan-relation-graph.html file; Define routing in graph_view. Py, rendering the HTML file, run app_run. Py, open http://127.0.0.1:5000/yulequan-relations-graph was successful! You are welcome to implement cool relational graphs on your own interesting data sets.

Above, the end of the spread flower: welcome to pay attention to the public number “cow clothes ancient liu” ha!