戯言

つらつらと気づいたことを書いていきます。人狼とか。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

dc.jsの使い方01 とりあえずグラフを表示する



グラフを表示するJavascriptのライブラリをいくつか使ってみた中で、
機能も豊富で、初見でのインパクトが強かった dc.js について、
わかる範囲で使い方を紹介していきます。

dc.jsで、とりあえずグラフを表示するコードは、こんな感じになります。
これをベースに、さまざまな変更、追加をしながら、説明していこうと思います。

<html>
<head>
<link rel="stylesheet" type="text/css" href="js/dc.css"/>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
</head>
<body>
<div id="chart1"></div>

<script type="text/javascript">
data = [
		{"x":1, "y":5}
		,{"x":2, "y":8}
		,{"x":3, "y":6}
		,{"x":4, "y":1}
		,{"x":5, "y":7}
	];

	var cf = crossfilter(data);

	var xx = cf.dimension(function(d) { return d.x; });

	var yy = xx.group().reduceSum(function(d){ return d.y; });

	var graph = dc.lineChart("#chart1")
	.dimension(xx)
	.group(yy)
	.x(d3.scale.linear().domain([0, 6]))
	.render();
</script>
</body>
</html>

dcjs01.png
3行:デフォルトで用意されているcssを読み込みます。
4~6行:dc.jsと、dc.jsが利用しているcrossfilter、d3、これら3つの読み込みは必須です。

20行:グラフ用のデータをcrossfilter形式にします。crossfilterはデータをグループ化や集計、フィルリングなどできるライブラリで、dc.jsではcrossfilter形式でデータを扱います。

22行:x軸の定義です。JSONデータの各xの値を取り出しています。

24行:y軸の定義です。group()とreduceSum()という関数が出てきていますが、これの説明は後述しますが、各yの値を取り出しているのは伝わるかと思います。

26~30行:描画します。x軸、y軸に先ほどの定義を設定し、x軸を0から6の範囲とし、描画しています。

最低限グラフを書くのに必要なコードはこんな感じになります。

どうでしょうか。短いコードでさくっと書けると感じませんか?
まあ、細かい部分を弄ろうとすると、結構ハマるのですが…。

グラフの種類の変更


26行目の lineChart を barChart に変えると、こうなります。

dcjs02.png
グラフの種類の変更は、1か所変えるだけです。
ですが、グラフの種類ごとに、用意されている関数が異なるので、例えば線グラフ専用の関数を棒グラフで使うようなことはできません。dimension()、group()、x() は、両グラフで共通なので、問題なく利用できています。

他にもさまざまなグラフが用意されているので、公式のサンプルを見てみてください。


グルーピング


先ほどのグラフのy軸の定義で、group()が出てきました。これを説明します。
まず、このgroup()はdc.jsでなく、crossfilterの機能です。名前のとおりグルーピングをします。
ここでいうグルーピングとは、dimension()が同じデータを同一グループとして扱うという意味です。
上の例では、dimension()の返り値はd.xなので、x値が同じデータを同一グループとして扱います。
x値が全て異なる値だったので、グルーピングの影響がなく、わかりづらくなっていますが、
例えば、次のようにデータを一つ追加するとわかりやすくなります。
data = [
		{"x":1, "y":5}
		,{"x":2, "y":8}
		,{"x":3, "y":6}
		,{"x":4, "y":1}
		,{"x":5, "y":7}
		,{"x":5, "y":3}  // 追加
	];
追加したデータのxの値は1つ前のデータと同じ5です。
これでグラフを書くとこうなります。

dcjs03.png
まず、22行目の定義では、x値を返り値としています。
なので、x値が同じである5番目,6番目は同じ値を返します。
で、24行目のy軸の定義で、groupされるので、5という同じ値である5,6行目のデータは同一グループとして扱われます。

その同一グループのデータをどうするかというと、reduceSum()しています。
sumという名前のとおり合計します。
合計に使う中身の値は、d.yですね。なので、ここでは7と3を合計することになります。

グルーピングした結果をどうするか


reduceSum()ではグルーピングした値で合計値を求めましたが、他にも要素数を求めるreduceCount()などがあります。

24行目を次のようにすると、グラフはこうなります。

var yy = xx.group().reduceCount();

dcjs04.png
単純なグラフであればこれで充分ですが、reduce()を使えば任意の計算式を関数を定義できます。
例えば、平均値のグラフを書くような場合は、reduce()を使って平均値を計算する関数を定義する必要があります。



TortoiseSVNで一旦実施したコミットを、前のリビジョンに戻すのではなく、取り消して戻す


一旦はコミットしたものの、コミットした内容に問題があり、
以前のリビジョンに戻すことって、ありますよね。

このとき、リビジョン指定で戻した後、
戻したソースに別の修正を加えてコミットしようとすると、
競合が発生します。

おそらく、前のリビジョンに戻す機能は、
以前のリビジョンのソース一式を簡単に見たり、Export等してから、
別の修正などは加えずに、また最新リビジョンへ戻すということが前提になっているようです。

ソースに別の変更を加えるようなときは、あらかじめブランチを作成しろ、ということでしょうが、
ブランチを作成するまでもないようなこともありますよね。


で、取り消しの方法ですが、

チェックアウト先のフォルダから、
「TortoiseSVN」 → 「ログを表示」 で、
表示するリビジョンの一覧から、取り消したいリビジョンを選択して、
「このリビジョンにおける変更を取り消す」

でできます。

「このリビジョンにおける変更を取り消す」のメニューですが、
チェックアウト先のフォルダから、ログ表示をしないと出てきません。

単にTortoiseSVNのログを表示しても、取り消しのメニューは出ないので、
混乱してしまいました。

取り消し後も、その取り消しをコミットしないと反映されません。
コミットを見落としがちなのでご注意を。


通常eclipseと連携してsvnを使っているという方でも、
TortoiseSVNから操作すれば、取り消すことができます。
残念ながら、eclipseからコミットを取り消すメニューは見つけられませんでした。


Solrの起動時に、org.apache.solr.common.SolrException: undefined field text が発生


Solrの起動時に、org.apache.solr.common.SolrException: undefined field text と言われる

標準の solrconfig.xml をコピーし、必要箇所だけ修正して使っている場合、
<str name="df">text</str> という設定が何か所かあります。

メッセージの出力原因は、text という存在しないフィールドを設定しているためなので、
実在するフィールド名に変えてしまえば、エラーは出なくなります。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。