蒲田さんの引き継ぎ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[引き継ぎ(戸田)]]
*プログラム実行[#ta041b0c]
#ref(flask-20240227T060406Z-001.zip)~
zipファイルをダウンロードし、解凍する。プログラムを実行す...
#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 ...
参考にしたサイト👉https://vasturiano.github.io/3d-force-g...
完成したグラフ
#ref(3Dグラフ＿変更前.png,,60%)~
**課題2 3Dグラフに色を付け線の真ん中に数字をつける [#z2c...
***色を付ける [#a0f8a3b3]
今回はmain2.jsに
#ref(色.png,,40%)
の部分を追加することによって線の色をつけた。
linkColor メソッドは、各リンクに対して色を決定するための...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
関数内の条件文では、link.value の値に基づいてリンクの色を...
***数字をつける [#kab604a2]
今回はmain2.jsに
#ref(数字.png,,40%)
の部分を追加することによって数字が表示されるようにした。
linkThreeObject メソッドは、各リンクに関連付ける3Dオブジ...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
SpriteText オブジェクトは、テキストを3D空間に表示するため...
sprite.color でテキストの色を設定し、sprite.textHeight で...
***3Dグラフ [#k352c04a]
完成したグラフ
#ref(3Dグラフ＿変更後.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%)
終了行:
[[引き継ぎ(戸田)]]
*プログラム実行[#ta041b0c]
#ref(flask-20240227T060406Z-001.zip)~
zipファイルをダウンロードし、解凍する。プログラムを実行す...
#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 ...
参考にしたサイト👉https://vasturiano.github.io/3d-force-g...
完成したグラフ
#ref(3Dグラフ＿変更前.png,,60%)~
**課題2 3Dグラフに色を付け線の真ん中に数字をつける [#z2c...
***色を付ける [#a0f8a3b3]
今回はmain2.jsに
#ref(色.png,,40%)
の部分を追加することによって線の色をつけた。
linkColor メソッドは、各リンクに対して色を決定するための...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
関数内の条件文では、link.value の値に基づいてリンクの色を...
***数字をつける [#kab604a2]
今回はmain2.jsに
#ref(数字.png,,40%)
の部分を追加することによって数字が表示されるようにした。
linkThreeObject メソッドは、各リンクに関連付ける3Dオブジ...
link パラメータは、各リンクの情報を含んでおり、例えば lin...
SpriteText オブジェクトは、テキストを3D空間に表示するため...
sprite.color でテキストの色を設定し、sprite.textHeight で...
***3Dグラフ [#k352c04a]
完成したグラフ
#ref(3Dグラフ＿変更後.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]")
