蒲田さんの引継ぎ研究
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[引き継ぎ(海野)]]
#ref(flask.zip)~
*環境 [#ta041b0c]
上のzipファイルをダウンロードし、解凍する。プログラムを実...
*課題 [#y88f054d]
**課題1 3Dグラフの作成 [#k9b476fc]
#ref(rensyuu.zip)~
***jsonファイルの作成 [#a7662d54]
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 ...
参考にしたサイト👉https://vasturiano.github.io/3d-force-g...
完成したグラフ
#ref(4.png,,60%)~
**課題2 3Dグラフに色を付け線の真ん中に数字をつける [#p14...
参考にしたサイト👉https://github.com/vasturiano/3d-force-...
***色を付ける [#p1538438]
今回はmain2.jsに
#ref(6.png,,40%)
の部分を追加することによって線の色をつけた。
linkColor メソッドは、各リンクに対して色を決定するための...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
関数内の条件文では、link.value の値に基づいてリンクの色を...
***数字をつける [#x6a1680b]
今回はmain2.jsに
#ref(5.png,,40%)
の部分を追加することによって数字が表示されるようにした。
linkThreeObject メソッドは、各リンクに関連付ける3Dオブジ...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
SpriteText オブジェクトは、テキストを3D空間に表示するため...
sprite.color でテキストの色を設定し、sprite.textHeight で...
***3Dグラフ [#z91be8f5]
完成したグラフ
#ref(2.png,,40%)~
**課題3 キーワードをクリックしたらページに飛べるようにす...
今回はmain2.jsに
#ref(7.png,,60%)
の部分を追加した。
.onNodeClick メソッドは、ノードがクリックされたときに実行...
node パラメータは、クリックされたノードの情報を含んでおり...
var baseUrl = "page/" + node.id; では、クリックされたノー...
window.location.href = baseUrl; は、生成したURLを現在のウ...
また、app.pyの425行目から
#ref(8.png,,60%)
のプログラム（このプログラムはGasについて）を単語の数だけ...
このプログラムによって、'/page/Gas' へのアクセス時に、ore...
「Gas」をクリックしたときに飛ぶページ👇
#ref(9.png,,40%)
終了行:
[[引き継ぎ(海野)]]
#ref(flask.zip)~
*環境 [#ta041b0c]
上のzipファイルをダウンロードし、解凍する。プログラムを実...
*課題 [#y88f054d]
**課題1 3Dグラフの作成 [#k9b476fc]
#ref(rensyuu.zip)~
***jsonファイルの作成 [#a7662d54]
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 ...
参考にしたサイト👉https://vasturiano.github.io/3d-force-g...
完成したグラフ
#ref(4.png,,60%)~
**課題2 3Dグラフに色を付け線の真ん中に数字をつける [#p14...
参考にしたサイト👉https://github.com/vasturiano/3d-force-...
***色を付ける [#p1538438]
今回はmain2.jsに
#ref(6.png,,40%)
の部分を追加することによって線の色をつけた。
linkColor メソッドは、各リンクに対して色を決定するための...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
関数内の条件文では、link.value の値に基づいてリンクの色を...
***数字をつける [#x6a1680b]
今回はmain2.jsに
#ref(5.png,,40%)
の部分を追加することによって数字が表示されるようにした。
linkThreeObject メソッドは、各リンクに関連付ける3Dオブジ...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
SpriteText オブジェクトは、テキストを3D空間に表示するため...
sprite.color でテキストの色を設定し、sprite.textHeight で...
***3Dグラフ [#z91be8f5]
完成したグラフ
#ref(2.png,,40%)~
**課題3 キーワードをクリックしたらページに飛べるようにす...
今回はmain2.jsに
#ref(7.png,,60%)
の部分を追加した。
.onNodeClick メソッドは、ノードがクリックされたときに実行...
node パラメータは、クリックされたノードの情報を含んでおり...
var baseUrl = "page/" + node.id; では、クリックされたノー...
window.location.href = baseUrl; は、生成したURLを現在のウ...
また、app.pyの425行目から
#ref(8.png,,60%)
のプログラム（このプログラムはGasについて）を単語の数だけ...
このプログラムによって、'/page/Gas' へのアクセス時に、ore...
「Gas」をクリックしたときに飛ぶページ👇
#ref(9.png,,40%)
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
