graphvizの出力ファイルの解像度を変更

正解: graphオプションにdpi=300などと指定する。 これで、以下のように変換してあげれば、高解像度化されたPNGが保存されます。 実行時にgraphオプションを追加できる-Gを使ってもいいみたいです。 これだけのことなのに、Googleで「graphviz 出力サイズ 変更」で検索しても、長々と関係ない話を書きなぐったノイズサイトばっかりでててきて、時間をつかってしまった。ここ数年、体感的なGoogleの検索結果の精度が悪くなっている気がして残念。ぼくだけかもしれませんが。 「graphviz resolution」で英語のページを検索すると、Stackoverflowの「How do I…

flowchart.jsでテキストから綺麗なフローチャートを作図

flowchart.jsを使うと、テキストで指定したノードの形状やテキストラベル、ノード同士の接続をテキスト形式で記述すると、きれいなフローチャートが自動的に作図されます。VisioやPowerPointを使った煩雑な作図作業から解放されましょう。gistにサンプルを掲載してみました。 テキスト形式でフローチャートを作図する例 – flowchart.js サンプルの表示のしかた raphael-min.jsとflowchart-latest.jsをダウンロードして、同じフォルダに置いてからHTMLファイルをブラウザで開いてみてください。 gist上のコード

Plotly.jsのサンプル(誤差棒付き時系列データ)

JavascriptのプロットライブラリPlotly.jsがオープンソース化された(オフィシャルの発表; 日本語記事)ので、雷雲ガンマ線観測実験のデータをブラウザ上で表示するために使ってみました(以前記事にした最近流行りのプロットライブラリd3.jsを使うこと考えましたが、簡単なことをしたい時には大げさすぎるので今回はPlotly.jsです)。 プロットしたいデータはガンマ線/宇宙線の5秒毎のカウント数の時系列です。元データはROOT形式ですが、サーバ側でCSVに変換して、Plotly(というか、その内部で動いているd3.js)が読めるようにしています。 CSVデータは以下のように、時刻、カウントレート、統計誤差が並んでいます。 プロット結果と使用したCSVファイルは以下から見れます。 plotCSVTimeSeriesDataWithErrorBar.html (誤差棒付きのプロット) 20151205_083054_ch0.csv (ガンマ線/宇宙線の時系列データ) ソースコード データを読み込んでX/Y/errorYを準備し、レイアウト指定情報を作成して最後にプロットを作成するところで、 のように、configurationとして を追加すると、プロットにマウスをホバーした時に表示されるメニューバー(アイコンが並んだツールバー;…

【d3.js】折れ線グラフとアニメーションのサンプル

天体データ解析や人工衛星の試験のデータを可視化する際に、最近はやりのvisuallization framework d3.jsが使えるといいなと前々から思っていたのですが、なかなか勉強できていませんでした。せっかく買った日本語の解説本はあまりにヒドいクオリティだったので、Oreillyの半額セールで購入した以下の本で勉強し直しました。 [tmkm-amazon]B00G8YAV06[/tmkm-amazon] こちらは概念の解説をしてから具体的な例を見せてくれるので、「エンジニアのための データ可視化[実践]入門 〜 D3.jsによるWebの可視化」に比べると親切だし、d3.jsの設計コンセプトをよりよく理解できました。 座学の後は、まずは自分で動かしてみるために、マーカーと値ラベルつきの折れ線グラフを作ってみました(d3jsLinePlotSample)。今後の参考として、以下も入れてあります。 クリックによる軸の表示範囲変更アニメーション 表示しているSVGソースコードのダンプ ソースコード(d3jsLinePlotSample.html)はgithubにおいてあります。…