データの可視化を勉強する上で、せっかくなら有益な情報をまとめていくと良いと考え作成した。
尚、こういうデータも公開されているよと広めることが第一であり、
洞察に関してはあまり参考にしないで下さい。


出典：[政府統計の総合窓口(e-Stat)　科学技術研究調査 / 平成30年科学技術研究調査 ](https://www.e-stat.go.jp/stat-search/database?page=1&layout=datalist&toukei=00200543&tstat=000001119860&cycle=0&statdisp_id=0003239575&result_page=1&second=1&second2=1&tclass1val=0)を加工して作成

グラフの描画には[amChartsjs](https://www.amcharts.com)を利用した。

## 出典元のグラフではどうなっていたか

[[総括] 研究主体，組織別研究関係従業者数（企業，非営利団体・公的機関，大学等）](https://www.e-stat.go.jp/dbview?sid=0003239575)

![graph](/images/posts/121/0003239575_2019032514213821.png)

出典元の初期表示ではこのように非常に分かりずらい。（表示項目やグラフ表示は設定変更が可能です）

## 組織数 VS 研究関係従業者数

※ 読み込みが遅いので少々お待ちを。


<style>
.chartdiv {
  width: 100%;
  height: 400px;
}
</style>


<script src="https://www.amcharts.com/lib/4/core.js" ></script>
<script src="https://www.amcharts.com/lib/4/charts.js" ></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js" ></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js" ></script>


<script src="/images/posts/121/chart01.js" async></script>


<div id="chartdiv01" class="chartdiv"></div>

上の図が2018年の組織数と研究関係従業者数をドーナッツグラフで表したもの。
内側が組織数、外側が研究関係従業者数の割合。従業者には、研究者に加え研究補助、技能職、事務職が含まれる。


- 国内の研究従業者の大半は企業に属している。
- 国立は大学数（5.5%）に対して従業者（18.1％）の数がかなり多い。個々の大学の規模が大きいことが窺える。
- 私立と国立では研究従業者数が同程度いる。

出典：[[総括] 研究主体，組織別研究関係従業者数（企業，非営利団体・公的機関，大学等）](https://www.e-stat.go.jp/dbview?sid=0003239575)

Chartの参考：[Nested donut chart](https://www.amcharts.com/demos/nested-donut-chart/)

[ソースコード](https://playcode.io/274775?tabs=console&script.js&output)

## 大学の専門別研究本務者数の内訳


<script src="/images/posts/121/chart02.js" async></script>


<div id="chartdiv02" class="chartdiv"></div>


続いて、2018年の専門別の研究本務者数のグラフ。
学生の数ではありません。
機関は国立、私立、公立の学部、短期、大学附置研究所などを含みます。

- 分野別の占める割合を表示するにはTreeMapがよく合う。
- 保健に所属する研究者が全体の1/3を占めている。
  - 医育機関附属の病院の医師が５万人いる影響か（[施設・業務の種別にみた医師数]（https://www.mhlw.go.jp/toukei/saikin/hw/ishi/16/index.html））。
- 学生の数は多いはずだが工学部の研究者は少なく見える。

出典：[科学技術研究調査 平成30年科学技術研究調査 [大学] 組織，大学等の種類，専門別研究本務者数（大学等）](https://www.e-stat.go.jp/dbview?sid=0003239601)

Chartの参考：[Simple Treemap](https://www.amcharts.com/demos/simple-treemap/)


## 大学の専門別内部使用研究費の内訳

単位は千円。


<script src="/images/posts/121/chart03.js" async></script>


<div id="chartdiv03" class="chartdiv"></div>


受入研究費や自己負担研究費の項目があったが、内部使用研究費が使った額だと思うのでこれをまとめた。

- 専門別研究本務者数では人文と社会学が分かれていたが、ここでは合算になっている。
  - 順位によって色が決まっており、分野ごとの色も異なるため見づらく申し訳ない。

## 終わりに

amChartsのグラフを試用することはできた。
実際のデータから何かを洞察するためには、動機と目的の部分が足りていなかったように思う。

今回はここまで。

国内の研究関係従事者数をグラフ化した | amCharts

amChartsは高機能なデータ可視化のためのライブラリです。
チャートやグラフを描く以外にもたくさんの表現ができます。
その中で、**Word Cloud**という機能があったので使ってみました。

## Contents

## amCharts 4

![amchart_logo](/images/posts/111/amcharts_dark_opaque.png)

利用したライブラリは[amCharts 4](https://www.amcharts.com/javascript-charts/)です。
使った感想はQiitaにまとめましたのでご覧ください。

- [高機能チャートライブラリのamCharts ４がリリースされたので使ってみる - Qiita](https://qiita.com/suzu6/items/68b392ef903c21cc1d33)

## Word Cloud

単語の出現頻度を表現する手法。
Twitterでよく見かけるかと思います。

![whotwi](/images/posts/111/whotwi.png)

[whotwi](https://ja.whotwi.com)というサービスで分析した、私のアカウント[@suzu6_py](https://twitter.com/suzu6_py)の頻出単語。
WEBエンジニアらしい単語ですね。

## Word Cloudを使ってみる

まずはのamChartsのデモを見ながら**Word Cloud**を使ってみる。

[Demo World Cloud](https://www.amcharts.com/demos/word-cloud/)

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/wordCloud.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/images/posts/111/world-cloud.js"></script>


<style>
# chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<section class="section">


<div id="chartdiv"></div>

<textarea name="text" class="textarea" placeholder="e.g. Hello world" row=20>CURRUMPAW is a vast cattle range in northern New Mexico. It is a land of rich pastures and teeming flocks and herds, a land of rolling mesas and precious running waters that at length unite in the Currumpaw River, from which the whole region is named. And the king whose despotic power was felt over its entire extent was an old gray wolf.  Old Lobo, or the king, as the Mexicans called him, was the gigantic leader of a remarkable pack of gray wolves, that had ravaged the Currumpaw Valley for a number of years. All the shepherds and ranchmen knew him well, and, wherever he appeared with his trusty band, terror reigned supreme among the cattle, and wrath and despair among their owners. Old Lobo was a giant among wolves, and was cunning and strong in proportion to his size. His voice at night was well-known and easily distinguished from that of any of his fellows. An ordinary wolf might howl half the night about the herdsman's bivouac without attracting more than a passing notice, but when the deep roar of the old king came booming down the canon, the watcher bestirred himself and prepared to learn in the morning that fresh and serious inroads had been made among the herds.</textarea>

<div class="has-text-centered">
    <button id="redraw" class="button is-primary is-rounded">Redraw</button>
</div>
</section>

めっちゃ動いている！！テキストエリアを変更してボタン`Redraw`をクリックすると、その文章で再描画できます。

`the`や`and`などの助詞(?)が大きくなってしまうため、名詞や動詞に絞ると文章の特徴がわかりやすくなります。
初期値の文章はシートン動物記の狼王ロボ（[Lobo, the King of Currumpaw](http://www.gutenberg.org/ebooks/3031)）の冒頭一文を借りています。

[英語版青空文庫：Project Gutenberg](http://www.gutenberg.org/wiki/Category:Bookshelf)より。

## 日本語の対応

日本語にも対応しています。

![ja](/images/posts/111/ja.png)

[狼王ロボ Wikiのあらすじ](https://ja.wikipedia.org/wiki/%E7%8B%BC%E7%8E%8B%E3%83%AD%E3%83%9C)を適用した図。

ところどころ単語の切り分けが上手くいってないようです。
ライブラリのアルゴリズムはスペースで区切っているだけだと思っていました。
しかし、日本語も出来ているので、形態素解析で単語に切り分けているのかもしれません。
別のライブラリを使って形態素解析を行えば、精度の良いWorld Cloudになりそうです。

## コード

デモのコードを少し変えています。
テキストの取得などにはjQueryを使用しました。

```html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/wordCloud.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/images/posts/111/world-cloud.js"></script>



<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<section class="section">


<div id="chartdiv"></div>

<textarea name="text" class="textarea" placeholder="e.g. Hello world" row=20>CURRUMPAW is a vast cattle range in northern New Mexico. It is a land of rich pastures and teeming flocks and herds, a land of rolling mesas and precious running waters that at length unite in the Currumpaw River, from which the whole region is named. And the king whose despotic power was felt over its entire extent was an old gray wolf.  Old Lobo, or the king, as the Mexicans called him, was the gigantic leader of a remarkable pack of gray wolves, that had ravaged the Currumpaw Valley for a number of years. All the shepherds and ranchmen knew him well, and, wherever he appeared with his trusty band, terror reigned supreme among the cattle, and wrath and despair among their owners. Old Lobo was a giant among wolves, and was cunning and strong in proportion to his size. His voice at night was well-known and easily distinguished from that of any of his fellows. An ordinary wolf might howl half the night about the herdsman's bivouac without attracting more than a passing notice, but when the deep roar of the old king came booming down the canon, the watcher bestirred himself and prepared to learn in the morning that fresh and serious inroads had been made among the herds.</textarea>

<div class="has-text-centered">
    <button id="redraw" class="button is-primary is-rounded">Redraw</button>
</div>
</section>
```

```js
$(window).on('load', function () {
    loadText();
    // ボタンクリック
    $('#redraw').on('click', function () {
        loadText();
    });
});

function loadText(){
    // テキストデータ
    var sentence = $('textarea[name="text"]').val();
    // 改行を半角スペースに変換
    sentence = sentence.replace(/\r?\n/g, ' ');
    // グラフ描画
    drawWorldCloud(sentence);
}


function drawWorldCloud(sentence) {
    // アニメーションテーマを使う
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv", am4plugins_wordCloud.WordCloud);
    var series = chart.series.push(new am4plugins_wordCloud.WordCloudSeries());

    series.accuracy = 4;
    series.step = 15;
    series.rotationThreshold = 0.7;
    series.maxCount = 200;
    series.minWordLength = 2; // 最少頻度
    series.labels.template.tooltipText = "{word}: {value}";
    series.fontFamily = "Courier New";
    series.maxFontSize = am4core.percent(30);

    // 文字列を渡すだけ
    series.text = sentence;

    // カラフルになる。
    series.colors = new am4core.ColorSet();
    series.colors.passOptions = {}; // makes it loop

    // 配置が動くようになる
    setInterval(function () {
        series.dataItems.getIndex(Math.round(Math.random() * (series.dataItems.length - 1))).setValue("value", Math.round(Math.random() * 10));
    }, 10000)
}
```

World Cloudの描画部分はかなりすっきりと書けて良い。
プラグインを解析することで、日本語対応や助詞の排除ができそうです。

### コードを少し解説

`drawWorldCloud(sentence)`の後半を少し解説します。

`series`はグラフの場合数値が入ります。
今回はamChartのプラグインを宣言しており、文字列をそのまま渡すだけで良いです。

そして、`series`にカラーを渡しカラフルにしました。
ColorSetの数以上に単語があるので、ループさせています。

最後に`setInterval`で定期的に配置を変えています。
中でやっていることは、単語のIndexの位置を変えることで配置を変えています。

## 合わせて読みたい

[amCharts 4](https://www.amcharts.com/javascript-charts/)を使った感想はQiitaにまとめましたのでご覧ください。

- [高機能チャートライブラリのamCharts ４がリリースされたので使ってみる - Qiita](https://qiita.com/suzu6/items/68b392ef903c21cc1d33)

また、時系列データなんかの可視化のため下の記事でも利用しています。

- [amchartsで時系列データのグラフを作成 | javascript](https://www.suzu6.net/posts/56-amcharts-samples/)
- [眺めていられる遺伝的浮動(genetic draft)のシミュレーション|JavaScript](https://www.suzu6.net/posts/57-genetic-draft/)

amChartsのwordcloudで単語出現頻度を可視化する。日本語も対応

私は書いたコードのログが流れてるところをぼーっと眺めるのが好きです。
シミュレーション途中のグラフや画像が変わっていくのも大好きです。

そんな訳で、前回の[眺めていられるモンテカルロ法で円周率の近似を求めるシミュレーション](https://www.suzu6.net/posts/59-montecarlo-pi)に引き続きぼーっとできるシミュレーションを作りました。
今回は**モンテカルロ法で円周率の近似を求める**シミュレーションです。

ブラウザはChromeを推奨！

## モンテカルロ法

モンテカルロ法とはシミュレーションや数値計算を乱数を用いて行う手法の総称です。ランダム法とも呼ばれる。
例えば、[数値積分](https://www.a.math.ryukoku.ac.jp/~hig/course/compscib_2016/w13.pdf)や統計学の[ブートストラップ法](http://www.math.s.chiba-u.ac.jp/~wang/bootstrap.pdf)もモンテカルロ法の一つとされています。


乱数って何だろう？と疑問に思ったら[【Unity道場スペシャル 2017札幌】乱数完全マスター](https://www.slideshare.net/UnityTechnologiesJapan/unity-2017-81056841)のスライドを読んでください。わかりやすくてかなり面白いです！

## 円周率の求め方

モンテカルロ法を用いて円周率を求める方法は、**円と外接する正方形の面積比**を使います。

面積をS、半径をrとすると、$S_{circle} = \pi r^2$ です。
この円に外接する正方形の面積は $S_{square} = 4r^2$となります。
よって、円と外接する正方形の面積比は $S_{circle} / S_{square} = \pi / 4$ であることがわかりました。

![説明](/images/posts/59/s.png)

ここで、モンテカルロ法を使います。
外接する正方形の範囲に一様に点をプロットした時、円の中にプロットされる確率は面積比と同様に $\pi / 4$ になります。
プロットした点の数(**N**)と円の中の点の数(**x**)の比から、πは $\pi = 4x / N$ で求まるようになる。

たくさん点をプロットしていけば、πにどんどん近似していくはずです。

円周率を求める方法は他にも、[ライプニッツの方法](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%97%E3%83%8B%E3%83%83%E3%83%84%E3%81%AE%E5%85%AC%E5%BC%8F)や[ガウス・ルジャンドルの方法](https://www.google.com/search?q=%E3%82%AC%E3%82%A6%E3%82%B9%E3%83%BB%E3%83%AB%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%89%E3%83%AB%E3%81%AE%E6%96%B9%E6%B3%95&oq=%E3%82%AC%E3%82%A6%E3%82%B9%E3%83%BB%E3%83%AB%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%89%E3%83%AB%E3%81%AE%E6%96%B9%E6%B3%95&aqs=chrome..69i57.267j0j4&sourceid=chrome&ie=UTF-8)などがあります。

## シミュレーション

原理はなんとなく伝わったはずなので、実際に計算するところを眺めて見ましょう。
計算を簡単にするため円と外接する四角の $1/4$ にプロットします。面積比は変わらず $\pi / 4$ です。

円の中の点を緑、外の点を白としています。
試行回数が点をプロットした回数に当たる。
大体４万回ぐらいから3.14...と少数２桁が合うようになります。
案外、収束しないもんなんですね。

下のグラフがπの理論値と計算した値の比較になります。


<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>


<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<script src="/images/posts/59/montecarlo.js"></script>

<div>
  <div id="canvas"  class="has-text-centered"></div>
  <button type="button" class="button is-primary" onclick="restart();">再計算</button>
  <div class="m-left-20">πの演算結果：<span id="result">0</span></div>
  <div class="m-left-20">試行回数：<span id="trials">0</span>&nbsp;内側の点の数：<span id="t_inner">0</span>&nbsp;</div>
  <div id="chartdiv" class="chart has-text-centered"></div>
</div>

<style>
.chart {
  width: 100%;
  height: 400px;
}
.m-left-20{
  margin-left: 20px;
}
</style>

## コードの解説

単純に計算結果だけ求める場合は以下のようにします。

**JavaSript**

```js
function calcPi(){
  var trials = 10000; // 試行回数
  var t_inner = 0; // 円内の点の数

  for(var i = 0; i < trials; i++){
    var x = Math.random(); // 0 ~ 1.0の乱数
    var y = Math.random(); // 0 ~ 1.0の乱数
    var r = Math.sqrt(x * x + y * y);

    if(r < 1){
      // 円の内側
      t_inner++;
    }
  }
  // 計算結果
  var result = 4 * t_inner / trials;
  console.log(result);
}
```

円の内側かどうかは$\sqrt{x^2 + y^2} < r$ で判定することができます。
内側の点を数えて、計算します。

**Python**

```python
import random

inner = 0
for i in range(10000):
    x, y = random.random(), random.random()
    if x**2 + y**2 < 1:
        inner += 1
print(inner *4 / 10000)   # 3.1446
```

コード引用：[Remrinのpython攻略日記](http://python-remrin.hatenadiary.jp/entry/2017/05/04/163617)

### シミュレーションのコードについて

基本は上記のアルゴリズムを元に、計算過程を眺められるようグラフなど追加していきました。

### 利用したライブラリ

点のプロットには[p5js](https://p5js.org/)、グラフは[amCharts](https://www.amcharts.com/)を使います。
使い方は、それぞれ公式かこのブログのタグの記事を読んでで見てください。[p5js](https://www.suzu6.net/tags/p5js)と[amCharts](https://www.suzu6.net/tags/amCharts)。

**html**

```html

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>


<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>


<script src="/images/posts/59/montecarlo.js"></script>

<div>
  
  <div id="canvas"  class="has-text-centered"></div>
  <button type="button" class="button is-primary" onclick="restart();">再計算</button>
  <div class="m-left-20">πの演算結果：<span id="result">0</span></div>
  <div class="m-left-20">試行回数：<span id="trials">0</span>&nbsp;内側の点の数：<span id="t_inner">0</span>&nbsp;</div>
  <div id="chartdiv" class="chart has-text-centered"></div>
</div>

<style>
.chart {
  width: 100%;
  height: 400px;
}
.m-left-20{
  margin-left: 20px;
}
</style>
```

**JavaScript**

全文は[こちら](https://www.suzu6.net/images/posts/59/montecarlo.js)

```js
var t_inner = 0;
var trials = 0;

// p5js
function setup() {
  let canvas = createCanvas(400, 400);
  canvas.parent('canvas');
  background(50);
}

function draw() {
  const width = 400;
  while (true) {
    monteCarlo(width);
    trials++;
    // results
    if (trials % 50 == 0) {
      // 1フレームに50回計算する。
      break;
    }
  }
  let pi = t_inner * 4 / trials;

  // グラフにデータを追加
  addData(pi);
  // 結果表示
  document.getElementById('result').innerHTML = pi;
  document.getElementById('trials').innerHTML = trials;
  document.getElementById('t_inner').innerHTML = t_inner;
}
```

**p5js**では`setup()`でキャンバスを作成して、`draw()`でフレーム処理を行います。
演算速度を早めるため、１フレームに50個の点をプロットしています。


```js
function monteCarlo(width) {
  var x = Math.random(); // 0 ~ 1.0の乱数
  var y = Math.random(); // 0 ~ 1.0の乱数
  var r = Math.sqrt(x * x + y * y);

  let isInner = false;
  if (r < 1) {
    isInner = true;
    t_inner++;
  }
  plotEllipse(x * width, y * width, isInner);
}
```

モンテカルロ法のアルゴリズム部分。
内側の点の数を数えます。

キャンバスの大きさ`width`をかけて、点の座標と内側かどうかを渡す。

```js
function plotEllipse(x, y, isInner) {
  // color of outer points
  let c = color(255);
  if (isInner) {
    // color of inner points
    c = color(25, 254, 0);
  }
  fill(c);
  noStroke();
  ellipse(x, y, 1, 1);
}
```

点を描画する関数。円の内側の点を緑、外側を白とする。
点を描くときは、`point()`ではなく`ellipse()`を使いましょう。

```js
var series_calc = null;
var series_pi = null;

function createResultChart() {
  var chart = am4core.create("chartdiv", am4charts.XYChart);

  // X軸
  var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
  valueAxisX.title.text = 'number of trials';
  valueAxisX.renderer.minGridDistance = 50;
  // スケール固定
  valueAxisX.min = 0;
  // valueAxisX.max = trials - 1;

  var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxisY.title.text = 'π';
  // スケール固定
  valueAxisY.min = 3.1;
  valueAxisY.max = 3.2;


  var data = [{ trials: 0, calculated: 0, pi: Math.PI }];

  series_calc = createCalculatedSeries(chart);
  series_calc.data = data;
  series_pi = createPiSeries(chart);
  series_pi.data = data;

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.xAxis = valueAxisX;

  chart.legend = new am4charts.Legend();
  // chart.scrollbarY = new am4core.Scrollbar();

  return;
}

function createCalculatedSeries(chart) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "calculated π";
  series.dataFields.valueY = "calculated";
  series.dataFields.valueX = "trials";
  series.tooltipText = "{valueY}";
  return series;
}

function createPiSeries(chart) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "theoretical π";
  series.dataFields.valueY = "pi";
  series.dataFields.valueX = "trials";
  series.tooltipText = "{valueY}";
  return series;
}

function addData(pi) {
  let data = { trials: trials, calculated: pi, pi: Math.PI };
  series_calc.addData(data, 0); // 第二引数はpush
  series_pi.addData(data, 0); // 第二引数はpush
}
```

グラフの部分。
グラフの作成とシミュレーション結果をグラフに追加していきます。
大体[眺めていられる遺伝的浮動(genetic draft)のシミュレーション](https://www.suzu6.net/posts/57-genetic-draft)と同じ。

`addData()`は`draw()`の中で呼び、フレームを合わせています。


```js
function restart(){
  trials = 0;
  t_inner = 0;
  series_calc = null;
  series_pi = null;
  chartInit();
  setup();
}
```
再計算するリセットの関数。

## 終わりに

少数２桁の精度でも意外と収束に時間がかかるんですね。

## 参考

- [Wiki](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%B3%E3%83%86%E3%82%AB%E3%83%AB%E3%83%AD%E6%B3%95)
- [モンテカルロ法のお話 - 産業技術総合研究所](https://unit.aist.go.jp/diversity/ja/jst/teens/montecarlo.htm)
- [モンテカルロ法を用いた円周率の近似値算出 | みんなのメモ帳](https://yoshipc.net/mc-pi/)

眺めていられるモンテカルロ法で円周率の近似を求めるシミュレーション|JavaScript


私は書いたコードのログが流れてるところをぼーっと眺めるのが好きです。
シミュレーション途中のグラフや画像が変わるのも大好きです。

そんな訳で、昔学んだ遺伝学から**遺伝的浮動のシミュレーション**を自分で作ったら、好きなだけぼーっとできるのではないかと思い立ちます。
是非、眺めてやって下さい。

ブラウザはChromeを推奨！

## 遺伝的浮動 (genetic draft)

このブログを見にくる方々はエンジニアが多いと思うので、簡単にですが説明します。

遺伝子が変異しても生物の生存に有利でも不利でもないものがあります。
集団の中でその変異型の遺伝子を持つ割合を**遺伝子頻度**と言います。
**遺伝的浮動(genetic draft)**とは、ある集団の持つ遺伝子の頻度が世代を経て偶発的に変動する様です。

シミュレーションでは、変異型の遺伝子が生存や生殖成功率に関して何の影響もないと仮定しています。
次の世代の遺伝子頻度は、親世代から無作為に選ばれた遺伝子を引継ぐとして算出しています。

詳しくは、[Introduction to population genetics simulation](http://www.biology.kyushu-u.ac.jp/~kteshima/Information/20170802_simulation_with_random_number.html)
を参照して下さい。
以下のシミュレーションもこちらを参考に作成しました。

## シミュレーション

とりあえず、眺めて見ましょう。


<div id="chartdiv" class="chart"></div>
<div id="chartdivfixation" class="chart-harf"></div>
<div id="chartdivlost" class="chart-harf"></div>


一番目のグラフが遺伝子頻度(frequency)をあわらします。
0世代目は50%から始めて、各世代(generations)の頻度の変化を計算しています。
同時に10個ずつ計算。

集団サイズNは300にしてあります。

下の２つは、その集団で**遺伝子が完全に広がるまでの世代数**（Time until fixation）と**遺伝子が集団から消失するまでの世代数**(Time until lost)をカウントしています。
試行回数を多く取ると二項分布になります。
ニョキニョキしているところをみながら気長に待つと、段々とそれっぽい分布があるような気がしてきます。

## ソースコード


集団サイズや初期の頻度を変えるとまた違った分布になります。

グラフは[amCharts 4](https://www.amcharts.com/)で書いています。

設定もいじれるように拡張中です。。。

### html

```html
<div id="chartdiv" class="chart"></div>
<div id="chartdivfixation" class="chart-harf"></div>
<div id="chartdivlost" class="chart-harf"></div>

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/images/posts/57/genetic_draft.js"></script>


<style>
.chart {
  width: 100%;
  height: 400px;
}
.chart-harf {
  width: 100%;
  height: 200px;
}
</style>
```

### javascript

```js
{
  window.onload = function () {
    ini();
  }

  var size = 300;
  var derived = 150;

  var GEN_MAX = 500;
  var count_lost_chart = null;
  var count_fixation_chart = null;
  var frequecy_chart = null;
  var draft_num = 0;
  var parallel_num = 10;
  var interval_msec = 10;

  function ini(){
    // グラフ描画
    am4core.useTheme(am4themes_animated);
    frequecy_chart = createFrequencyChart();
    count_lost_chart = createCounter("lost");
    count_fixation_chart = createCounter("fixation");
  }

  function createFrequencyChart() {
    var chart = am4core.create("chartdiv", am4charts.XYChart);

    // X軸
    var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxisX.title.text = 'Generations';
    valueAxisX.renderer.minGridDistance = 50;
    // スケール固定
    valueAxisX.min = 0;
    valueAxisX.max = GEN_MAX - 1;

    var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxisY.title.text = 'frequecy';
    // スケール固定
    valueAxisY.min = 0;
    valueAxisY.max = 1;


    for (let n = 1; n <= parallel_num; n++) {
      let series = createSeries(chart);
      addData(series);
    }

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = valueAxisX;

    return chart;
  }

  function createCounter(id) {
    var chart = am4core.create(`chartdiv${id}`, am4charts.XYChart);
    chart.data = initCounterData(GEN_MAX);

    // X軸
    var categoryAxis = chart.xAxes.push(new am4charts.ValueAxis());
    // categoryAxis.title.text = 'Generations';
    categoryAxis.renderer.minGridDistance = 50;

    var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxisY.title.text = `Time until ${id}`;


    // Create series
    var series = chart.series.push(new am4charts.StepLineSeries());
    series.dataFields.valueY = "count";
    series.dataFields.valueX = "generation";
    series.tooltipText = "{valueY}";
    series.fillOpacity = 0.1;
    series.defaultState.transitionDuration = 10;
    series.hiddenState.transitionDuration = 10;

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = categoryAxis;

    
    return chart;
  }

  function initCounterData(gen_max) {
    var data = [];
    for (var i = 0; i < gen_max; i += 10) {
      data.push({ generation: i, count: 0 });
    }
    return data;
  }

  function createSeries(chart) {

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "frequency";
    series.dataFields.valueX = "generation";
    series.tooltipText = "{valueY}";
    series.defaultState.transitionDuration = 10;
    series.hiddenState.transitionDuration = 400;

    return series;
  }

  function addData(series) {
    var gen = 0;
    var p = derived / size;
    var data = [{ generation: gen, frequency: p }];

    series.data = data;

    var calc = function () {
      p = calcNextGeneration(p, size);
      series.addData({ generation: gen++, frequency: p }, 0); // 第二引数はpush
      if (gen > GEN_MAX) {
        return true;
      }
      else if (p == 0) {
        // gene lost
        count_lost_chart.data[Math.floor(gen / 10)].count++;
        count_lost_chart.data = count_lost_chart.data;
        return true;
      }
      else if (p == 1) {
        // gene fixation
        count_fixation_chart.data[Math.floor(gen / 10)].count++;
        count_fixation_chart.data = count_fixation_chart.data;
        return true;
      }
      return false;
    }

    // add data
    var interval;
    function startInterval(calc) {
      interval = setInterval(function () {
        var res = calc();
        if (res) {
          clearInterval(interval);
          addData(series);
          console.log(draft_num);
        }
      }, interval_msec);
    }

    startInterval(calc);
  }

  function calcNextGeneration(p, size) {
    var derived = 0;
    for (let i = 0; i < size; i++) {
      if (Math.random() < p) {
        derived++;
      }
    }
    return derived / size;
  }

}
```

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/images/posts/57/genetic_draft.js"></script>


<style>
.chart {
  width: 100%;
  height: 400px;
}
.chart-harf {
  width: 100%;
  height: 200px;
}
</style>


---

JavaScriptを初めて学ぶ方へのオススメ！
実際にプログラミングを書いて覚えられるので、オンラインでの学習と合わせて読み進めると理解が深まると思います。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/3584/9784797383584.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" >確かな力が身につくJavaScript「超」入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">狩野祐東 SBクリエイティブ 2015年10月31日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4797383585/suzu60c-22/" target="_blank" rel="nofollow" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" rel="nofollow" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

眺めていられる遺伝的浮動(genetic draft)のシミュレーション|JavaScript

グラフを描きたくなったので、気になっていたamchartを使って色々作ってみる。
目標はデモにある[Line Graph](https://www.amcharts.com/demos/line-graph/)を作成すること。

![amcahrts](/images/posts/56/demo-line-graph.png)

## amCharts

[amCharts](https://www.amcharts.com/)

[amCharts 4 Demos](https://www.amcharts.com/demos/)

![amcahrts](/images/posts/56/amcharts.png)

シンプルなグラフの描画は[Chart.js](https://www.chartjs.org/)が使いやすくて好きです。
高機能で綺麗なデザインのものだと[highchartsjs](https://www.highcharts.com/)が有名ですがお高いので([単一開発者ライセンスが8万円ほど](https://www.componentsource.co.jp/product/highcharts/prices))、劣らず綺麗なamChartsを利用していきます。



### ライセンスについて

[料金](https://www.amcharts.com/online-store/)

> Free license
> 
> Use anywhere you want as long as you don't mind a small amCharts attribution on charts

フリーライセンスでは、amChartsのリンクを気にしなければどこでも使えるようです。

グラフにあるリンクはバージョン４になってからとても可愛らしくなってくれました。
隅っこにあるため気にならない。

このリンクを外したい場合は、購入する必要があります。

## 利用方法

npmかCDNでも利用できます。
ここではチャートを利用する場合を載せます。

**npm**

```sh
npm install @amcharts/amcharts4
```

**CDN**

```html
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
```

ダウンロードは[こちら](https://www.amcharts.com/download/)から。

## データ

ランダムでも良いがせっかくなので実データを使う。

札幌の気温と降水量を気象庁の[過去の気象データ](https://www.data.jma.go.jp/gmd/risk/obsdl/index.php)からダウンロードして、少し加工した。

[sapporo_201812.csv](/images/posts/56/sapporo_2018.csv)

リンクのファイルはUTF-8でエンコードしているためExcelだと文字化けするかもしれません。

```csv
年月日,平均気温(℃),降水量の合計(mm)
date,temperature,rain_volume
2018/1/1,0.4,9.5
2018/1/2,1.1,3
2018/1/3,-0.7,3.5
2018/1/4,-1.7,4.5
2018/1/5,0.1,0.5
(略)
```

時系列データにするにはjson形式へ変換が必要です。

[こちら](https://www.csvjson.com/csv2json)を使ってにcsvからjsonに変換した。

[sapporo_201812.json](/images/posts/56/sapporo_2018.json)

```json
[
  {
    "date": "2018/1/1",
    "temperature": 0.4,
    "rain_volume": 9.5
  },
  {
    "date": "2018/1/2",
    "temperature": 1.1,
    "rain_volume": 3
  },
  {
    "date": "2018/1/3",
    "temperature": -0.7,
    "rain_volume": 3.5
  },
  （略）
]
```

## やってみる

[デモ](https://www.amcharts.com/demos/line-graph/)を真似てグラフを作成した。

```html
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>

<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<script src="/images/posts/56/amcharts_samples.js"></script>


<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<div id="chartdiv"></div>
```

アニメーションでリッチに表現するため`animated.js`を追加しています。

```js
window.onload = function () {
  // 気象データ
  var jsonUrl = '/images/posts/56/sapporo_2018.json';
  // グラフ描画
  drawChart(jsonUrl);
}

function drawChart(jsonUrl) {
  // アニメーションテーマを使う
  am4core.useTheme(am4themes_animated);

  var chart = am4core.create("chartdiv", am4charts.XYChart);
  // chart.data = data;
  // ファイルの読み込みもできる
  chart.dataSource.url = jsonUrl;

  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  // グリッド間隔
  dateAxis.renderer.minGridDistance = 60;
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // 時系列データ
  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "temperature";
  series.dataFields.valueY = "temperature";
  series.dataFields.dateX = "date";
  series.tooltipText = "{valueY}"; // demoでは"{value}"となっているが間違い。

  series.tooltip.pointerOrientation = "vertical";

  // カーソルに追従するライン
  chart.cursor = new am4charts.XYCursor();
  chart.cursor.snapToSeries = series;
  chart.cursor.xAxis = dateAxis;

  // スクロールバー
  //chart.scrollbarY = new am4core.Scrollbar();
  chart.scrollbarX = new am4core.Scrollbar();
}
```

dataは`chart.dataSource.url`にjsonファイルのURLを渡すと勝手に読み込んでくれます。

カーソルを合わせた時に出るツールチップのテキストは`"{valueY}"`として下さい。
ドキュメント通りに`"{value}"`とするとツールチップが出ません(2019/01/08確認)。

カーソルに合わせて詳細もわかりやすいですし、上部のスクロールバーに合わせて滑らかに動くので楽しい！
表示箇所に合わせて縦軸の範囲も変わってますね。


<div id="chartdiv" class="chart"></div>



## もう少し改良する。

他のデモやドキュメントをみながら、グラフを見やすく変えていきます。

```html

<div id="chartdiv2"></div>
```

```js
window.onload = function () {
  // 気象データ
  var jsonUrl = '/images/posts/56/sapporo_2018.json';
  // グラフ描画
  drawChart2(jsonUrl);
}

function drawChart2(jsonUrl) {
  // アニメーションテーマを使う
  am4core.useTheme(am4themes_animated);

  var chart = am4core.create("chartdiv2", am4charts.XYChart);
  // chart.data = data;
  // ファイルの読み込みもできる
  chart.dataSource.url = jsonUrl;

  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.title.text = "sapporo";
  // グリッド間隔
  dateAxis.renderer.minGridDistance = 60;
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = "temperature (℃)";

  var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis2.title.text = "rain_volume (mm)";
  valueAxis2.renderer.opposite = true;
  
  
  // 時系列データ
  var series1 = chart.series.push(new am4charts.LineSeries());
  series1.name = "temperature";
  series1.dataFields.valueY = "temperature";
  series1.dataFields.dateX = "date";
  series1.tooltipText = "{valueY} ℃"; 
  series1.tooltip.pointerOrientation = "vertical";
  series1.strokeWidth = 2;
  series1.tensionX = 0.7;
  // series1.bullets.push(new am4charts.CircleBullet());
  
  
  // 2こ目の時系列データ棒グラフ
  var series2 = chart.series.push(new am4charts.ColumnSeries());
  series2.name = "rain_volume";
  series2.dataFields.valueY = "rain_volume";
  series2.dataFields.dateX = "date";
  series2.tooltipText = "{valueY} mm"; 
  series2.tooltip.pointerOrientation = "vertical";
  // series2.bullets.push(new am4charts.CircleBullet());
  
  // レジェンド
  chart.legend = new am4charts.Legend();

  // カーソルに追従するライン
  chart.cursor = new am4charts.XYCursor();
  chart.cursor.snapToSeries = series1;
  chart.cursor.xAxis = dateAxis;

  // スクロールバーに気温のグラフを表示
  var scrollbarX = new am4charts.XYChartScrollbar();
  scrollbarX.series.push(series1);
  chart.scrollbarX = scrollbarX;
}
```

<div id="chartdiv2" class="chart"></div>


降水量は棒グラフにしてみました。
`series`を増やせばうまく追加してくれるようです。
軸も２つにしたんですが、値が近いためか別れてくれませんでした。
レジェンドをクリックすると、表示／非表示が切り替えられます。

スクロールバーにはサマリー的な表示ができました。
初期表示を直近の分だけにしようと調べましたが、いまいちわからないので全体表示になっています。

とりあえずここまで。

amChartで遺伝的浮動のシミュレーションを描画してみました。
合わせてこちらもどうぞ。

[眺めていられる遺伝的浮動のシミュレーション](https://www.suzu6.net/posts/57-genetic-draft)



<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/images/posts/56/amcharts_samples.js"></script>


<style>
.chart {
  width: 100%;
  height: 500px;
}
</style>