Arquero を使用して JavaScript オブジェクトを簡単にフィルタリングする

JavaScript でコーディングすることには多くの利点がありますが、おそらくデータ ラングリングはそのリストの上位にはありません。 ただし、JavaScript のデータが難しいと感じている人には朗報があります。Arquero ライブラリのおかげで、非常に人気のある dplyr R パッケージの背後にあるのと同じ「データの文法」の考え方が JavaScript でも利用できます。

ワシントン大学インタラクティブ データ ラボの Arquero は、おそらく Observable JavaScript のユーザーに最もよく知られていますが、他の方法でも利用できます。 これらの 1 つが Node.js です。

この記事では、Arquero を使用して JavaScript オブジェクトをフィルタリングする方法を説明し、最後にいくつかのボーナス タスクを示します。

ステップ 1. Arquero をロードする

Arquero は、Observable JavaScript を備えた Quarto の標準ライブラリであり、私はそれを使用しています。 その場合、インストールは不要です。 Node で Arquero を使用している場合は、次のようにインストールする必要があります。 npm install arquero --save. ブラウザで、 .

Observable では、Arquero を次のようにロードできます。 import {aq, op} from "@uwdata/arquero". ブラウザーでは、Arquero は次のように読み込まれます。 aq. Nodeでは、次のようにロードできます const aq = require('arquero').

このチュートリアルの残りのコードは、Observable と Quarto でそのまま実行する必要があります。 Node のような非同期環境で使用している場合は、データの読み込みと処理に必要な調整を行う必要があります。

ステップ 2. データを Arquero テーブルに変換する

既存の「通常の」JavaScript オブジェクトを Arquero テーブルに変換するには、 aq.from(my_object).

もう 1 つのオプションは、Arquero のテーブルを使用してリモート データを Arquero テーブルとして直接インポートすることです。 load 関数ファミリー—次のような関数 aq.loadCSV("myurl.com/mycsvfile.csv") CSV ファイルの場合と aq.loadJSON("myjsonurl.com/myjsonfile.json") Web 上の JSON ファイルの場合。 テーブル入力関数の詳細については、Arquero API ドキュメント Web サイトを参照してください。

このチュートリアルの残りの部分を進めるには、以下のコードを実行して、米国の州の人口変化に関するサンプル データをインポートします。


states_table = aq.loadCSV("https://raw.githubusercontent.com/smach/SampleData/master/states.csv")

Arquero テーブルには特別な機能があります。 view() Observable JavaScript および Quarto で使用するメソッド。 お茶 states_table.view() コマンドは、図 1 に示すような出力を返します。

State、Pop_2000、Pop_2010、Pop_2020、PctChange_2000、Pct_change_2010、 シャロン・マクリス

図 1. Arquero テーブルの view() メソッドを使用した結果。

監視可能な JavaScript Inputs.table(states_table) (並べ替え用のクリック可能な列ヘッダーがあります) は、Arquero テーブルを表示するためにも機能します。

Observableの外では、使用できます states_table.print() テーブルをコンソールに出力します。

ステップ 3. 行のフィルタリング

Arquero テーブルには 多くの 特定の条件で行をフィルタリングするなど、データのラングリングと分析のための組み込みメソッドの filter().

R ユーザーへの注意事項: アルケーロ filter() 構文は dplyr ほど単純ではありません filter(Region == 'RegionName'). これは JavaScript であり、ほとんどの関数はベクトル化されていないため、無名関数を作成する必要があります。 d => その中で別の関数を実行します。通常は op (上でarqueroでインポート)。 JavaScript 以外の言語に慣れていても、この構造に慣れればかなり使いやすくなります。

通常の構文は次のとおりです。


filter(d => op.opfunction(d.columnname, 'argument')

この例では、 op 私が欲しい機能は op.equal()、(名前が示すように) 等しいかどうかをテストします。 したがって、米国北東部の州のみの Arquero コードは次のようになります。


states_table
  .filter(d => op.equal(d.Region, 'Northeast'))

あなたはタックすることができます .view() 最後に結果を確認します。

filter() 構文に関する注意: 中のコード filter() アルケーロです 式テーブル. 「一見、テーブル式は通常の JavaScript 関数のように見えますが、ちょっと待ってください!」 Arquero Web サイトの API リファレンス Web サイトで説明しています。 「内部では、Arquero は一連の関数定義を取得し、それらを文字列にマップし、解析、書き換え、コンパイルして、データを内部で効率的に管理します。」

それはあなたにとって何を意味しますか? 通常の JavaScript 関数の構文に加えて、特別な構文も使用できます。 テーブル式の構文 そのような filter("d => op.equal(d.Region, 'Northeast')")filter("equal(d.Region, 'Northeast')"). これらのバージョンのいずれかがより魅力的または有用であると思われる場合は、API リファレンスを確認してください。

これはまた、どのタイプの JavaScript 関数も使用できないことを意味します。 filter() および他の Arquero 動詞。 例えば、 for でラップしない限り、ループは許可されません。 escape() 「表現ヘルパー」。 詳細については、Arquero API リファレンスをご覧ください。

Python ユーザーへの注意事項:アーチャー filter どちらの行でもなく、行のみをサブセット化するように設計されています で見られる列 pandas.filter. (次に列に進みます。)

フィルターは、負の条件または複数の条件を使用して、単一のテストよりも複雑にすることができます。 たとえば、「西部地域の 1 語の州名」が必要な場合は、 スペースを含まない州名地域が西に等しい. それを達成する1つの方法は、 !op.includes(d.State, ' ') && op.equal(d.Region, 'West') 内部 filter(d =>) 無名関数:


states_table
  .filter(d => !op.includes(d.State, ' ') && 
     op.equal(d.Region, 'West'))

等価ではなく正規表現で検索およびフィルタリングするには、代わりに op.match() を使用します。 op.equal().

ステップ 4. 列を選択する

特定のものだけを選択する dplyrのものに似ています select(). 実際には、選択範囲を配列に変換する必要がないため、さらに簡単です。 引数は、内部のカンマ区切りの列名です select()::


states_table
  .select('State', 'State Code', 'Region', 'Division', 'Pop_2020')

次の構文を使用して、選択中に列の名前を変更できます。 select{{ OldName1: 'NewName1', OldName2: 'NewName2' }). 次に例を示します。


states_table
  .select({ State: 'State', 'State Code': 'Abbr', Region: 'Region', 
      Division: 'Division', Pop_2020: 'Pop' })

ステップ 5. テーブル列に一意の値の配列を作成する

入力ドロップダウン リストの入力などのタスクでは、1 つの列の一意の値を標準の JavaScript 配列として取得すると便利です。 Arquero には、これを実現するための関数がいくつかあります。

  • dedupe() 一意の値を取得します。
  • orderby() 呪文の結果。
  • array() Arquero テーブル列のデータを従来の JavaScript 配列に変換します。

から一意の部門名のソートされた配列を作成する 1 つの方法を次に示します。 states_table:


region_array = states_table
  .select('Region')                                      
  .dedupe()                                                                 
  .orderby('Region')
  .array('Region')

この新しいオブジェクトは JavaScript 配列であるため、Arquero メソッドはこれ以上機能しませんが、従来の配列メソッドは機能します。 次に例を示します。


'The regions are ' + region_array.join(', ')

このコードは次の出力を取得します。

"The regions are , Midwest, Northeast, South, West"

上記の文字列の最初のコンマは、 ヌル 配列内の値。 null などの空白値を削除したい場合は、Arquero を使用できます。 op.compact() 結果に対する関数:


  region_array2 = op.compact(states_table
  .select('Region')                                      
  .dedupe()                                                                 
  .orderby('Region')
  .array('Region')
  )

別のオプションは、バニラ JavaScript を使用することです。 filter() テキスト文字列の配列から null 値を削除します。 次のバニラ JavaScript に注意してください。 filter() 関数 一次元 JavaScript 配列 Arqueroのものと同じではありません filter() 為に 2 次元 Arquero テーブル:


 region_array3 = states_table
  .select('Region')                                      
  .dedupe()                                                                 
  .orderby('Region')
  .array('Region')
  .filter(n => n)

Quarto を使用しているユーザーを含む観察可能な JavaScript ユーザーは、 md 太字テキストなど、文字列にスタイルを追加する関数 **. だから、このコード

md`The regions are **${region_array2.join(', ')}**.`

次の出力が生成されます。


The regions are Midwest, Northeast, South, West

余談ですが、Intl.ListFormat() JavaScript オブジェクトを使用すると、カンマ区切りの配列から文字列への最後の項目の前に「and」を簡単に追加できることに注意してください。 だから、コード


my_formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
my_formatter.format(region_array3)

出力を生成します:


"Midwest, Northeast, South, and West"

アルケーロには他にもたくさんあります

アレイのフィルタリング、選択、重複排除、および作成は、Arquero ができることのほんの一部にすぎません。 ライブラリには、データの再形成、マージ、集計などの動詞が含まれています。 op 平均、中央値、分位点、ランキング、ラグ、リードなどの計算と分析のための関数。 その他の機能の概要については、Arquero の紹介をご覧ください。 また、完全なリストについては、Arquero Verbs の図解ガイドと Arquero API ドキュメントを参照するか、Data Wrangler Observable ノートブックにアクセスして、Arquero ができることを示すインタラクティブなアプリケーションを参照してください。

Observable JavaScript と Quarto の詳細については、「Quarto で Observable JavaScript、R、および Python を使用するための初心者向けガイド」および「Observable ノートブックで Observable JavaScript を学ぶ」をお見逃しなく。

著作権 © 2022 IDG Communications, Inc.

Leave a Comment

Your email address will not be published. Required fields are marked *