---
# System prepended metadata

title: NIMS SAMURAI MTG

---

# NIMS SAMURAI MTG 

2020/10/26 


## スケジュール感

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




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


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

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

```html
<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とは別にどこかで設定する必要があります）

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

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


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


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

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

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

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

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

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

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

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

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

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

```javascript
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` を実行します。
