団塊世代の黄昏 – 私が作成したものやブログのフロントページです。

Graphviz 周りの用語

色々な単語が出てくるので、整理しておく。

用語	内容
diagrammeR	R におけるグラフ（Graphviz)描画のためのパッケージ
grViz	diagrammeR のグラフ描画用の関数。Graphvizにはない @@ 等の機能が追加されている。
Graphviz	グラフ描画の本家本元。
dot	グラフ記述用の言語。dot 自体は有向グラフ描画用。他に無向グラフ用に NEATO などもある。
viz.js	JavaScrit 用のライブラリ。
full.render.js	JavaScrit 用のライブラリ。V 2.0 より前はviz.jsだけをインクルードするだけだったが、V 2.0 からはこのライブラリもインクルードしなければならない。

Viz.js – HTMLでGraphviz

前置きはさておき、ここでは「Viz.js」の使用方法を例を持って示していきます。

【js ライブラリの取得】

GitHubから、

full.render.js
viz.js

をダウンロードして、好みの場所に配置します。

【実行サンプル】

viz-examplesのscript-tagをクリックしてディレクトリを開き、その中のno-worker.htmlを開らいてソースコードをコピーします。それを、テキストエディタに貼付け、保存します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  
  <script src="../js/viz.js"></script>
  <script src="../js/full.render.js"></script>
  <script>
    
    var viz = new Viz();
    viz.renderSVGElement('digraph { a -> b; }')
    .then(function(element) {
      document.body.appendChild(element);
    });
    
  </script>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var viz = new Viz();

viz.renderSVGElement('digraph { a -> b; }')

.then(function(element) {

document.body.appendChild(element);

});

</script>

</body>

</html>

ここでは、「01-original.html」として保存しました。
これを実行すれば、次の様なグラフが表示されるハズです。

【改善その1】

グラフ記述部分（以下「Dot」）「digraph { a -> b; }」を外出しにします。

    var viz = new Viz();
    var dot = 'digraph { a -> b; }';  // (1)
    viz.renderSVGElement(dot)
    .then(function(element) {
      document.body.appendChild(element);
    });

var viz = new Viz();

var dot = 'digraph { a -> b; }'; // (1)

viz.renderSVGElement(dot)

.then(function(element) {

document.body.appendChild(element);

});

更に、(1) を次のように書き換えて見ます。

    var dot = 'digraph {
                   a -> b; 
                 }';

var dot = 'digraph {

a -> b;

}';

残念ながら「SyntaxError: ” string literal contains an unescaped line break」
Dot内に「改行」が使えない模様。

【改善その2】

複雑な Dot を記述する時に、改行やタブが使えないようでは話になりません。
そこで、新たな改善策。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  
  <script src="../js/viz.js"></script>
  <script src="../js/full.render.js"></script>

	<script type="text/vnd.graphviz" id="dot">
		digraph {
		    a -> b;
		}
	</script>

  <script>
    
    var viz = new Viz();
    var dot = document.getElementById("dot").innerHTML;
    viz.renderSVGElement(dot)
    .then(function(element) {
      document.body.appendChild(element);
    });
    
  </script>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

digraph {

a -> b;

}

</script>

var viz = new Viz();

var dot = document.getElementById("dot").innerHTML;

viz.renderSVGElement(dot)

.then(function(element) {

document.body.appendChild(element);

});

</script>

</body>

</html>

script タグ内に Dot を単独で定義するようにしました。
それを HTML ソースとして入力すれば、改行や余分なスペースが無視されることを利用しています。
これで、Dot 内でも改行が使用できるようになりました。

【改善その3】

ここまで来ると、Dot を外部ファイルにしたくなるのは当然の成り行き。
ついでに、jQuery と Bootstrap も導入し DOM の操作や style の改善をしておきましょう。

digraph {
    a -> b;
}

digraph {

a -> b;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/viz.js"></script>
<script src="../js/full.render.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function(){
	var viz = new Viz();
	$.get("sample.dot",function(dot){
		console.log(dot);
		viz.renderSVGElement(dot)
	  .then(function(element) {
	    $("#svgout").append(element);
	  });
	});
});
</script>

</head>
<body>
<div class="container">
<h1>Viz.js Sample</h1>
<div id="svgout"></div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

var viz = new Viz();

$.get("sample.dot",function(dot){

console.log(dot);

viz.renderSVGElement(dot)

.then(function(element) {

$("#svgout").append(element);

});

</script>

</head>

<body>

<h1>Viz.js Sample</h1>

</div>

</body>

</html>

【サンプル集】

Graphvizのテスト

Graphvizがwordpressでも使えるらしいのでテストしてみます。プラグインには「TFO Graphviz」を使用します。

[graphviz simple="yes" href="self"]
a -> b -> c;
[/graphviz]

[graphviz simple="yes" href="self"]

a -> b -> c;

[/graphviz]

おお、素晴らしい！

TFO Graphviz 使用方法

ショートコードの一般形式は次の通り。

[graphviz <options>]
 <DOT code>
[/graphviz]

[graphviz <options>]

[/graphviz]

のリストは下表の通り。

options

説明

height=”<image_height>”

イメージタグに height 属性を設定する。SVG に有効

href=”self|<URL>”

画像をクリックした時に表示する URL を指定する。デフォルト：href=””、self：同じウィンドウ、<URL：指定のURL

id=”<id>”

生成された画像をイメージマップにリンクするために使用する識別子を指定する。これを指定しない場合は、”tfo_graphviz_N”（N:1からの連番）が自動生成される。

imap=”yes|no”

lang=”<dot|neato|twopi|circo|fdp>”

使用する Graphviz インタープリタを指定する。デフォルトは dot

output=”<png|gif|jpg|svg>”

生成する画像フォーマットを指定する。デフォルトは png

simple=”yes|no”

コードの周りに非常に基本的な DOT ラッパーが適用される。

[graphviz simple="yes"]
 a -> b -> c; 
[/graphviz]

[graphviz simple="yes"]

a -> b -> c;

[/graphviz]

このコードは、次のコードが生成される。

digraph tfo_graphviz_1 {
    a -> b -> c;
}

digraph tfo_graphviz_1 {

a -> b -> c;

}

title=”<title>”

画像のタイトル。画像を参照するための alt および title 属性で使用する

width=”<image_width>”

イメージタグに width 属性を設定する。

Ubuntu 18.04 にTeXlive2018をインストール

LaTeX のインストールについては、apt-get による様々な方法が説明されています。しかし、何れの方法をとっても、RStudio において R Markdown を PDF に変換できないのです。何かが足りないようではあるのですが、その何かが分からない。エラーログが、もう少しユーザフレンドリーであったらな～

そこで、最も確実なインストール方法として TeX Live ホームページの手順に従うことにしたものです。

手順

インストーラのダウンロード
インストーラによる TeXlive のインストール
シンボリックリンクの作成

1.インストーラのダウンロード

TeX Live ホームページに行き、”download” をクリックする。

遷移したページの中から、「install-tl-unx.tar.gz (3mb)」をクリックしてダウンロードする。

ダウンロードしたファイルを解凍します。

cd ダウンロード
tar xvf install-tl-unx.tar.gz
cd install-tl-unx/install-tl*/

cd ダウンロード

tar xvf install-tl-unx.tar.gz

cd install-tl-unx/install-tl*/

2.インストーラによる TeXlive のインストール

TeXlive のインストールは、次のコマンドを実行するだけです。

sudo ./install-tl

1	sudo ./install-tl

これを実行すると、ズラズラとメッセージが表示され、最後に次のメッセージが表示され、待ち状態になります。

Actions:
 <I> start installation to hard disk
 <H> help
 <Q> quit
 
Enter command:

Actions:

<I> start installation to hard disk

<H> help

<Q> quit

Enter command:

ここで、「i」を入力して、Enter キーを押下するとインストールが始まります。
時間はかかりますが、操作が単純で余分なことをせずにフルインストールができるのが、素晴らしい点です。

3.シンボリックリンクの作成

インストールが完了したら、”/usr/local/bin”以下にシンボリックリンクを作成します。

# 64bitの場合
sudo /usr/local/texlive/2018/bin/x86_64-linux/tlmgr path add

# 32bitの場合
sudo /usr/local/texlive/2018/bin/i386-linux/tlmgr path add

# 64bitの場合

sudo /usr/local/texlive/2018/bin/x86_64-linux/tlmgr path add

# 32bitの場合

sudo /usr/local/texlive/2018/bin/i386-linux/tlmgr path add

（注）：「2018」の部分は、TeXLive のリリースバージョン（年）毎に異なります。
これにてTeXliveのインストールは完了です。

動作確認

(1) TeX 文書

次の文書を、”sample.tex” として保存します。

\documentclass{jsarticle}
\begin{document}
Hello World.
こんいちは世界。
\begin{equation}
  \int_{a}^{b} f(x) dx = F(b) - F(a)
\end{equation}
\end{document}

\documentclass{jsarticle}

\begin{document}

Hello World.

こんいちは世界。

\begin{equation}

\int_{a}^{b} f(x) dx = F(b) - F(a)

\end{equation}

\end{document}

端末から、次のコマンドを入力し、PDF 文書が作成されるかを確認します。

platex sample.tex

dvipdfmx sample.dvi

platex sample.tex

dvipdfmx sample.dvi

(2) R Markdown

RStudio から次の R Markdown を入力し、knit します。

---
title: "Sample01"
author: "Hogehoge"
date: "2018年7月12日"
output:
  pdf_document:
    latex_engine: lualatex
    toc: true
mainfont: Noto Sans CJK JP
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

---

title: "Sample01"

author: "Hogehoge"

date: "2018年7月12日"

output:

pdf_document:

latex_engine: lualatex

toc: true

mainfont: Noto Sans CJK JP

---

```{r setup, include=FALSE}

knitr::opts_chunk$set(echo = TRUE)

```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}

summary(cars)

```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}

plot(pressure)

```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

「mainfont」は、自分の環境に合わせ変更してください。日本語フォントを指定しないと、日本語部分が削除され「2018712」と表示されます。

latex_engine について

latex_engine: lualatex としても latex_engine: xelatex としても、問題なく動作しました。
しかし、これを指定しないとエラーで動作が停止しますので、必ず指定してください。

（参考サイト）

-以上-

RStudioで日本語PDF

1.環境

項目	内容
OS	windows7
R	3.5.0
knitr	1.20
RStudio	1.1.453
TeXディストリ	w32Tex 角藤版

2.R Markdown

RStudioで、新規R Markdownを選択した時に作成される雛形文書そのもの。

---
title: "Diamond Size"
author: "Hogehuga"
date: "2018年7月12日"
output: pdf_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

---

title: "Diamond Size"

author: "Hogehuga"

date: "2018年7月12日"

output: pdf_document

---

```{r setup, include=FALSE}

knitr::opts_chunk$set(echo = TRUE)

```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

```{r cars}

summary(cars)

```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}

plot(pressure)

```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

3.結果

このまま実行した時の結果。
! Package inputenc Error: Unicode char 蟷ｴ (U+5E74) (inputenc) not set up for use with LaTeX.

エラー: Failed to compile 雛形Rmd.tex. See 雛形Rmd.log for more info.
実行が停止されました

どうやら、日本語（Unicode）処理ができないらしい。

4.原因

PDF文書を指定すると、デフォルトのTexとして
(1) windows : MikTex
(2) OSX : MacTex
(3) Linux : TeX Live
のエンジンが使用されるため。
TeX Wikiによれば、
「MiKTeX は Microsoft Windwos 向けの TeX のディストリビューションです． TeX Live と並んで国際的に広く使われていますが，日本語 pTeX が含まれていません．特別な理由がない限り TeX Live または W32TeX の利用をおすすめします．」
とのこと。

5.対策

YAMLヘッダーに明示的に、latex_engine として、UTF-8 ベースの TeX を指定する必要があるようです。

output:
  pdf_document:
    latex_engine: xelatex

output:

pdf_document:

latex_engine: xelatex

文書全体を以下に示します。

---
title: "Diamond Size"
author: "Hogehuga"
date: "2018年7月12日"
output:
  pdf_document:
    latex_engine: xelatex
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

---

title: "Diamond Size"

author: "Hogehuga"

date: "2018年7月12日"

output:

pdf_document:

latex_engine: xelatex

---

```{r setup, include=FALSE}

knitr::opts_chunk$set(echo = TRUE)

```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

```{r cars}

summary(cars)

```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}

plot(pressure)

```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

6.最後に

Rmdファイルに日本語名を使用したら、見事にコケました
windows上では、日本語のファイル名は使用できないようですので注意してください。
（追）
Linux(Ubuntu18.04)では、日本語ファイル名が問題なく使用できました。

追伸

再テストの結果、上記のR Markdown が一切動作しなくなりました。
Windows 上も Virtual Box の Ubuntu 上でも！
思い当たる点は、
(1) windows – 角藤版を最新にしようとインストーラを起動したこと。結果的には、何もせずキャンセルしたのだが・・・・
(2) Ubuntu – Tex Live のtlmgr が動かないので、その周りの更新等を行ったこと。

一旦、w32Tex(Windows)とTexLive(Ubuntu)を削除し、w32Texは再インストールした。
（Tex Live の再インストールは保留中）
それでも、結果は変わらず。
エラーログからは、エラー内容が全く読み取れず、対策の打ちようがない。
思い悩んだ挙句、思いついたのが「latex_engine」の変更。
「TeXworks」のタイプセットに表示されるものを指定してみよう！
① pdfplatex
指定不可。指定できるのは、pdflatex,lualatex,xelatex の何れかとのこと。
② pdflatex
しからばと、これを指定するも、想定通り Unicode 周りでエラー。
③ lualatex
万歳！問題なくPDFが出力される。
④ xelatex
念のために試してみたが、やはりエラーとなる。

結果として、私の現在の環境では「lualatex」を指定すれば良いようです。
注意
YAMLヘッダに「mainfont」を指定しないと、日本語が表示されないので、次の様に指定する必要があります。

---
title: "Diamond Size"
author: "Hogehuga"
date: "2018年7月12日"
output:
  pdf_document:
    latex_engine: lualatex
mainfont: Meiryo
---

---

title: "Diamond Size"

author: "Hogehuga"

date: "2018年7月12日"

output:

pdf_document:

latex_engine: lualatex

mainfont: Meiryo

---

なお、「Meiryo」の部分を「メイリオ」と指定することができませんでしたので、ご注意の程を！

R 起動コマンドの改善（windows編）

RGui を閉じる際に、毎回ワークスペースの保存有無を聞かれるが、答えはいつも[n」なのに・・・
「q(‘n’)」とするのも面倒だし。
こちらのPDF文書およびSlide Shareに、その解決策が記載されていました。
保存有無を問わないようにするには、次の何れかを指定します。

–save	ワークスペースを保存して終了
–no-save	ワークスペースを保存しないで終了

これを、R のインストール時に作成されたショートカットに設定します。
保存しない場合の設定は、次の通りです。
(1) ショートカットを右クリック、プロパティを開く。
(2) プロパティの「リンク先」を次の通り変更する。
（変更前）”C:\Program Files\R\R-3.5.0\bin\x64\Rgui.exe” –cd-to-userdocs
（変更後）”C:\Program Files\R\R-3.5.0\bin\x64\Rgui.exe” –cd-to-userdocs –no-save
（Rgui の場所は、自分の環境に合わせて変更してください。）
(3) 「OK」をクリックして、変更を保存する。

ubuntu 18.04 への R 3.5 のインストール

UBUNTU PACKAGES FOR Rからの引用。
手順は以下の通り。

/etc/opt/sources.listの編集

最新のR 3.5パッケージを入手するため、/etc/apt/sources.list の最下行に次のエントリを追加する。

deb https://cloud.r-project.org/bin/linux/ubuntu bionic-cran35/

1	deb https://cloud.r-project.org/bin/linux/ubuntu bionic-cran35/

追加は、vim でも gedit でも好きなエディタでよい。例えば、gedit なら

sudo gedit /etc/opt/sources.list

1	sudo gedit /etc/opt/sources.list

とし、上記コードを最下行にコピペし「保存」すればよい。
その際、何やらかんやらメッセージが出るが、ファイルは更新されているので無視してよい。

R のインストール

sudo apt-get update
sudo apt-get install r-base
sudo apt-get install r-base-dev

sudo apt-get update

sudo apt-get install r-base

sudo apt-get install r-base-dev

SpyderのUpdate

Anacondaのインストールと同時にインストールされた Spyder の Update 方法です。
pipを使用せず、condaを使用するよう促されますので、次の通りコマンドラインから入力します。

conda update conda  # condaのupdate
conda update spyder # spyderのupdate

1 2	conda update conda # condaのupdate conda update spyder # spyderのupdate

デスクトップ・ショートカットの作成

年を取ってくると、折角インストールしたものの名前をすぐ忘れてしまう。
困ったものだ。
Windowsなら、デスクトップにショーカットアイコンをずらずら並べれておけば、名前を忘れる心配もないのだが、Ubuntu はそうもいかない。（注：未だ window 7 を使っていますもので・・・）
物よっては、デスクトップ左下隅のアイコンをクリックすればアプリケーションがアイコンで表示されるものもあるが、anaconda 関連のアプリはそれもダメで（何故なんだろう）、ターミナルからコマンドを叩かなければ実行できない！！！。

その様な訳で、どうしてもデスクトップ・ショートカットが必要なのです。
色々調べた結果、一番簡単な Ububtu 18.04 におけるデスクトップ・ショートカットの作成方法を、あくまで備忘録として以下に書き留めておきます。
詳しくは、こちらを見て下さい。

ここでは、マニュアルで作成するよりも簡単に作成できる、gnome-desktop-item-editを使用します。

1. gnome-desktop-item-edit のインストール

先ずは、gnome-desktop-item-edit をインストールします。

$ sudo apt-get install --no-install-recommends gnome-panel

1	$ sudo apt-get install --no-install-recommends gnome-panel

2. ランチャーの作成

デスクトップ・ショートカット・ランチャーを作成するため、次の linux コマンドを実行し、図に示すような必要事項を入力します。
（図では、”anaconda-navigator” を例として使用しています。）

$ gnome-desktop-item-edit ~/デスクトップ/ --create-new

1	$ gnome-desktop-item-edit ~/デスクトップ/ --create-new

最後に、OKを押すと、”anaconda-navigator.desktop” というファイルが “~/デスクトップ/” に作成されます。

動作確認

この段階で、デスクトップのショートカットが出来ているはずですので、それをダブルクリックします。
1回目の実行時には警告が出ますが、無視して実行すれば、次回以降このメッセージは表示されなくなります。

都道府県境界データの取得

地図描画に使用する都道府県境界データ(ShapeFile)は、次の2つのサイトから取得できる。

1. 国土地理院

(1) GIS ホームページ
(2) データ形式：GML(JPGIS2.1)シェープファイル・・・デフォルトで選択されている
　　　→ 2.政策区域の行政区域 を選択
(3) データダウンロードの画面が表示されるので、必要な全国、または都道府県を選択して、「次へ」をクリック
(4) その後、測量した年度を指定し、アンケートに答え、利用約款に同意することでダウンロードが可能になる。

2. e-Stat（政府統計の総合窓口）

(1) e-Stat ホームページ
(2) トップメニューの「地図で見る」をクリック→「境界データダウンロード」
(3) 「小地域」→「国勢調査」→「2015年」（2015,2010,2005,2000年のいずれか）
(4) 「町丁・字等別」→「世界測地系緯度経度・Shape形式」
(5) 都道府県選択画面が表示されるので、必要なデータをダウンロードする

日	月	火	水	木	金	土
« 8月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

【js ライブラリの取得】

【実行サンプル】

【改善 その1】

【改善 その2】

【改善 その3】

【サンプル集】

TFO Graphviz 使用方法

手順

1.インストーラのダウンロード

2.インストーラによる TeXlive のインストール

3.シンボリックリンクの作成

動作確認

(1) TeX 文書

(2) R Markdown

latex_engine について

（参考サイト）

1.環境

2.R Markdown

3.結果

4.原因

5.対策

6.最後に

追伸

/etc/opt/sources.listの編集

R のインストール

1. gnome-desktop-item-edit のインストール

2. ランチャーの作成

動作確認

1. 国土地理院

2. e-Stat（政府統計の総合窓口）

【改善その1】

【改善その2】

【改善その3】