フレア| Webのデータ視覚化

Flareにより、インタラクティブなデータ視覚化を簡単に作成できます

独自の視覚化を始めるには、 フレアをダウンロードする 以下のチュートリアルを実行してください。 もっと助けが必要ですか？ 訪問 ヘルプフォーラム （あなたは必要になります SourceForgeの ログインして投稿）。

Flareは、BSDライセンスの下でリリースされたオープンソースソフトウェアです。つまり、自由に展開および変更できます（$$で販売することもできます）。 Flareの設計は、その前身であるprefuseであるJava用の視覚化ツールキットから採用されました。

アプリケーション

お知らせ

• 2010.10.07：フレア開発がコミュニティに開放され、ソースがSourceForgeから GitHubの新しい家。 フレア 2009.01.24 はまだ最後の公式リリースであり、（少なくとも今のところ）チュートリアルとドキュメントはそれを反映しています。 GitHubの開発バージョン 現在、Flash Player 10のサポートが改善されているだけでなく、他の多くの小さな修正や変更も含まれています。
• 2009.01.24： フレア 2009.01.24 リリースされました。 これは、多数のバグ修正と更新を含むメンテナンスリリースです。 を参照してください リリースノート 詳細については。 これは、Flash Player 9で最後に計画されたリリースです。将来のバージョンはバージョン10に移行します。
• 2008.07.30： フレア 2008.07.29 リリースされました。 これは、多くの新機能とアーキテクチャの改善を導入したメジャーリリースです。 を参照してください リリースノート のガイドをご参照ください。
• 2008.07.30： フレア 2008.08.08 リリースされました。 このリリースには、改良された凡例のサポート、名前付き遷移、バグ修正、および結合を減らしてユーティリティクラスを統合するためのリファクタリングが含まれています。 を参照してください リリースノート のガイドをご参照ください。

チュートリアル

ActionScriptとFlareを学ぶための段階的なチュートリアル。

スタートガイド

最初のステップは、開発ツールをセットアップすることです。

1. 動作するフラッシュ開発環境をセットアップします。 XNUMXつの方法があります。 簡単にするために最初の方法をお勧めしますが、XNUMX番目の方法を使用する上級ユーザーも歓迎します。
   • オプション1（簡単）： Adobe Flex Builderをインストールする.
     • これは、ActionScript / Flexアプリケーションの完全な開発環境です。 すべての主要なプラットフォーム（Windows、Mac、Unix）で利用できます。 既にEclipse IDEを使用しているユーザーは、Flex BuilderをEclipseプラグインとしてインストールすることもできます。
     • Flex Builderを使用する際の注意点は、Flex Builderは商用ソフトウェアであり、限られた試用期間のみ機能することです。 ただし、アドビは大学生、教職員、スタッフに無料のFlex Builderライセンスを提供しています。
   • オプション2（より複雑）： 無料のFlex SDKをインストールする
     • これにより、基本的なActionScript / Flexコンパイラがインストールされます。 mxmlc & compc。 次に、たとえば、 make or ant システムを構築します。 フレアは、 build.xml で使用するファイル アパッチアント システムを構築します。 antがインストールされたら、 build.xml テキストエディタでファイルを作成し、最初の数行をFlexを指すように変更します SDK インストールしてから使用 ant ライブラリをコンパイルします。 Flex開発にはAdobe Labsのantタスクを利用します。
     • このアプローチの利点は、すべてのソフトウェアが無料で、期限切れにならないことです。 ただし、自動コンパイル、プロジェクト管理、Flex Builderが提供するオートコンプリートなどの機能を失うことになります。
2. prefuseフレアライブラリをダウンロードします。
   • ダウンロードは、ActionScriptライブラリプロジェクトのセットを含むzipファイルです。 Flex Builderを使用している場合は、ファイルをプライマリワークスペースディレクトリに解凍します。 チュートリアルでは、それらをFlex Builderにインポートし、それらを使用して視覚化を構築します。
   • ソフトウェアは現在アルファ版であるため、いくつかのバグと制限が予想されます。 できるだけ早く問題を修正します。上記のリンクは常に最新バージョンを指します。

FlashとActionScript 3の概要

Flashはインタラクティブなグラフィックスに最適な環境であり、最近ActionScript 3プログラミング言語が追加されたことで、はるかに強力で効率的なものになりました。 AS3の完全な紹介はこのチュートリアルの範囲を超えていますが、役立つリソースがいくつかあります。

• アドビは、AS3の概要と追加リソースへのリンクを提供しています。
• エッセンシャルActionScript 3 O'ReillyのColin Moockによる出版は、あなたが始めるのに役立つ素晴らしい本です。 あなたはできる ここからオンラインでアクセスしてください （大学などの一部の機関では無料でアクセスできます）。
• Adobe Flex APIリファレンスは、利用可能なさまざまなクラスとメソッドを理解するのに非常に役立ちます。 のクラスのみに焦点を当てます flash.* パッケージ。

このチュートリアルは、ActionScriptの構文と型、およびオブジェクト指向プログラミングの概念についての基本的な知識があることを前提としています。

パート1：DisplayObjects

概要

Flashは、 シーングラフ。 ビジュアルオブジェクトは階層に編成され、子オブジェクトは親の座標空間で定義されます。 このシーングラフは、 表示リスト アドビのドキュメントとフラッシュプログラミングに関する本の両方で。
表示リストの一番上のノードは常に Stage オブジェクト。 ステージには常にXNUMX人の子供がいます。 これは root、すべてのビジュアルアイテムはルートの下にあります。 通常、ルートは実際のFlashアプリケーションです。 すぐに戻ってきます。
表示リストに追加できるすべてのビジュアルアイテムは、 DisplayObject クラス。 のサブクラス DisplayObject include Bitmap （画像用）、 TextField （インタラクティブテキストエリア用）、および Video （YouTubeを考えてください）。 ただし、最も一般的なインスタンスは Sprite & Shape クラス。 参考までに、これらのクラスのほとんどは、 flash.display パッケージ（最終的には flash.text 使用のパッケージも）。
　 Sprite クラスは、Flash Playerで使用される最も便利で一般的なビジュアルオブジェクトです。 スプライトは、描画コンテンツの両方を含むビジュアルオブジェクトであり、表示リストのサブノードのコンテナとして機能します（ Sprite クラスのサブクラス flash.display.DisplayObjectContainer クラス）。 対照的に、 Shape クラスには描画コンテンツを含めることができますが、サブノードを保持することはできません。 その結果、Shapeは使用するメモリが少なくなりますが、柔軟性が大幅に低下します。 簡単にするために、このチュートリアルではスプライトに焦点を当てます。

新しいアプリケーションを作成する

まず、新しいFlashアプリケーションを作成しましょう。 これを行うには、Flex Builderを開いて、「Flex開発」パースペクティブにいることを確認します（多くの場合、右上の白黒の「Fx」アイコンをクリックすると表示されます）。
左側の「ナビゲーター」ペインで、ディスプレイを右クリックし、「新規」>「ActionScriptプロジェクト」を選択します。 表示されるダイアログで、プロジェクト名として「チュートリアル」と入力し、「完了」をクリックします。 これにより、新しいプロジェクトが作成されます。
「ナビゲーター」ペインに「チュートリアル」フォルダーが表示されます。 このフォルダー内に、「Tutorial.as」という名前のファイルが表示されます。 これがメインアプリケーションファイルです。 まだ開いていない場合は開きます。
ファイル内には、このクラスの基本的な足場が表示されます。

パッケージ{import flash.display.Sprite; パブリッククラスチュートリアルはSpriteを拡張します{public function Tutorial（）{}}}

このクラスが Sprite クラス。 これがメインのアプリケーションクラスであるため、アプリケーションを実行すると、 Tutorial クラスは自動的に表示リストに追加されます root （の唯一無二の子 Stage).
コンストラクターが自動的に作成されていることにも注意してください。 このコンストラクターは、アプリケーションの起動時に呼び出されます。 C、C ++、Javaなどのプログラミング言語に精通している人にとって、アプリケーションクラスのコンストラクタは、 main これらの他の言語で機能します。
この新しいアプリケーションスキャフォールディングを配置すると、ビジュアルオブジェクトの操作を開始できます。 ただし、最初にしたいことがあります。 クラス宣言の真上に新しい行を追加します（ "public class Tutorial…」）言う行：

[SWF（width = "800"、height = "600"、backgroundColor = "＃ffffff"、frameRate = "30"）]

この行は、アプリケーションのデフォルト設定を定義します（これはコンパイルされ、.swfファイルとしてプロジェクトの「bin」ディレクトリに保存されます）。 上記では、アプリケーションのサイズ、背景色、およびターゲットフレームレート（XNUMX秒あたりのフレーム数）を設定しています。

スプライト

すべてのように DisplayObjects, Sprite 箱から出してすぐに多くの視覚的プロパティをサポートします。 これには x, y, scaleX, scaleY, rotation, alpha プロパティ。 これらはそれぞれ、スプライト（およびそのすべての子！）の位置、サイズ、方向、および透明度を変更します。ここでは、シーングラフを使用していることに注意してください。
ただし、スプライトにはデフォルトでは何も含まれていないため、これらの値はまだあまり意味がありません。 まず、独自のコンテンツを描画します。
すべてのスプライトには、 graphics プロパティ。 これを使用して、 Spriteを選択します。 graphics プロパティはのインスタンスです flash.display.Graphics 多数のベクター描画コマンドを提供するクラス。
以下の例では、いくつかのことを行います。

• まず、新しい Sprite.
• 次に、スプ​​ライトの graphics 灰色の塗りつぶしと黒い輪郭の円を描きます。
  • beginFill 現在の塗りつぶしの色とスタイルを設定します。 最初の引数は0進表記の色で、1番目の引数はアルファ値で、完全に透明な場合のXNUMXから完全に不透明な場合のXNUMXまでの範囲です。
  • lineStyle 現在のストロークの色とスタイルを設定します。 最初の引数は線の幅、XNUMX番目の引数は色です。
  • drawCircle スプライトの座標空間の10の点に半径0,0の円を描画します。
• XNUMX番目に、スプライトをメインアプリケーションの子として追加します（a Tutorial スプライト）。
• 第XNUMXに、 x & y スプライトの位置。
• XNUMX番目に、デバッグ出力を追加します。 trace 文字列をコンソールに出力します。 この出力は、アプリを「デバッグ」モードで実行しているときにのみ表示されます。

これがコードです：

パッケージ{import flash.display.Sprite; [SWF（width = "800"、height = "600"、backgroundColor = "＃ffffff"、frameRate = "30"）] public class Tutorial extends Sprite {public function Tutorial（）{var sprite：Sprite = new Sprite（） ; sprite.graphics.beginFill（0xcccccc、0.5）; sprite.graphics.lineStyle（1、0x000000）; sprite.graphics.drawCircle（0、0、10）; this.addChild（sprite）; sprite.x = 50; sprite.y = 50; trace（ "私たちのスプライトは次の場所にあります：" + sprite.x + "、" + sprite.y）; }}}

アプリケーションを実行します（「Tutorial.as」を右クリックし、「実行」>「Flexアプリケーション」を選択します）。 ポイント50、50を中心として、左上隅に黒い輪郭の灰色の円が表示されます。アプリケーションをデバッグモードで実行すると（[名前を付けてデバッグ]> [Flexアプリケーション]を選択）、「our」という文字列も表示されます。スプライトは、出力コンソールで50、50インチにあります。

ネストされたスプライト

では、シーンをもう少し面白くしましょう。 まず、Sprite生成コードを新しいメソッドに移動します。 このメソッドをクラスに追加します。

 プライベート関数createCircle（x：Number、y：Number）：Sprite {var sprite：Sprite = new Sprite（）; sprite.graphics.beginFill（0xcccccc、0.5）; sprite.graphics.lineStyle（1、0x000000）; sprite.graphics.drawCircle（0、0、10）; sprite.x = x; sprite.y = y; スプライトを返します。 }

次に、コンストラクターのコードを置き換えます。 最初に、サークルのコレクションを保持するために使用するコンテナーと呼ばれる新しいスプライトを作成します。 ステージの中央に配置します。 次に、ループを使用して一連の円を作成します。 ここでは、親コンテナーの0,0点を中心に対称的に円を並べます。 新しいコンストラクタは次のようになります。

 パブリック関数Tutorial（）{var container：Sprite = new Sprite（）; container.x = 400; container.y = 300; this.addChild（container）; for（var i：int = 0; i <10; ++ i）{var x：Number =（i / 5 <1？1：-1）*（13 + 26 *（i％5））; container.addChild（createCircle（x、0））; }}

アプリケーションの新しいバージョンを実行します。 アプリケーションの中央にXNUMX個の円の線が表示されます。
コンテナーを変更して、コンテナー内のすべての円を更新できます。 コンテナースプライトにさまざまな視覚変数を設定して遊んでみてください。 たとえば、 x, y, scaleX, scaleY, rotation, alpha プロパティ。

その他のトピック

フラッシュが提供する基本的なオプションでできることはもっとたくさんあります。 残念ながら、それらはここでの時間を少し超えています。 探求するいくつかのことは画像フィルターを含みます（ flash.filters パッケージ）、これを使用して表示オブジェクトに視覚効果を追加できます filters プロパティ、およびで利用可能なさまざまなオプション flash.display.Graphics 塗りつぶしや線のスタイル、その他の2D描画ルーチンを含むクラス。

パート2：アニメーション

これでビジュアルオブジェクトを作成できるようになりました。次は、オブジェクトに生命を与えます。 フレアには、 flare.animate これを簡単にするためのパッケージ。 まず、Flex Builderで使用するフレアライブラリをインポートする必要があります。

ライブラリのインポート

先に進む前に、フレアライブラリがプロジェクトとしてFlex Builder内にロードされていることを確認してください。 フレアファイルをメインのFlex Builderワークスペースディレクトリに解凍しておく必要があります。 次のステップは、それらをFlex Builder環境にインポートすることです。

• 「フレックス開発」の視点にいることを確認してください。
• 左側のナビゲーターペインを右クリックします。
• ポップアップメニューの[インポート...]を選択します。
• ダイアログで、「一般」>「既存のプロジェクトをワークスペースに」を選択し、「次へ」ボタンをクリックします。
• 「ルートディレクトリの選択」ウィジェットを使用して、Flex Builderワークスペースディレクトリに移動します。
• 「プロジェクト：」パネルにリストされたフレアプロジェクトが表示されます。
• 「flare」プロジェクトと「flare.demos」プロジェクトを選択し、「完了」ボタンをクリックします。

ナビゲーターペインにフレアプロジェクトが表示されます。 これで、ライブラリとデモの両方のソースコードを参照できます。

フレアライブラリの概要

以下は、フレアツールキットの概要です。 内部 flare プロジェクト、「src / flare」フォルダ内を確認します。 さまざまな機能を提供する多数のパッケージがあります。

• analytics：統計を計算してデータを分析するための演算子
• animate：アニメーションを作成するためのツール
• data：データセットを読み書きするためのメソッド
• display: DisplayObject によって提供されるタイプを拡張するタイプ flash.display
• flex：FlexアプリケーションにFlare視覚化を埋め込むためのラッパー
• physics：物理的効果または力指向レイアウトのための物理エンジン
• query：ActionScriptオブジェクトのクエリプロセッサ
• scale：線形、対数、時間スケールなどのデータスケールを処理するためのクラス
• util：一般的に必要な機能を提供するユーティリティクラスのセット
• vis：フレアの視覚化コンポーネントとオペレーター

また、 flare.demos プロジェクト。Flareコンポーネントを作成する方法の例をいくつか提供します。

別のプロジェクト内でのライブラリのインポート

独自のプロジェクトでフレアを使用するには、プロジェクト設定を更新する必要があります。 これを行う方法は次のとおりです。

1. ナビゲーターペインで、「Tutorial」プロジェクトの一番上のフォルダーを右クリックします。
2. コンテキストメニューの[プロパティ]をクリックします
3. 表示されるダイアログで、左側のパネルの「ActionScriptビルドパス」をクリックします（上から3番目の項目である必要があります）
4. 右側のパネルの[ライブラリパス]タブをクリックします
5. 「プロジェクトの追加」ボタンをクリックします
6. フレアを含むプロジェクトのリストが表示されます。
7. 「フレア」を選択し、「OK」をクリックします

これでプロジェクトにフレアライブラリが追加され、プロジェクトが提供する任意のクラスを使用できるようになりました。
Flexコンパイラについての注意点のXNUMXつ-デフォルトでは、アプリケーションで実際に使用するクラスのみが含まれます。 したがって、非常に大きなライブラリをインポートした場合でも、最終的な.swfファイルのサイズは非常に小さくなります。 ただし、アプリケーションでリフレクションを使用して動的クラスロードを実行すると、この問題が発生する可能性があることに注意してください（このチュートリアルでは取り上げない高度な機能）。

基本的なアニメーション：Tween、Sequence、Parallel

さて、アニメーションしましょう！ の flare.animate.Transition classは、すべてのアニメーションの基本クラスです。 の重要なサブクラス Transition です。 Tween, Sequence, Parallel 遷移。 トゥイーンは、単一のオブジェクトのプロパティをアニメーション化するために使用されます。 シーケンスは、一連のアニメーションを順番に実行するために使用されます。 並列遷移は、遷移のコレクションを同時に実行します。 トゥイーンから始めましょう。

オブジェクトのプロパティのトゥイーン

Tweenクラスの基本は単純です。オブジェクトを取得し、時間とともに変化させたい一連のプロパティ値を指定し、その変化の期間を指定します。 パート1のチュートリアルアプリケーションを使用して、コンテナオブジェクトを回転させます。 次の行をTutorialクラスのコンストラクタの最後に追加します。

 var tween：Tween = new Tween（container、3、{rotation：360}）; tween.play（）;

また、コンパイラーが何を話しているのかをコンパイラーが認識できるように、クラスの先頭に新しいインポート文があることを確認してください。 これをインポートのリストに追加します。

 インポートflare.animate.Tween;

（注：新しいクラス名を入力すると、Flex Builderがimportステートメントを自動的に追加することがあります。そうでない場合は、テキストカーソルを 終わり 新しいクラス名を入力し、「Ctrl-Space」と入力します。これにより、クラスの新しいインポートが作成されます。）
次に、アプリケーションを実行します。ポイントは3秒間にわたって円を描くように回転します。
Tweenコンストラクターが行っていることは次のとおりです。

• 最初の引数は、値をトゥイーンする必要があるオブジェクトです
• XNUMX番目の引数は、アニメーションの長さ（秒単位）です
• XNUMX番目の引数は、アニメーション化するプロパティとそのターゲット値をリストするObjectインスタンスです。
  • プロパティ名は、入力オブジェクトのプロパティと正確に一致する必要があります。
  • ネストされたプロパティは許可されますが、引用符で囲む必要があります。 例えば、 {“data.profit”:50} 入力オブジェクトにdataという名前のプロパティがあり、そのプロパティにprofitという名前のプロパティがある場合、これは有効な入力です。

　 play その後、メソッドはアニメーションを実行します。 の play メソッドは、アニメーションを逆方向に実行するかどうかを示す単一のブールパラメータで呼び出すこともできます。
回転アニメーションが加速していることに気づいたかもしれません。 これは、 Tween インスタンスは、「スローインスローアウト」アニメーションを使用することです。 これらの動作を使用して制御できます Easing 機能。 これらの関数は、現在のアニメーションの進行状況を0〜1の割合として入力として受け取ります。次に、操作された進行状況の割合を返し、アニメーションのペースを、多くの場合、非線形に変更します。
イージングを削除するには（つまり、線形イージング関数を使用）、次のように記述できます。 tween.easing = Easing.none。 インポートすることを確認してください flare.animate.Easing ファイルの先頭にあるクラス。
他のイージング関数を自由に試してください。 たとえば、イージング関数には、イージングイン（アニメーションの開始のみを操作する）、イージングアウト（アニメーションの終了のみを操作する）、またはその両方が含まれる場合があります。 たとえば、これを試してください： tween.easing = Easing.easeOutBounce。 これにより、回転が最後に跳ね返ります。
先に進む前に、位置、スケール、アルファ値など、コンテナの他のプロパティをアニメーション化してみてください。

複合アニメーション

　 Sequence & Parallel クラスを使用すると、アニメーションをグループ化できます。 シーケンスは一連のアニメーションを次々に実行します。 たとえば、これを試してください：

 var t1：Tween = new Tween（container、1、{y：100}）; var t2：Tween = new Tween（container、1、{scaleX：2}）; var t3：Tween = new Tween（container、1、{y：300}）; var t4：Tween = new Tween（container、1、{scaleX：1}）; var seq：Sequence = new Sequence（new Parallel（t1、t2）、new Parallel（t3、t4））; seq.play（）;

また、ファイルの先頭にいくつかの新しいインポートステートメントを追加する必要があります。

 インポートflare.animate.Parallel; インポートflare.animate.Sequence;

これにより、XNUMXつのトゥイーンが作成されます。 t1, t2, t3, t4。 次に、実行するXNUMXつの並列遷移を作成します。 t1 & t2 一緒に走る t3 & t4 一緒。 次に、並列遷移が順次実行されます。 このようにして、より複雑なアニメーションを簡単に作成できます。
より高度な複合アニメーションについては、 FlareLogo & flare.demos.Animation のクラス flare.demos プロジェクト。

トランジショナーを使用したバッチアニメーション

使い方 Tween, Parallel, Sequence クラスでは、アニメーション化されたトランジションをいくつでも作成できます。 ただし、オブジェクトの大きなコレクションを処理する場合（視覚化では一般的）、同様に大きなトゥイーンのセットを手動で処理するのは面倒な場合があります。 さらに、レイアウト、色、サイズ、形状などの視覚的プロパティをエンコードするための個別のルーチンを簡単に実行でき、アニメーションの処理について心配する必要がありません。 おそらく、変更をアニメーション化したり、静的な更新が必要な場合があります。 どちらの方法でも、同じコードを再利用して値を割り当てることができるはずです。
これらの懸念に対処するために、フレアは Transitioner クラス。 トランジションは、オブジェクトのコレクションのアニメーションを作成するプロセスを簡略化します。 オブジェクトを取得し、必要なプロパティをXNUMXつずつ設定するだけです。 トランジションは、舞台裏で、必要なトゥイーンを自動的に生成して再利用し、完全なアニメーションをモデリングします。 さらに、アニメーションが不要な場合は、代わりにプロパティ値をすぐに設定するようにトランジションを構成できます。 つまり、トランジショナーはオブジェクトプロパティを更新するための間接層を提供します。これらの更新を収集して、アニメーション化したり、すぐに適用したりできます。
以下は、チュートリアルアプリでトランジションを使用する簡単な例です。

 var t：Transitioner = new Transitioner（2）; for（var j：int = 0; j

この例では、すべてのスプライトをアニメーション化します container 新しいランダムに y 位置とランダムな垂直スケール係数。 最初に新しい Transitioner 2秒のアニメーションが作成されます。 次に、各子スプライトをループし、トランジションを使用してプロパティをTweenに設定します。
移行者の $ 演算子は、入力オブジェクトのターゲット値を設定することを示します。 デフォルトでは、新しい Tween 作成されているか、既存の Tween 現在のアイテムにが見つかりました。 の $ 演算子は、トゥイーンのターゲットプロパティを設定するオブジェクトを返します。
さらに、トランジションを使用して、静的な（アニメーション化されていない）トランジションを作成できます。 移行者の場合 immediate プロパティがtrueに設定されている場合、新しいトゥイーンは作成されません。 代わりに、$演算子は単純に入力値を返します。 つまり、トランジションを使用して値を更新するメソッドを作成し、後でそれらの値を更新するかどうかを制御できます。 標準の「即時モード」 Transitioner 静的を使用して取得されます Transitioner.DEFAULT プロパティ。 そうすれば、新たに割り当てる必要はありません Transitioner 即時更新を実行するとき。
トランジショナーは、 flare.vis パッケージを使用すると、視覚化デザイナーは、どの更新をどのようにアニメーション化するかを制御できます。

パート3：視覚化

データのロード

Flareの基本的なデータ表現は、組み込みのFlashデータ型を使用するだけです。 Object & Array。 たとえば、データのテーブルはオブジェクトの配列として表すことができ、各オブジェクトには各データフィールドの名前と値が含まれています。 より効率的な表現が可能ですが、このアプローチは、既存のFlash開発規約を活用しながら、最も柔軟性を提供します。
Flashプレーヤーにデータを読み込むには、いくつかの方法があります。 単純なアプローチは、データをアプリケーション自体に埋め込むことです。 このようにして、データはアプリケーションと一緒にダウンロードされます。これは、静的データセットには適しています。 たとえば、ActionScriptのオブジェクト表記を使用して、データセットを変数として直接定義できます。

var data：Array = [{id： "Q1"、sales：10000、profit：2400}、{id： "Q2"、sales：12000、profit：2900}、{id： "Q3"、sales：15000、profit ：3800}、{id： "Q4"、売上高：15500、利益：3900}];

ただし、多くの場合、Webページ内（ブラウザーでJavaScriptを使用して値をFlashに渡すことができます）またはインターネット上のサーバーから動的にデータをロードする必要があります。 これには多くのアプローチがあり、特定のアプリケーションに最適な方法を選択する必要があります。 たとえば、ActionScriptは次のデータ型と構文を提供します。 XML ECMAScriptを使用したデータ XML （E4X）標準。
Flareは、外部データセットをロードするためのユーティリティもいくつか提供しています。 インターネット上の任意のサーバーからのデータの読み込みと、そのデータの内部ActionScriptオブジェクトへの変換をサポートしています。 現在サポートされているファイル形式はタブ区切りテキスト（「タブ」、Excelなどのツールからデータをエクスポートするための標準ファイル形式）、 JavaScript Object Notation （「json」、Webアプリケーションの一般的なデータ形式）、および グラフML （「graphml」、 XML ノードとエッジを持つネットワークを表すための形式）。
リモートデータは、フレアによって flare.data.DataSource クラス。 これを使用してタブ区切りのデータファイルを読み込む例を次に示します。

var ds：DataSource = new DataSource（ "http://flare.prefuse.org/data/test.tab.txt"、 "tab"）; var loader：URLLoader = ds.load（）; loader.addEventListener（Event.COMPLETE、function（evt：Event）：void {//ロードが完了したらデータを処理する関数var ds：DataSet = loader.data as DataSet; //データで何かを実行...} ）;

　 DataSource コンストラクターにはXNUMXつの必須引数があります。データセットのURLとファイル形式を示す文字列です。 現在サポートされている形式は、「タブ」（タブ区切り）、「json」（JavaScriptオブジェクト表記）、および「graphml」（GraphML）です。
スキーマ（フィールドの名前とデータ型）が不明確である可能性があるデータセットの場合、XNUMX番目のオプションのコンストラクタ引数もあり、 DataSchema タイプ。 を参照してください flare.data.DataSchema & flare.data.DataField より多くのためのクラス。 スキーマは、データ値が適切に名前付けされ（たとえば、ヘッダー行が欠落しているタブ区切りファイルの場合）、適切なデータ型に変換されている（たとえば、数値が引用符で囲まれているJSONデータの場合）ことを確認するのに役立ちます。
実際にデータをロードするために、DataSource loadメソッドが呼び出され、 flash.net.URLLoader インスタンス。 ローダーを使用して、ダウンロードの進行状況を追跡でき（たとえば、進行状況バーを提供したい場合）、ダウンロードが完了したときに通知イベントを提供します。 上記の例では、ダウンロードが完了したときに通知されるイベントリスナーを追加します。 の DataSource 入力データを自動的に解析し、それをActionScriptオブジェクトにマップし、結果を flare.data.DataSet オブジェクト。 ザ DataSet クラスは、テーブルとネットワーク（ノード/エッジ）データの両方を表すことができます。

ビジュアルオブジェクトの作成と管理

次に、データセットを視覚化したいと思います。 これを行うには、個々のデータレコードをビジュアルアイテムにマッピングします。 Flareは、データを表す一連のビジュアルオブジェクトを提供します。 以下が提供する基本的なクラスの概要です。 flare.vis.data パッケージ。

• DataSprite：データを視覚的に表すスプライトの基本クラス。 DataSprite Flash Playerのサブクラスです Sprite とに提供されます。 DataSprite 含ま data データタプル（ActionScriptオブジェクト）が格納されているプロパティ。また、色、形状、サイズのフィールドなど、基本的なスプライトでサポートされているものを超える追加の視覚変数、および極座標での位置設定のサポートを提供します。
• NodeSprite: DataSprite ノードを表すインスタンス。 これは、データの視覚化に使用されるデフォルトのタイプです。 NodeSprite インスタンスは、ネットワークまたはツリー構造内で接続できます。 EdgeSprite インスタンス。
• EdgeSprite: DataSprite エッジを表すインスタンス。 あ EdgeSprite XNUMXつを接続します NodeSprites。 ノードには、 source & target プロパティ。 EdgeSprites グラフやツリーを作成したり、時系列グラフなどの線を表すために使用されます。

通常、NodeSpritesとEdgeSpritesは作成され、 flare.vis.data.Data クラス。単一の視覚化のすべての視覚アイテムを管理します。 の Data クラスは、データタプルの新しいビジュアルオブジェクトを作成し、グラフ構造を表すメソッドを提供します。
　 Data クラスは、含まれているデータ項目をトラバースおよび更新するためのメソッドも提供します。 の nodes & edges プロパティは、データ内に含まれるノードとエッジのリストを返します。 これらの各リストには、 visit 各ノードまたはエッジで呼び出される関数を渡すことができるメソッド。 また、 setProperty & setProperties メソッドを使用すると、すべてのノードまたはエッジのプロパティ値を一度に設定できます。 これらのメソッドはオプションで Transitioner 引数として、プロパティの更新をアニメーション化できます。
たとえば、次のコードは、すべてのノードの線の色が青に設定されたXNUMX秒のアニメーションになります。 （XNUMX進表記は DataSprite 色の値には、アルファと赤、緑、青のチャネルが含まれます）。

data.nodes.setProperty（ "lineColor"、0xff0000bb、new Transitioner（1））。play（）;

ノードリストとエッジリストは、 setDefault, setDefaults, removeDefault, clearDefaults メソッド。 デフォルト値は、Dataクラスを使用して新しく作成されたノードまたはエッジに設定されます ' addNode or addEdgeFor 方法。
　 Tree クラスはのサブクラスです Data、一般的なグラフではなくツリーを表すために特化されています。 の Data クラスは、 Tree 一般的なグラフの全域木を計算することによるインスタンス。 幅優先、深さ優先、最小スパニングツリーアルゴリズムなど、多数のスパニングツリー作成方法をパラメーターとして渡すことができます。 これらの計算は、 flare.analytics.graph.SpanningTree とに提供されます。
実際にノードとエッジオブジェクトを作成するには、 addNode & addEdgeFor 方法。

• addNode 入力データタプル（ Object）そして、新しい NodeSprite そのデータを視覚化するため。
• addEdgeFor XNUMXつの既存の NodeSprites そして追加します EdgeSprite それらを接続します。 このメソッドは、オプションでデータタプルも除外します（ここでも、 Object エッジのデータフィールドを表します）。

これは作成するための簡単な例です NodeSprites 表形式のデータセットの場合、データオブジェクトの配列があると仮定します。

var list：Array; //すでに読み込んだデータオブジェクトの配列var data：Data = new Data（）; //それぞれの新しいデータコンテナ（var o：Object in list）{data.addNode（o）; }

結果は Data ビジュアルが入力されたオブジェクト DataSprite （ノードまたはエッジ）インスタンス。
実際には、常に視覚化されたデータを手動で入力する必要はありません。 を作成するには Data ロードされたデータセットを視覚化するためのオブジェクトでは、代わりに便利なメソッドを使用できます。 の Data.fromArray() 関数は Data ActionScriptオブジェクトの配列として保存されている表形式データのインスタンス、 Data.fromDataSet() メソッドは同様に Data ロードされたインスタンス DataSet オブジェクト。

視覚化の構築

これをまとめて視覚化を始めましょう。 の Visualization クラスは、ビジュアルマーク（ Data インスタンス）と軸。 視覚化を作成するには、データセットを読み込み、データを視覚化に追加し、データの視覚化方法を決定する演算子を設定します。 ここに例があります。 最初にコードを確認し、次に読んで各部分の動作を理解してください。

パッケージ{import flare.data.DataSet; インポートflare.data.DataSource; インポートflare.scale.ScaleType; インポートflare.vis.Visualization; インポートflare.vis.data.Data; インポートflare.vis.operator.encoder.ColorEncoder; インポートflare.vis.operator.encoder.ShapeEncoder; インポートflare.vis.operator.layout.AxisLayout; import flash.display.Sprite; import flash.events.Event; import flash.geom.Rectangle; import flash.net.URLLoader; [SWF（width = "800"、height = "600"、backgroundColor = "＃ffffff"、frameRate = "30"）] public class Tutorial extends Sprite {private var vis：Visualization; public function Tutorial（）{loadData（）; }プライベート関数loadData（）：void {var ds：DataSource = new DataSource（ "http://flare.prefuse.org/data/homicides.tab.txt"、 "tab"）; var loader：URLLoader = ds.load（）; loader.addEventListener（Event.COMPLETE、function（evt：Event）：void {var ds：DataSet = loader.data as DataSet; visualize（Data.fromDataSet（ds））;}）; }プライベート関数visualize（data：Data）：void {vis = new Visualization（data）; vis.bounds = new Rectangle（0、0、600、500）; vis.x = 100; vis.y = 50; addChild（vis）; vis.operators.add（new AxisLayout（ "data.date"、 "data.age"））; vis.operators.add（new ColorEncoder（ "data.cause"、Data.NODES、 "lineColor"、ScaleType.CATEGORIES））; vis.operators.add（new ShapeEncoder（ "data.race"））; vis.data.nodes.setProperties（{fillColor：0、lineWidth：2}）; vis.update（）; }}}

それぞれの方法を見てみましょう。
コンストラクタは単純です。それは単に loadData 方法。
　 loadData メソッドは、新しいデータソースを作成し、前述のメソッドを使用してそれをロードします。 この場合、データセットは2007年にロサンゼルス郡で殺人が報告され、タブ区切り形式で保存されます。 ロードが完了すると、ロードされたデータタプルが Data を使用するインスタンス fromDataSet 便利な方法。 内部的には、これは NodeSprites 各データ項目を視覚化するため。 最後に、 visualize メソッドが呼び出されます。
　 visualize メソッドは視覚化を設定します。 各ステップで何が起こっているかは次のとおりです。

• パート1：初期化
  • データの新しい視覚化が作成されます
  • 視覚化の境界を設定します。 これにより、レイアウト領域が決まります。
  • 私たちは x & y 視覚化の位置と視覚化を表示リストに追加します。
• パート2：ビジュアルエンコーディングの指定
  • 軸のレイアウトを使用して、x軸に「日付」、y軸に「年齢」を配置します。 の AxisLayout オペレーターは、視覚化のための軸も自動的に構成します。 構文「data.date」を使用してデータ変数を示します。データ変数は NodeSprite〜の data プロパティ。
  • ノードの線の色が「原因」（死因）変数を表すように、色エンコードを追加します。 また、「原因」変数の値がカテゴリ（ScaleType.CATEGORIES）。 カラーエンコーダーはこの情報を使用して、適切なカラーパレットを自動的に選択します。 後で説明するように、独自のカラーパレットを提供することもできます。
  • オブジェクトの形状が被害者の「人種」を表すように、形状エンコーディングを追加します。
  • デフォルトのプロパティを設定します。ノードの塗りつぶしの色を完全に透明に設定し、線の幅を2ピクセルに設定します。
  • 最後に、 update 方法。 これにより、すべての演算子が順番に実行されます。

ビジュアライゼーションの更新

ビジュアライゼーションが作成されたら、更新することができます。 たとえば、色のエンコーディングを変更して、代わりに性別を視覚化したい場合があります。
まず、クラスに新しいメソッドを追加しましょう：

 プライベート関数colorByGender（）：void {var color：ColorEncoder = ColorEncoder（vis.operators [1]）; color.source = "data.sex"; color.palette = new ColorPalette（[0xffff5555、0xff8888ff]）; vis.update（new Transitioner（2））。play（）; }

この方法：

1. 1番目の演算子（インデックスXNUMXの演算子）を取得し、それを ColorEncoder
2. 変更します source 「data.sex」変数を使用するカラーエンコーダーのプロパティ
3. 新しいカラーパレットを設定します（この場合、女性は赤、男性は青–色の順序はラベルのアルファベット順と一致します）
4. でupdateを呼び出して、変更をアニメーション化します Transitioner XNUMX秒のアニメーションに設定します。 の vis.update メソッドは Transitioner、更新の戻り値でplayを呼び出すことができます。 （注：省略もできます Transitioner 2を引数として渡すだけです update。 新しいです Transitioner 自動的に作成されて返されます。）

次に、アプリケーションを接続して、インタラクティブに更新をトリガーできるようにする必要があります。 これを行うには、次のコードをコンストラクターに追加します。

 //クリック可能なラベルを追加var button：TextSprite = new TextSprite（ "Color by Gender"）; addChild（button）; button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener（MouseEvent.CLICK、function（evt：MouseEvent）：void {colorByGender（）;}）;

このコード：

1. 新しいテキストラベル（TextSprite のヘルパークラスです flare.display パッケージ）
2. ラベルをアプリケーションに追加し、その位置を設定します
3. セット buttonMode trueに設定します（これにより、ラベルの上にマウスを置くと、ハンドカーソルが表示されます）
4. ラベルがクリックされたときにトリガーされるイベントリスナーを追加します。 を呼び出すコールバック関数を追加します colorByGender 方法。

上記のコードを機能させるには、ファイルの先頭に次の追加のインポート文を含める必要があります。

 import flash.events.MouseEvent; インポートflare.animate.Transitioner; import flare.display.TextSprite; インポートflare.util.palette.ColorPalette;

これで、アプリケーションをコンパイルして実行できるはずです。 「性別による色分け」ラベルをクリックすると、色エンコーディングの変化がアニメーション表示されます。

次のステップ

上記の例は、FlashとFlareライブラリの基本を示していますが、まだカバーされていない機能が他にもたくさんあります。 今後は、（a）フラッシュとフレアの両方を検査することをお勧めします API 利用可能なすべてのクラスの概要を理解するためのドキュメント、および（b）Flareデモを掘り下げて、ここに示す同じ原理を使用して他の多くの視覚化を構築する方法を確認します。 または、さらに良いことに、Flareソースコードを調べて、内部で何が行われているのかを調べます。
このプロセスを支援するために、次のサブパッケージの一般的な概要を示します flare.vis:

• flare.vis.axis：軸、ラベル、グリッド線を提供します
• flare.vis.controls：選択、ズームなどのための対話ハンドラー
• flare.vis.data：データ要素を表すビジュアルオブジェクト
• flare.vis.data.render：描画するプラグイン可能なレンダラー DataSprites
• flare.vis.events：フレアフレームワークで使用されるイベントタイプ
• flare.vis.legend：ビジュアルエンコーディングを説明する凡例を表します
• flare.vis.operator：視覚化を定義するためのビルディングブロック
• flare.vis.palette：色、形状、サイズの値のパレット
• flare.vis.util：一般的なユーティリティクラス

これで、デモを理解するのに十分な知識が必要です。 flare.demos パッケージ。 FlashとFlareがどのように機能するかをより深く理解するために、デモを自由に操作、変更、コピー、貼り付け、および構築してください。

リンク

ダウンロード

ツール

その他の技術ガイド

サポート

出典：https://blokt.com/tool/prefuse-flare