![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2024-02-28T07:32:03+00:00","","") #author("2024-02-29T00:36:57+00:00","","") [[引き継ぎ(戸田)]] *プログラム実行[#ta041b0c] #ref(flask-20240227T060406Z-001.zip)~ zipファイルをダウンロードし、解凍する。プログラムを実行するには、app.pyを実行し、下の図のようなコマンドプロンプト内に表示されるURLをコピーし、ブラウザ上で検索する #ref(プログラム実行.png,,40%)~ *課題 [#y88f054d] **課題1 3Dグラフの作成 [#k9b476fc] ***jsonファイルの作成 [#qa782612] 3D Force-Directed Graphに共起関係の情報を送るためにjsonファイルを作成する．~ csvファイルをjsonファイルに変換する（test.ipynb) import 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 } ] } -"nodes"にはグラフに表示される単語の定義を行う．~ --"id"はノードの単語．~ --"group"は色分けなどをしたいときにノードのグループを指定する．~ -"links"には共起関係を記述する．~ --"source"は影響を与える側．~ --"target"は影響を受ける側．~ --"value"は影響の強さ．~ ***3Dグラフ [#z91be8f5] 3Dグラフの描画にはThree.jsのモジュール”3D Force-Directed Graph”を使う．~ 参考にしたサイト👉https://vasturiano.github.io/3d-force-graph/~ 完成したグラフ #ref(3Dグラフ＿変更前.png,,60%)~ **課題2 3Dグラフに色を付け線の真ん中に数字をつける [#z2c5e79c] ***色を付ける [#a0f8a3b3] 今回はmain2.jsに #ref(色.png,,40%) の部分を追加することによって線の色をつけた。 linkColor メソッドは、各リンクに対して色を決定するための関数を引数として受け取る。 link パラメータは、各リンクの情報を含んでおり、例えば link.value はそのリンクの値を示している。 関数内の条件文では、link.value の値に基づいてリンクの色を決定している。ここでは、link.value が 0 より大きい場合は 'red'（赤）、そうでない場合は 'blue'（青）を返している。 ***数字をつける [#kab604a2] 今回はmain2.jsに #ref(数字.png,,40%) の部分を追加することによって数字が表示されるようにした。 linkThreeObject メソッドは、各リンクに関連付ける3Dオブジェクト（ここでは SpriteText）を生成するためのメソッド。 link パラメータは、各リンクの情報を含んでおり、例えば link.value はそのリンクの値を示している。 SpriteText オブジェクトは、テキストを3D空間に表示するためのもので、link.value を表示するように設定されている。 sprite.color でテキストの色を設定し、sprite.textHeight でテキストの高さを設定している。 ***3Dグラフ [#k352c04a] 完成したグラフ #ref(3Dグラフ＿変更後.png,,40%)~ **課題3 キーワードをクリックしたらページに飛べるようにする [#u298cfcb] 今回はmain2.jsに #ref(7.png,,60%) の部分を追加した。 .onNodeClick メソッドは、ノードがクリックされたときに実行されるコールバック関数を設定する。 node パラメータは、クリックされたノードの情報を含んでおり、ここでは node.id がそのノードの識別子（ID）です。 var baseUrl = "page/" + node.id; では、クリックされたノードのIDを基に、遷移先のベースURLを生成している。ここでは "page/" の後にノードのIDが続く。 window.location.href = baseUrl; は、生成したURLを現在のウィンドウのロケーション（URL）に設定することで、ページを遷移させるためのコード。 また、app.pyの425行目から #ref(8.png,,60%) のプログラム（このプログラムはGasについて）を単語の数だけ追加した。 このプログラムによって、'/page/Gas' へのアクセス時に、oresen.html というテンプレートをレンダリングし、その際に fiber_values、days、enumerate の値がテンプレート内で利用できるようになる。 「Gas」をクリックしたときに飛ぶページ👇 #ref(9.png,,40%)
