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

賃貸暮らしのわが家の地震対策【揺れから命を守る編】 以前のブログでも記載した、防災の優先順位に基づいて対策を進めています。まだ手をつけられていない部分もありますが、ある程度まとまってきたのでざっくりとご紹介していきます。 優先順位別に改善していっているため、今回は主に地震の揺れ対策がメインになります。…

概要 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'); // 移動する要素

今回はCSSのコピペで使える引用ボックスデザインのサンプルを30個作ってみました。引用タグ（blockquote）のデザインをサクッと変えることができます。どれも画像は使わず、HTMLとCSSだけで表示することができます。ブログやWebサイト運営者の方は、是非ご利用くださいませ。 使い方 デザインを紹介する前に、使い方を簡単に説明しておきます。 CSSをコピーして貼付け

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

前回、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 上に置きました。 作り方とかは以下

This network of character co-occurence in Les Misérables is positioned using D3’s force layout. Color represents arbitrary clusters in the data. Drag nodes below to better understand connections. See also a disconnected graph, a canvas version, and compare to WebCoLa. Data: Stanford Graph Base