組込みソフトウェアを考える。状態マシン図、プロダクトラインも考える。HaskellとElixir大好き、Rubyも好き。島敏博のブログ。 無向グラフ、有向グラフ作成ツール Graphviz http://www.graphviz.org/ のサンプル集です。 Graphvizをインストールして、 以下のようなテキストをいれたdotファイルを作り、 コマンドラインから、 dot -Tpng nagano.dot -o nagano.png などと打てば、画像ファイルができあがります。 位置の微調整とかできませんが、てっとりばやく 説明図面が作りたいときには重宝します。 路線図やプロセスフローダイヤグラム、関数呼び出し関係図、データ構造の図などが簡単に描けます。 ただいま少しずつサンプルを増やしています。 木が2本の無向グラフ。辺にラベルがついている例。 日本語を使いたいときはUTF-8でdo
Graphvizという作図ツールを試してみた。 dot言語でプログラムすると図が出来上がる。 オモシロイ。 Install いつものごとくapt-get。 sudo apt-get install graphviz そして書いてみた まずは書いてみる。 digraph sample1 { node1 -> node2; node1 -> node3; node2 -> node3; node3 -> node4; }で、PNGファイルに変換(コンパイル?)。 % dot -Tpng sample1.dot -o sample1.png そうすると、こんな感じの図が出来上がる。 横向きにもできる。 digraph sample { graph [rankdir = LR]; node1 -> node2; node1 -> node3; node2 -> node3; node3 -> no
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
これだけのことなのに、Googleで「graphviz 出力サイズ 変更」で検索しても、長々と関係ない話を書きなぐったノイズサイトばっかりでててきて、時間をつかってしまった。ここ数年、体感的なGoogleの検索結果の精度が悪くなっている気がして残念。ぼくだけかもしれませんが。 「graphviz resolution」で英語のページを検索すると、Stackoverflowの「How do I set the resolution when converting dot files (graphviz) to images?」が出てきて、上記と同じ回答がでています。でも、Stackoverflowって、正解がどこに書いてあるかわかりづらいんだよなぁ。 [tmkm-amazon]5511736244[/tmkm-amazon]
(追記:2014-3-3) Gvizについてのまとめ頁を作りました。 Gvizの目次 - Rubyの世界からGraphvizの世界にこんにちは! Graphvizには複数のレイアウトフォーマットがありますが、どれも名前が変わっていて生成されるレイアウトを名前から想像することが困難です。幾つかのレイアウトの説明はGraphvizのサイトに書いてあるのですが、それを読んでもやっぱりピンと来ません。その結果、毎度グラフを作るたびにレイアウトを試行錯誤することになります。 でも、レイアウトはやっぱりサンプルを見るのが一番手っ取り早いですよね。 そんなわけで… Graphvizのレイアウトサンプルを作って、ここに貼っておくことにします。サンプルの作成にはいつもの様にGvizを使います。ちなみにGviz0.1.2では、gvizコマンドの-mオプションでlayouts一覧を表示できるようになりました。
概要 Graphvizはdot言語で記述されたグラフ構造を任意のフォーマットの画像ファイルへ出力するツールです。 グラフ構造はdot言語でdotファイルというプレーンテキストに記述します。 この記事はdot言語でグラフを書く方法を簡単にまとめたものです。 環境 下記の環境で動作確認を行いました。 Windows7 (64bit) [Graphviz] (http://www.graphviz.org/) 2.38 参考 下記のサイトを参考にさせて頂きました。 [Graphviz - Documentation] (http://www.graphviz.org/documentation/) [Graphviz - Gallery] (http://www.graphviz.org/gallery/) [Gvizの目次 - Rubyの世界からGraphvizの世界にこんにちは!] (htt
スマートフォン向けにスワイプ処理を実装する機会があったのでメモ。こちらの記事を参考にさせていただきました。 サンプルコード HTML <div id="wrap"> <div class="box"></div> </div> .boxをスワイプで動かすようにします。 CSS #wrap { position: relative; width: 100%; max-width: 318px; } .box { position: absolute; top: 0; left: 0; width: 600px; } 今回は.boxを横に移動させるので、スワイプした距離や方向に応じてleftの値を変更します。 JavaScript $(function() { // 移動する要素の親要素(スワイプ後の位置を確認するのに使用) var swWrap = $('#wrap'); // 移動する要素
前回、D3.jsのForce Layoutで簡単なネットワークを描いてみた。 D3.jsのForce Layout (力学モデルでグラフ描画するレイアウト)を動かしてみた - カタカタブログ そのときは、Force Layoutの各種パラメータを全てデフォルトのまま使っていたが、実際は描画したいネットワーク図の特性に応じて、最適なものにチューニングできると望ましい。なので、パラメータの意味を調べつつ、動きを検証してみた。なお、パラメータの説明は公式サイトにもある。 公式サイト: https://github.com/mbostock/d3/wiki/Force-Layout サンプルデータと標準の場合 テストデータは以下のように。前回よりはノード数を増やしている。 var nodes = [ {id:0, label:"A"}, {id:1, label:"B"}, {id:2, labe
概要 D3.js で Force layout を動かしてみる。 理解用に簡単なサンプルを作る。 その他、オプションを試してみる。 ラベル表示と矢印を追加。 情報 D3.js って…? 日本語サイト D3 = Data Driven Document データに基づいてドキュメント (要は DOM) を操作するための Javascriptライブラリ。 svg を使った華麗なグラフのデモが目立つが、DOM操作のライブラリとしても優れている (と、使ってみて思った)。 Force layout force = 『力』とか『エネルギー』とか。 スターウォーズのアレ?? 要素同士が影響し合っている状態を node (円) と link (線) で表している。 説明よりもサンプル見た方が早い。 Force-Directed Graph 作ったサンプル jsdo.it 上に置きました。 作り方とかは以下
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out. Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R. Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects ar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く