# NIMS SAMURAI MTG

2020/10/26

## スケジュール感

組み込みのサポートをしてほしい
11/24 にリリース予定（内部で撮影をしたいのでこれよりももっと早くなる）
おそらく11月２週目までには完成したい
少なくとも表示はしておきたい

## 議論

- 集計済みのキーワードや人のつながりのスコアの情報を、データベースから取得して、JavaScriptで読み込む手順

fetch("url/to/data.json").then(res => res.json()).then(data => {
    window.samuraiDataVisualizer.renderTagCloud("#tag-cloud", data); 
});

<script>
window.samuraiDataVisualizer.renderTagCloud("#tag-cloud", <%= data.to_json %>); 
</script>

<script>
window.samuraiDataVisualizer.renderTagCloud("#tag-cloud", { words: [ { word: "word", score: 123 }, ], }); 
</script>

jsonについてユーザーが編集できるようにしたいようにしている．
いまは二番目の方がDBに入って

- スタイルシートの指定方法(.cssファイルではなく、.js内で指定されているのでしょうか）
→ js で style 属性や svg の属性を変更しているので css はないです

9月時点のものでは問題なかたが，納品版では難読化されていて辛かった．

デフォルトのデータではなく，研究者ごとのデータをDBにとりにいきたい（いけてない）
出力結果計算はできるけど，SVGが表示できていない．
DB上のデータをとりにいきづらい・・・

`main.js`だけでスコアの部分をDBからもってくるとする．→可視化機能

## 注意点

**描画する要素には領域が確保されている必要があります** →　これがないと表示できないかと思います，ご確認よろしくおねがいします．

`samurai-visualizer.js` を読み込む **前に** HTML側で`style`タグなり，CSSで読み込むなりしてください．
（`samurai-visualizer.js`内部で指定しているCSSとは別にどこかで設定する必要があります）

#tag-cloud {
  width: 40rem;
  height: 40rem;
}

#relationships {
  width: 40rem;
  height: 40rem;
}

-----------------------------
-----------------------------
-----------------------------

# samurai-data-visualizer
SAMURAI のデータを可視化するライブラリです。

# 使用方法
`samurai-data-visualizer.js` を読み込んだ後、それぞれの関数を呼び出すことで描画できます。

<script src="samurai-data-visualizer.js"></script>

## タグクラウド
タグクラウドを描画するには `window.samuraiDataVisualizer.renderTagCloud` を呼び出します。
描画する要素には領域が確保されている必要があります。

#tag-cloud {
  width: 40rem;
  height: 40rem;
}

<div id="tag-cloud"></div>

const data = { /* タグクラウドのデータ */ };
window.samuraiDataVisualizer.renderTagCloud("#tag-cloud", data); 

## 人のつながり
人のつながりを描画するには `window.samuraiDataVisualizer.renderRelationships` を呼び出します。
描画する要素には領域が確保されている必要があります。

#relationships {
  width: 40rem;
  height: 40rem;
}

<div id="relationships"></div>

const data = { /* 人のつながりのデータ */ };
window.samuraiDataVisualizer.renderRelationships("#relationships", data); 

# 開発
## 準備
`yarn install` を実行することで依存関係をインストールする必要があります。

## 開発用サーバ
`yarn start` を実行することで `127.0.0.1:8080` に開発用サーバを立ち上げることができます。

## ビルド
検証用のエディタを含めてビルドするには `yarn run build` を実行します。
`samurai-data-visualizer.js` の生成は `yarn run build:prod` を実行します。