2014-02-19

D3.jsでパーティションレイアウト

D3.js JavaScript

D3.jsには幾つかのレイアウト（テンプレート的な？）というものがあります。

パッと見面白いものから

Fource：円と線をつなぐ方のグラフ、物理演算もしてくれる
Stack：体積グラフ
Pie：円グラフ
Pack：丸の中に丸がある、階層構造につかわれる

など12個（2014年2月19日のところ）のレイアウトを使うことができます。それぞれのドキュメントやレイアウトを使用したサンプルも豊富にあります（英語ですが）。

レイアウトを使用しても変わらずsvgのアニメーションなどをすることができます。ドラッグしてパーティクルを振り回したり選択したデータごとに遷移する体積グラフなど、やりたいことにあったレイアウトがあれば便利だなぁーと思いました。

あと、Partitionという階層構造を表す円グラフを使って自称カレンダーのようなものをつくってみました。年には月が12個あり、年には日が約30個あり〜という階層構造としてグラフを表示します。今年も今月も残り何％しかないのか〜というのを実感しちゃいます。あ、色のついてる部分と真ん中はクリックできます。
（ソースコード→farundorL/d3Calendar · GitHub）

2014-01-19

D3.jsで時計(2)

JavaScript D3.js

前回D3.jsでつくった時計のようなものに、アニメーションを追加してみました。

D3.jsのdata()を使うことでデータ（ここでは日付や時間など）とSVGの要素を結合することができます。とても適当な説明ですが、自分の場合は３つの小円という解説をみてイメージをつかみました。

結合することで、データにない要素があれば要素を削除(remove)、データにしかなければ要素を追加(append)することができます。

要素を追加するときに.transition()（遷移、変化的な）.attr("width", 10)（横幅の値を定める）とすると、ブロックがにゅっと追加されるようになります。

複数のパラメータを同時に遷移することもできるので、要素を削除するときにx,y,widthを変更し、秒ならば分、分なら時間、時間なら日のブロックに吸い込まれるようなアニメーションをつくることができます。

ちなみに追加や削除する以外のときも、要素の移動や変形をすることはできます。

それとD3.jsはSVGだけでなくdivやspanなどの要素も扱うことができます。

データを可視化した〜などのサンプルもbl.ocks.org - mbostockあたりに沢山あるので見てみると楽しめるとおもいます。

（ソースコード→farundorL/d3Clock at a814c4b36a… · GitHub）

2014-01-04

D3.jsで時計(1)

JavaScript D3.js

D3.jsをちょっと触ることがあったので、書き初めがてら簡単な時計をつくってみました

（iframeって便利）

時間毎にsvgの色を変えるだけなのでD3.js使う必要あるのかなと…

ここからいろいろ変えていく所存です

（ソースコード→farundorL/d3Clock at 1fe36d3199z… · GitHub）

2012-12-14

Linuxの環境変数PATHをいじっていて、lsを実行するとcommand not foundになってしまった。

linux

最初はPATHが何か詳しく知らず、こうすればいいんだよ！というのを見ながらいじってた。
今回をきっかけに少し調べてみた。
もし間違ったところがあれば、ぜひコメントお願いします。

PATHとは：簡単に言うと、楽にコマンドを実行するためにプログラムのある場所を設定するもの

確認方法：

 > echo $PATH

を実行するとPATHが表示される

設定方法：新しくパスを追加するには

 > export PATH="$PATH:~~new_path~~"

を実行する

 > export hoge=~~~

とすると環境変数hogeが設定できる

2012-09-14

Windows8で、ユーザ/Picturesにあるファイルを扱ったときのメモ

Metro C# Windows8

だらけきった夏休みの最後にWindowsRTアプリ?を作ろうとした。
asyncとかawaitとか初めて見てビビったり、MessageBoxがMessageDialogになってるーとか思いつつ英語のリファレンスを読みながらやった。

最初は今まで通り.Netで作れると思ってたが、そういえばWindowsRTアプリは.NetでなくWinRT APIだったことを思い出して挫けかけてた。

ちょっと躓いて英語を読んだところを3つメモ

ピクチャにある写真を月ごとにグループ分けする

// class.Windows.Storage.KnownFolders.PictureLibrary でピクチャのフォルダ内を参照できる
StorageFolder picFolder = KnownFolders.PicturesLibrary;

// 写真の保存された月ごとにファイルをわける
// ピクチャ内のいろんなフォルダに位置していてもわけてくれる
StorageFolderQueryResult picResult = 
    picFolder.CreateFolderQuery(CommonFolderQuery.GroupByMonth);

// あとはForeachで月わけにした写真を扱った

取得するファイルをフィルタリングする

// オプションを設定し、クエリを実行するときの引数として与える
QueryOptions option = new QueryOptions(CommonFolderQuery.GroupByMonth);
    option.FileTypeFilter.Add(".jpg");
    option.FileTypeFilter.Add(".png");
    option.FileTypeFilter.Add(".gif");
    option.FileTypeFilter.Add(".bmp");
StorageFolder picFolder = KnownFolders.PicturesLibrary;
StorageFolderQueryResult picResult = 
    picFolder.CreateFolderQueryWithOptions(option);
IReadOnlyList<StorageFolder> picList =
     await picResult.GetFoldersAsync();

アプリ以下に位置してない画像を表示する

// アプリ以下に位置してない画像ファイル
StorageFile localFile;
BitmapImage image = new BitmapImage();
// 読み込みのみで開く
using (var stream = (FileRandomAccessStream)await 
    localfile.OpenAsync(FileAccessMode.Read))
{
// ImageSourceとして渡したりした
image.SetSource(stream);
}