今回はVisual Studio Code の拡張"Markdown Preview Enhanced"を使用して文章中にグラフを挿入してみたいと思います。 レポートの作成の際に文書とグラフを単一ファイルで管理できるので色々便利です。
gnuplotのダウンロード
昔からあるグラフ描画エンジンです。以前はOctaveの描画に使用されていました。 ホームページにアクセスしてインストーラーをダウンロードします。 www.gnuplot.info
インストーラーを使います。実行ファイルにPATHを通すようにします。
Markdown Preview Enhanced
Markdownで数式や図が表示できHTML、PDF他で出力できる便利なVisual Studio Codeの拡張です。 ドキュメントは↓。これはすでにVisual Studio Codeにインストールされているものとします。 shd101wyy.github.io
Markdown文書内でgnuplotを実行する。
まずはVisual Studio Code内でMarkdownのコードチャンクを実行できるようにMarkdown Preview Enhancedの設定を変更します。
ファイル -> 設定 -> 基本設定から設定画面に入りMarkdown Preview Enhancedの設定項目のうちEnable Script Executionにチェックを入れます。
このあとVisual Studio Codeを再起動し、Markdownで以下を記述したファイルを作成してみます。
# gnuplotで描画してみます
とりあえずチュートリアルに載っている簡単なグラフから
~~~gnuplot {cmd=true output="html"}
set terminal svg
set title "Simple Plots" font ",20"
set key left box
set samples 50
set style data points
plot [-10:10] sin(x),atan(x),cos(atan(x))
~~~
となりにはプレビューが表示されますが、まだグラフは描画されていないはずです。
このあと、左のMarkdownファイルのどこかの行にカーソルを合わせた状態でCtrl + Shift + Enterを押すと以下のようにコードチャンク内の全てのコードが実行され、グラフが描画されます。
なお、コードチャンクの中を非表示にするにはhide=trueを追加します。
# gnuplotで描画してみます
とりあえずチュートリアルに載っている簡単なグラフから
~~~gnuplot {cmd=true hide=true output="html"}
set terminal svg
set title "Simple Plots" font ",20"
set key left box
set samples 50
set style data points
plot [-10:10] sin(x),atan(x),cos(atan(x))
~~~
最後に、以下のgnuplotのDemoから見た目良さそうなグラフを描画してみます。
# gnuplotで描画してみます
DEMOからきれいなグラフ
~~~gnuplot {cmd=true }
set terminal svg
unset border
set key title "splot for [scan=1:*] 'whale.dat' index scan" center
set key bmargin center horizontal Right noreverse enhanced autotitle nobox
set key noinvert samplen 0.6 spacing 1 width 0 height 0
set key maxcolumns 0 maxrows 6
set style increment default
set view 38, 341, 1, 1
unset xtics
unset ytics
unset ztics
set title "Iteration over all available data in a file"
set xrange [ * : * ] noreverse writeback
set x2range [ * : * ] noreverse writeback
set yrange [ * : * ] noreverse writeback
set y2range [ * : * ] noreverse writeback
set zrange [ * : * ] noreverse writeback
set cbrange [ * : * ] noreverse writeback
set rrange [ * : * ] noreverse writeback
set lmargin at screen 0.09
set rmargin at screen 0.9
splot for [i=1:*] "whale.dat" index i title sprintf("scan %d",i) with lines
~~~
# gnuplotで描画してみます
DEMOからきれいなグラフ
~~~gnuplot {cmd=true hide=true }
set terminal svg
set title "fence plot constructed with separate parametric surfaces"
sinc(u,v) = sin(sqrt(u**2+v**2)) / sqrt(u**2+v**2)
set xrange [-5:5]; set yrange [-5:5]
set xtics offset 0,-1
set ytics offset 0,-1
set zrange [-1:1]
set format z "%.1f"
set arrow 1 from 5,-5,-1.2 to 5,5,-1.2 lt -1
set label 1 "increasing v" at 6,0,-1
set arrow 2 from 5,6,-1 to 5,5,-1 lt -1
set label 2 "u=0" at 5,6.5,-1
set arrow 3 from 5,6,sinc(5,5) to 5,5,sinc(5,5) lt -1
set label 3 "u=1" at 5,6.5,sinc(5,5)
set parametric
set hidden3d offset 0 # front/back coloring makes no sense for fenceplot #
set isosamples 2,33
array U[10]
u=-5; du=(4.99-(-4.99))/9
do for [i=1:10] { U[i] = u + i * du }
set view 70, 25
set urange [0:1]
set vrange [-4.99:4.99]
splot for [i=1:10] U[i], v, (u<0.5) ? -1 : sinc(U[i],v) notitle
~~~
# gnuplotで描画してみます
DEMOからきれいなグラフ
~~~gnuplot {cmd=true hide=true }
set terminal svg
nsamp = 3000
set print $viol1
do for [i=1:nsamp] {
y = (i%4 == 0) ? 300. + 70.*invnorm(rand(0)) \
: (i%4 == 1) ? 400. + 10.*invnorm(rand(0)) \
: 120. + 40.*invnorm(rand(0))
print sprintf(" 35.0 %8.5g", y)
}
unset print
set print $viol2
do for [i=1:nsamp] {
y = (i%4 == 0) ? 300. + 70.*invnorm(rand(0)) \
: (i%4 == 1) ? 250. + 10.*invnorm(rand(0)) \
: 70. + 20.*invnorm(rand(0))
print sprintf(" 34.0 %8.5g", y)
}
unset print
#
set border 2
set xrange [33:36]
set xtics ("A" 34, "B" 35)
set xtics nomirror scale 0
set ytics nomirror rangelimited
unset key
set jitter overlap first 2
set title font ",15"
set title "swarm jitter with a large number of points\n approximates a violin plot"
set style data points
set linetype 9 lc "#80bbaa44" ps 0.5 pt 5
set linetype 10 lc "#8033bbbb" ps 0.5 pt 5
plot $viol1 lt 9, $viol2 lt 10
~~~
注意点は以下です。
- コードチャンク中に
set terminal svgを入れないとエラーになる。 - コードチャンク中にコメント
##~が入っているとエラーになる
これでMarkdownで書いたレポートに用意にグラフが挿入できるようになります。
今回はここまでにします。