立場新聞 Stand News

【圖析新聞】權貴關係網的可視化示範

2018/7/15 — 16:51

小米(1810)上周上市,特首林鄭月娥並無到場,為首隻同股不同權股份助威,不過她兒子在小米工作的事,與及她與小米主要投資者的友好關係,仍然再被傳媒拿來一書。事關持有小米約3.7%(市值178億元)的創投基金啟明創投,是由梁頴宇所創辦,而她一家包括父親梁孔德及母親梁劉柔芬,均與林鄭關係友好。恰巧梁穎宇的夫婿、在外資律師行當律師、與小米有業務往來的林振宇,上周被委任為證監會的董事。

不要誤會,這裡不是要探討這些官商關係如何影響公眾印象及政策的推行,而是希望借此一例,來示範如何用坊間一些普及的可視化(visualization)工具,以互動形式展示這些權貴關係網(如下)。

廣告

在數據可視化的世界中,這類關係網一般以Force directed graph來表達,而基於javascript技術的d3近年頗受歡迎,即使在屏幕較小的手機,效果仍然不俗,但由於需要加上不少標籤,故此筆者最後選擇了程式師Dino Fancellu提供的範例

這範例的好處,是可以為每個個體及其關係加上說明標籤,而且只需在數據檔案graph.json中更新資料,格式連外行人都一目了然,中文顯示的效果不俗,而且連代表人物的(node)標籤亦可以拖曳。

廣告

graph.json的內容:

{
  "nodes": [
    {
      "name": "梁孔德",
      "label": "足總主席",
      "id": 1
    },
    {
      "name": "梁劉柔芬",
      "label": "前立法會議員",
      "id": 2
    },
    {
      "name": "梁頴宇",
      "label": "啟明創投創辦人",
      "id": 3
    },
    {
      "name": "林振宇",
      "label": "證監會非執董",
      "id": 4
    },
    {
      "name": "林鄭月娥",
      "label": "特首",
      "id": 5
    },
    {
      "name": "林節思",
      "label": "小米營運主任",
      "id": 6
    }
  ],
  "links": [
    {
      "source": 1,
      "target": 2,
      "type": "夫婦",
    },
    {
      "source": 1,
      "target": 3,
      "type": "父女"
    },
    {
      "source": 2,
      "target": 3,
      "type": "母女"
    },
    {
      "source": 3,
      "target": 4,
      "type": "夫婦"
    },
    {
      "source": 5,
      "target": 2,
      "type": "友好"
    },
    {
      "source": 5,
      "target": 6,
      "type": "母子"
    }
    ,
    {
      "source": 3,
      "target": 6,
      "type": "小米投資者"
    },
    {
      "source": 4,
      "target": 6,
      "type": "協助小米旗下公司上市"
    }
  ]
}

若想改變參數,如顯示框的大小,可直接修改網頁程式index.html中的width及height,節點的大小則可修改node的屬性'r',節點間的距離則由d3.force的distance屬性控制。其他節點與節點的互動參數,例如如何可以令節點一開始時不會「黏在一起」 ,讓各個節點的相互距離盡量遠一點,讀者可以自行實驗。

Forced graph是展示人際利益網絡的強大工具,期待在日後見到更多這類應用。

 

發表意見