つをそれぞれ描画します。(リソースの人気が高いほど、円は大きくなります)。値は、パック内での各円の位置を指定します。値によって、各円のサイズと位置が完全に決まります。つの属性を自動的に計算します。つのステップが行われています。オブジェクトをパック・レイアウトに渡して、グラフィック計算を実行させた結果を取得します。この後、以上のステップのそれぞれについて説明します。処理パック・レイアウトは、階層的なレイアウトです。階層レベルの数に制限を設けていません。親、親の親、さらに親の親の親といった具合に任意の数のレベルにすることができます)。つのレベルしかありません。親レベルは週の番号で、子レベルは週ごとの人気度データとユーザーの交流データです。配列を直接処理しません。表現を入力として取ります。データ・フォーマットは階層データを上手く表現できるため、最近のブラウザーでは直接サポートされています。表現と、同じデータを配列で表現した場合との比較を示します。表現では名前と値のペアが使用されることに注目してください。いう名前が付けられています。回で、ソーシャル・リソースの名前は色の名前で表すようにしたことを思い出してください)。これらのオブジェクトはすべて「ノード」と呼ばれます。「リーフ・ノード」と呼ばれます。オブジェクトを作成する方法を示します。オブジェクト内で人気度データにユーザーの交流データを追加する方法を示します。いう名前の属性を各リーフ・ノードに追加することのみです。データを使用するには、いくつかの方法があります。ファイルに直接含める方法です。ページに関連付けるという方法もあります。変換することも可能です。ページに関連付けると、セキュリティー上の問題が生じる可能性があります。ファイルをサーバー・サイドで組み立てるときに、データを格納する簡単かつ明快な手段となります。変換ロジックを使用するという方法を選択しました。変換ロジックを呼び出すことができます。表現が必要となります。つのステップからなる変換プロセスで生成されます。同じになるように、ソーシャル・リソースの実際の名前を使用します。オブジェクトに変換します。関数を直接呼び出すことができます。読み込むことができます。パック・レイアウトに渡せば、必要なグラフィック計算を実行することができます。見ると、パック・レイアウトからは簡単にグラフィック計算を取得できることがわかります。関数を呼び出してパック・レイアウトのサイズを設定すれば良いのです。関数は、長さと幅を引数として取ります。この長さと幅が設定するサイズの範囲内で、円のパックが描画されます。内部でレイアウトのサイズに応じて拡大/縮小します。関数を呼び出し、独自の関数を値として書き込みます。ノードの値を返します。パラメーターとして渡します。人気度データに基づくグラフィック計算を行うように指示します。その結果、パック内の各円は、ノードの人気度データに応じたサイズに設定されます。オブジェクトを取得して計算を実行する準備が整いました。関数は、人気度を表す円をパック・レイアウト内に収容するためのグラフィック計算のすべてを行います。つの円のサイズと描画位置を表すノードからなる配列の形になります。このように、ノードの配列全体に人気度の円のパック全体を描画するためのすべてのデータが含まれます。パック・レイアウトに渡します。