Javascriptの統計ライブラリ jStatについて

jStat (http://www.jstat.org/) とはJavascriptでMATLABやRのような処理をするためのライブラリです。
(同名のjvm統計データ監視ツールとは関係ないです)

http://www.readwriteweb.com/hack/2011/03/jstat-its-like-r-for-javascript.php
でも紹介されてます。
R開発者のEd Borasky氏によると、これからはJavascriptでビジュアライズするのがトレンドらしいです。

というわけでちょっと遊んでみました。

準備

jStatは以下のものに依存してるけど、http://www.jstat.org/download から依存ライブラリをまとめてパッケージにしたものがダウンロードできるので特になにもしなくてOK。

• jQuery - version 1.4.4+ (http://code.jquery.com/jquery-1.4.4.min.js)
• jQuery UI - version 1.8.9+ (http://jqueryui.com/download/)
• flot - version 0.6+ (http://code.google.com/p/flot/downloads/detail?name=flot-0.6.zip&can=2&q=)

Bundleをダウンロードして(jstat-1.0.0.zip) 解凍すると、デモがindex.htmlにあるのでそれをブラウザで開くだけ。

デモ

試しにtwitterのpublic timelineに流れてるtweetの文字列長の正規分布のグラフをつくってみました。timelineがかわるとグラフも変わります。

ソースはこんなかんじです

$(document).ready(function() {
$.getJSON("public_timeline.php", function(json) {
            var x = new Array(json.length);
            var sum = 0;
            for (var i = 0; i < json.length; ++i) {
                x[i] = json[i]['text'].length;
                sum += x[i];
            }
            var mean = sum / json.length;
            var sum2 = 0;
            for (var i = 0; i < json.length; ++i) {
                sum2 += Math.pow((mean - x[i]), 2);
            }
            var variance = sum2 / json.length;
            var sd = Math.sqrt(variance);
            var distribution = jstat.dnorm(x, mean, sd);
            jstat.plot(x, distribution, {main: "tweet length distribution", type: "p"});
        });
});

本家サイトにデモがあるのでそっちもみると雰囲気がわかると思います http://www.jstat.org/demonstration

まとめ

• 導入が簡単でブラウザさえあればいけるので、RやMATLABにくらべると敷居が低い感じ。
• jQueryがつかえればUI的な面で有利
• ブラウザでRを使いたい場合はRStudio ( http://www.rstudio.org/ ) とかもあるけど、RStudioは完全に開発者向けなのに対して、jStatはリアルタイムに集計結果を一般ユーザに見せたい、みたいなシチュエーションで重宝しそう

以下気になる点

• まだドキュメントがない
• Javascriptで実装されてるので複雑なことをやるにはちょっと非力かも??

JetpackでFirefoxを拡張

Firefoxの拡張が簡単にできてしまうJetpackというものを試してみました。

https://jetpack.mozillalabs.com/

Jetpackをインストールすると、about:jetpackというページにアクセスできるようになります。
このページから、

• インストール済みのjetpackスクリプトの管理ページ
• 開発用のコンソール
• メモリ使用量の確認
• チュートリアル
• APIリファレンス（現状動いてないっぽい）
  

などが参照できるので楽に開発ができそうです。
jQueryが組み込みなのも助かります。

とりあえずチュートリアル通りにやればちゃんと動きます。
やり方はhttp://d.hatena.ne.jp/amachang/20090521/1242884854
でも紹介されてます。

まだあまり数は多くないようですがギャラリーを見れば大体どんなことができるかわかります。
http://jetpackgallery.mozillalabs.com/

ちなみにjetpackで作ったスクリプトはjetpackをインストールしないと使えません。
firefox3.6に組み込まれたのかと思いきや、どうやらそれはまだのようです。
本格的に使われるようになるにはもうちょっと時間がかかりそうな気がしてきたので、しばらく様子見です。

jQueryプラグインjTemplatesのHTMLエンティティ変換処理について

Javascriptのテンプレートエンジンっぽいものはいくつかあるみたいですが、今回はjQueryプラグインのjTemplatesを使ってみてちょっとはまったところをメモしておきます。

Javascriptのテンプレートエンジンについてはこちらでまとめられています。
http://tanarky.blogspot.com/2009/11/javascript-template-engines.html

jTemplatesの本家ページ
http://jtemplates.tpython.com/


試しにYahooのAPIを叩いてみます。
サンプルのソースコードは以下の通り

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jtemplates.tpython.com/jTemplates/jquery-jtemplates.js"></script>
<div id="test_result"></div>
<script type="text/javascript">
jQuery(function(){
    var appid =
        jQuery.ajax({
                   url: "http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch",
                   data: {
                       "appid": "cPvQ.eCxg67GFHywsAFH2KW2bVkOlYSz_pBz9.V3sOefgLF09GM8gJw8PJHRqII-",
                       "query": "amp",
                       "hits": 5
                   },
                   dataType: "jsonp",
                   cache: false,
                   error: function(data, status) {
                       alert(status);
                   },
                   success: function(data, status) {
                       jQuery("#test_result").setTemplate("<table id=\"dataTable\" border=\"1\">" +
                                                "{#foreach $T as item begin=2 count=5}" +
                                                "<tr><td><a href={$T.item.Url}>{$T.item.Name}</a></td>" +
                                                "<td><img src={$T.item.Image.Small} /></td></tr>" +
                                                "{#/for}" +
                                                "</table>");
                       jQuery("#test_result").processTemplate(data.ResultSet[0].Result);
                   }
               });
});
</script>

これを実際に実行するとこんな感じになります。

でもこれだと&がそのまま残ってしまってしまってます。
おかしいなーと思ってjTemplatesのソースを見てみたら、案の定HTMLエンティティを変換している部分がありました

/**
         * Replace chars &, >, <, ", ' with html entities.
         * To disable function set settings: filter_data=false, filter_params=false
         * @param {string} string
         * @return {string}
         * @static
         * @memberOf TemplateUtils
         */
        TemplateUtils.escapeHTML = function(txt) {
                return txt.replace(/&/g,'&').replace(/>/g,'>').replace(/</g,'<').replace(/"/g,'"').replace(/'/g,''\
');

ソースをたどっていくと、どうやらsetTemplateするときにオプションで設定できることが分かりました。

/**
         * Create new template from string s.
         * @name Template
         * @class A template or multitemplate.
         * @param {string} s A template string (like: "Text: {$T.txt}.").
         * @param {array} [includes] Array of included templates.
         * @param {object} [settings] Settings.
         * @config {boolean} [disallow_functions] Do not allow use function in data (default: true).
         * @config {boolean} [filter_data] Enable filter data using escapeHTML (default: true).
         * @config {boolean} [filter_params] Enable filter parameters using escapeHTML (default: false).
         * @config {boolean} [runnable_functions] Automatically run function (from data) inside {} [default: false].
         * @config {boolean} [clone_data] Clone input data [default: true]
         * @config {boolean} [clone_params] Clone input parameters [default: true]
         * @config {Function} [f_cloneData] Function using to data cloning
         * @config {Function} [f_escapeString] Function using to escape strings
         * @augments BaseNode
         */
        var Template = function(s, includes, settings) {
  

（※setはTemplateのラッパーメソッド）

というわけで、setTemplateの第二引数にundefined, 第三引数に{filter_data : false}を与えてやるとうまくエンティティが文字として表示されました。

要するに、jTemplateに渡されるデータの中にHTMLエンティティが含まれているとjTemplateが気を利かしてエンコードしてくれるけど、すでにエンコード済みのデータを渡すと二重にエンコードすることになって、結果として&みたいなことになってしまいます。
jTemplatesはエンコードするかどうかのオプションを引数で渡すことができるので、渡すデータによって使い分ける必要がありそうです。