knagaiデータセットは行と列として保持される場合が多くあるので、p5.jsでもその扱いを容易にするp5.Tableオブジェクトが提供されています。行と列で構成されるスプレッドシート(Excelなどで言う表)を扱ったことがあれば、コードから同じように操作できます。p5.jsでは、ファイルから表を読み取ったり直接作成することができます。行や列はどれでも読み取りと書き込みが可能で、表の個々のセル(マス)を修正することもできます。以降では特に表データの操作方法を見ていきます。表はセルのグリッドです。行は水平方向に並ぶ要素で、列は垂直方向に並ぶ要素です。データは個々のセルや、行、列から読み取ることができます。表データは通常、行をカンマやタブ文字で区切ったプレーンテキストです。values)のファイルはCSVファイルと呼ばれ、拡張子.csvが用いられます。タブを使用した場合の.tsvも時々使われます。CSYやTSVファイルを読み込むには、まずそのファイルをスケッチのフォルダ内に配置し、loadTable()関数を使ってデータを取得します。レッドソックスで強打者としてならしたデビッド・オルティーズの年度別成績を扱ったものです。数字を並べたExcelファイルの画面です。ExcelファイルをCSV形式に変換して保存するには次のようにします。UTF-8(カンマ区切り)]を選択[保存]ボタンをクリック保存したCSVファイルをテキストエディタで開くと、下図のように表示されます。データのひとかたまりはカンマで区切られ、データ同士は改行で区切られた形です。表の読み取りこのデータをloadTable()関数でp5.jsに読み込むと、表のデータはp5.Tableオブジェクトとして返されます。loadTable()関数は、setup()で安全にアクセスできるように、preload()内で呼び出します。setup()内では、forループを使って各行を走査します。forループの条件にはp5.TableオブジェクトのgetRowCount()メソッドが利用できます(データ内の行数を数えます)。データは1999年から2014年までのものなので、列数は16個です。}}forループ内では、p5.Tableオブジェクトのget()メソッドを使ってデータを取得しています。get()メソッドはパラメータとして、読み取るデータの行と列を取ります。loadTable()説明ファイルまたはURLの内容を読み取り、その値を持つp5.Tableオブジェクトを作成する。“data”フォルダに置く必要がある。filenameパラメータにはまた、オンライン上のファイルへのURLも指定できる。デフォルトでは、ファイルはコンマ区切り(CSV形式)と見なされる。’header’オプションが含まれていると、ヘッダ行を探す(最初の行に項目名が含まれていて、これをデータに含みたくない場合に指定する)。この表はヘッダ(タイトル)行を持っているオプションを複数渡すときには、カンマで区切って渡す。‘header’);ロードされ保存されるファイルにはすべて、UTF-8エンコーディングが用いられる。この関数は非同期で動作する。スケッチの実行中、次行が実行される前、完了していない可能性がある。preload()内でloadTable()を呼び出すことで、setup()とdraw()が呼び出される前、その操作が完了していることが保証される。preload()の外では、オブジェクトの処理にコールバック関数が使用できる。この関数はサイズが64MBまでのファイルの取得に適している。[errorCallback])p5.Table説明p5.Tableオブジェクトは複数の行と列を持つデータを保持する。従来のスプレッドシートとよく似ている。ゼロからダイナミックに生成することも、既存のファイルのデータを使って生成することもできる。p5.TableRowオブジェクトの配列プロパティcolumns、rowsメソッドgetRowCount():表の行数の合計を返すget():表の指定された行と列の値を取得する。行はそのIDで指定する。列はIDでもタイトルでも指定できる。次のサンプルでは、homeRunsという名前の配列を作成し、ファイルを読み取った後、setup()内でデータの保持に使用しています。このときは、get()メソッドではなく、グラフの数値として使用できるようにgetNum()メソッドを使用しています。draw()内では、homeRuns.lengthプロパティの長さ分だけforループを繰り返す作業を2回行っています。1回めは配列の各データ項目分の垂直線を描画し、2回めは配列の各データ項目から折れ線グラフを描画しています。シェイプを手作りする」で述べています。endShape();}このプログラムを実行すると、下図左の結果が描画されます。下図右は、Excelの機能を使って作成した折れ線グラフです。表の指定された行と列から浮動小数を取得する。p5.TableのgetObject()メソッドを使用すると、表データがオブジェクトとして取得できるので、ホームラン数以外のデータも楽に得られます。endShape();}getObject()説明すべての表データを取得し、オブジェクトとして返す。列名が渡された場合には、そのタイトルを属性名に持つ行オブジェクトが保持される。シンタックスgetObject([headerColumn])29,470都市のデータ次のサンプルでは、アメリカの各都市の緯度経度情報などをまとめた下図のようなCSVファイルを扱います。具体的なデータは2行めから29471行めまであるので、29470都市のデータがあることになります。このCSVファイルの1行めにあるのはヘッダです。ヘッダは各列の内容を明確にするラベルを定義するもので、今の場合で言うと、zip(郵便番号)、state(州名)、city(都市名)、lat(緯度)、lng(経度)がヘッダとして定義されています。ヘッダがあると、表を置き換えたp5.Tableオブジェクトで扱いやすくなります。getNum()やgetString()メソッドでヘッダ名を指定して値が取得できます。そのためには、loadTable()関数に’header’を与えます。print(latitude);}次のサンプルを実行してマウスをキャンバス上に移動させると、アメリカの都市の位置を円で描いた地図が描画され、マウスをさらに動かすと円で描いた地図も移動します。表(p5.Table)の指定された行と列から文字列値を取得する。行はそのIDで指定する。列はIDでもタイトルでも指定できる。表(p5.Table)の指定された行と列から浮動小数値を取得する。行はそのIDで指定する。列はIDでもタイトルでも指定できる。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。