ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    arbor.jsの使い方調査

    このエントリーを含むはてなブックマーク はてなブックマーク - arbor.jsの使い方調査 あとで読む
    インクリメンタルサーチ(逐次検索)を視覚化したツールを使いたい。
    具体的には、住所やカテゴリーを入力するとき、データの木構造を動的に表示できるUIが欲しい。

    arbor.js

    最初、D3.jsで用意されてないか調べてみたが、ピッタリなのは、なかった。
    Webブラウザー上でツリーのグラフを表示する方法として、「arbor.js」というJavaScriptのライブラリーがあった。
    http://arborjs.org/

    arbor.jsの使い方を調べてみる。
    他にも似たようなJavaScriptのライブラリーはあるだろうか?



    via http://arborjs.org/introduction

    introduction
    紹介

    ABOUT ARBOR
    アーバーについて

    Arbor is a graph visualization library built with web workers and jQuery.
    アーバーは、web workersとjQueryを使って構築されたグラフの可視化ライブラリです。
    Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.
    あらゆるものを含むフレームワークになろうとするよりも、アーバーは、効率的で強制的なレイアウト・アルゴリズムを加えた、グラフ構成と画面の更新処理の抽象化を提供します。
    It leaves the actual screen-drawing to you.
    それはあなたに実際の画面描画を任せます。
    This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.
    これは、あなたがキャンバス、SVG、配置されるHTML要素と一緒に使えることを意味します;
    あなたのプロジェクトとパフォーマンスの要求に適した、あらゆる表示の実現法になります。

    As a result, the code you write with it can be focused on the things that make your project unique ? the graph data and your visual style ? rather than spending time on the physics math that makes the layouts possible.
    結果として、あなたがそれ(※アーバー)で記述したコードは、レイアウトを実現する物理数学に時間を費やすよりもむしろ、プロジェクトを独創的なもの―グラフデータとビジュアルスタイル―にすることに集中できます。

    INSTALLATION
    導入

    To use the particle system, get jQuery and add the file at lib/arbor.js to your path somewhere and include them in your HTML:
    パーティクルシステムを使用するには、jQueryを取得し、lib/arbor.jsにあるファイルを、パスのどこかに追加して、それらをHTMLに組み込んでください:
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/arbor.js"></script>

    If you want to let arbor handle realtime color and value tweens for you, include the arbor-tween.js file as well.
    アーバーがリアルタイムで色と値のトゥイーン(※中間補正)を処理できるようにしたい場合は、同様にarbor-tween.jsファイルを組み込んでください。
    this will add a pair of new tweening methods to the ParticleSystem object (see the docs to decide if this appeals to you or not).
    これはParticleSystemオブジェクトに新しいトゥイーンメソッドの1組を追加します。(これがあなたの好みに合うかどうか決定するためにドキュメントを参照してください。)
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/arbor.js"></script>
    <script src="path/to/arbor-tween.js"></script>

    GETTING STARTED
    はじめに

    The source distribution contains a sample project that demonstrates some of the basic idioms for working with the library to build a visualization.
    配布ソースには、可視化を実現するライブラリーを操作するための、基本的な用法のいくつかを示すサンプルプロジェクトが含まれています。
    More detailed documentation can be found in the reference section.
    より詳細な資料は、リファレンス部分に記載されています。
    In addition, the demos folder of the source distribution contains standalone versions of the demos on the site.
    さらに、配布ソースのdemosフォルダーには、サイトのデモのスタンドアローン版が含まれています。
    But since all of them use XHR to fetch their data, you'll still need to view them from an http server.
    しかし、それらの全てが、データを取得するためにXHR(※XMLHttpRequest)を使っているので、httpサーバーからそれらを表示する必要があります。
    If you don't have a copy of apache handy, use the demo-server.sh script to create a local server.
    もし、Apacheのコピーを手元に持っていない場合は、ローカルサーバーを作成するためにdemo-server.shスクリプトを使ってください。

    CONTRIBUTE
    貢献

    Code submissions are greatly appreciated and highly encouraged.
    コードの提案は、大いに歓迎され、高度に奨励されています。
    Please send pull requests with fixes, enhancements, etc. to samizdatco on github.
    github上のsamizdatco宛に、修正や拡張などのプルリクエストを送ってください。
    The oldschool may also pipe their diff -u output to gro.sjrobra@ofni.
    慣習で、gro.sjrobra@ofni宛に、それらのdiff -uの出力(※行の追加と削除を+、-の記号で出力)を引き渡すこともあります。

    LICENSE
    ライセンス

    Arbor is released under the MIT license.
    アーバーはMITライセンスの元に発表されています。

    COLOPHON
    奥付

    Arbor’s design is heavily influenced by Jeffrey Bernstein’s excellent Traer Physics library for Processing.
    アーバーの設計は、ジェフリー・バーンスタインの素晴らしいProcessing用Traer Physicsライブラリーに大変影響を受けています。
    In addition, much of the brute-force physics code was originally adapted from Dennis Hotson’s springy.js.
    また、総当りの物理学コードの多くは、もとはデニス・ホットソンのspringy.jsの改作でした。
    The Barnes-Hut n-body implementation is based on Tom Ventimiglia and Kevin Wayne’s vivid description of the algorithm.
    バーンズ-ハットによるn体の実装は、トム・ヴェンティミリアとケビン・ウェインのアルゴリズムの鮮やかな説明に基づいています。
    Thanks to all for such elegantly simple and comprehensible code.
    このようなエレガントでシンプルな、明快なコードのすべてに感謝します。

    Copyright 2011 - Samizdat Drafting Co.
    著作権 2011年 - 秘密出版製図株式会社


    R&JavaScriptによるデータ解析と視覚化テクニック (Programmers SELECTION)
    Tom Barker
    翔泳社
    2013-11-23
    ¥ 3,360


    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/996-ef60c353

    FC2Ad