![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
上のzipファイルをダウンロードし、解凍する。プログラムを実行するには、app.pyを実行。
3D Force-Directed Graphに共起関係の情報を送るためにjsonファイルを作成する．
csvファイルをjsonファイルに変換する（test.ipynb)
flask.zipimport pandas as pd
import csv
import json
# csvファイルを読み込んでdfに代入
df = pd.read_csv("ultra_kekka.csv")
# effectを削除
df_effect=df.drop(["effect"],axis=1)
#fromとtoの中の要素を一つのリストにする
count_id = df_effect.stack().drop_duplicates().tolist()
# links の形式にデータを変換する
links = []
for index, row in df.iterrows():
links.append({
"source": row['from'],
"target": row['to'],
"value": row['effect']
})
# データを指定された形式に変換
nodes = [{"id": item, "group": 1} for item in count_id]
# JSON形式に変換
result = {"nodes": nodes, "links": links}
# JSONファイルに保存
with open("output.json", "w") as f:
json.dump(result, f, indent=2)
作成するjsonファイルの形式（output.json)
{
"nodes": [
{
"id": "money stock(t)",
"group": 1
},
{
"id": "monetary base(t)",
"group": 1
},
～～～～～～～～～～省略～～～～～～～～～～
{
"id": "Transportation instruments(t)",
"group": 1
},
{
"id": "Mining(t-1)",
"group": 1
}
],
"links": [
{
"source": "money stock(t)",
"target": "monetary base(t)",
"value": 1.908779088456079
},
{
"source": "Nikkei500(t)",
"target": "Services(t)",
"value": 1.7077961516121132
},
～～～～～～～～～～省略～～～～～～～～～～
{
"source": "money stock(t-1)",
"target": "interest rates(t)",
"value": -1.1541726329525173
},
{
"source": "money stock(t)",
"target": "interest rates(t)",
"value": -1.7901768471843575
}
]
}
3Dグラフの描画にはThree.jsのモジュール”3D Force-Directed Graph”を使う．
参考にしたサイト👉https://vasturiano.github.io/3d-force-graph/
完成したグラフ
今回はmain2.jsに
の部分を追加することによって線の色をつけた。
linkColor メソッドは、各リンクに対して色を決定するための関数を引数として受け取る。 link パラメータは、各リンクの情報を含んでおり、例えば link.value はそのリンクの値を示している。 関数内の条件文では、link.value の値に基づいてリンクの色を決定している。ここでは、link.value が 0 より大きい場合は 'red'（赤）、そうでない場合は 'blue'（青）を返している。
今回はmain2.jsに
の部分を追加することによって数字が表示されるようにした。
linkThreeObject メソッドは、各リンクに関連付ける3Dオブジェクト（ここでは SpriteText）を生成するためのメソッド。 link パラメータは、各リンクの情報を含んでおり、例えば link.value はそのリンクの値を示している。 SpriteText オブジェクトは、テキストを3D空間に表示するためのもので、link.value を表示するように設定されている。 sprite.color でテキストの色を設定し、sprite.textHeight でテキストの高さを設定している。
完成したグラフ
