| スピーカー |
文字起こし |
| ジョポウェ |
こんにちは、私の講演へようこそ。 |
| |
この講演のきっかけは、JMPユーザーコミュニティでの議論でした。アンダーソン・メイフィールド博士は、NOAA(米国海洋大気庁)とマイアミ大学に所属する海洋生物学者です。 |
| |
彼はサンゴ礁の健康状態を研究しています。JMP On Airの地球の日特別番組で発表していただき、今回の学会でも発表する予定です。 |
| |
JMPユーザーコミュニティの投稿で、彼はこの画像を投稿しました。ご覧のとおり、サンゴやサンゴ礁を表すグラフィックがすべて含まれています。 |
| |
そして、それらは複数のデータ要素を1つの小さなグラフに表現しており、それはまるでビデオゲームでプレイヤーの統計情報を表示するようなものです。 |
| |
そして、プレイヤーがシーン内を走り回ると、それらはプレイヤーの周りを漂っています。これで、私が講演のタイトルを「ビデオゲーム、海洋生物学者、JMPを組み合わせるとどうなるか?」とした理由がお分かりいただけたでしょう。では、次に進みましょう。 |
| |
私がこれから話すのは、JMPで可能なゲームベースまたはゲームにインスパイアされたソリューションであり、カスタムグラフィックスクリプトの使用などが含まれます。 |
| |
カスタムマップについて説明します。次に、私が作成した3Dウェブベースの散布図アプリケーションと、そのアプリケーションにJMPデータセットをどのように統合したかについてお話しします。 |
| |
グラフィックスクリプトの例を以下に示します。 |
| |
そして、こちらがカスタムマップの使用例です。そして、こちらが私の3D散布図アプリケーションです。 |
| |
それでは始めましょう。カスタムグラフィックスクリプトがどのように使用されるかを示すために、ここに簡単なサンプルを用意しました。 |
| |
そしてJMPを開いて実行すると |
| |
この小さな図について、実はこれについてお話しします。 |
| |
私がゼロから作成した架空のデータセットを使用します。これは基本的に、グレートバリアリーフからシドニーまで南下する魚の群れに関するものです。 |
| |
グラフィックスクリプトにアクセスするには、カスタマイズに進んでください。 |
| |
そして、この小さなプラスボタンで新しいスクリプトを追加できます。最初は空ですが、JMPにはいくつかのサンプルが用意されています。 |
| |
だから、私はポリゴンスクリプトが好きなんです。とてもシンプルで、ただ三角形を描くだけですから。それをグラフに適用すると、そこに三角形が描かれているのがわかるでしょう。 |
| |
そして、必要なのはたった3行のコードだけでした。透明度を設定し、塗りつぶしの色を設定し、そしてポリゴンを描画するだけです。 |
| |
しかし、私たちが知りたいのは、これを実際にスクリプトに組み込む方法です。それを確認する最も簡単な方法は、回答ボタンをクリックすることです。 |
| |
そして、スクリプトをスクリプトウィンドウに保存します。これがそのスクリプトです。まず、緯度と経度を使って私の小さな二変数プラットフォームが起動されます。そしてその下には、グラフィックスクリプトを追加するディスパッチがあります。 |
| |
そして、サンプルの3行。 |
| |
これが、グラフィックスクリプトを使った非常にシンプルな例です。 |
| |
これから埋め込むのはグラフィックスクリプトです。このスクリプトは、各ポイントの上に浮かぶように棒グラフを描画します。 |
| |
そして、このアプリケーションで最初に行うことは、透明度を設定し、それから小さなグラフィックの背景を描画することです。 |
| |
飢えのため、力のため、そして速さのため。 |
| |
それでは、スクリプト全体をお見せします。これは他のものに依存しているためです。主に色や背景などのために設定した定数に依存しています。 |
| |
これは、私が作成した描画バー関数です。位置、長さ、色を受け取ります。そのため、各バーに使用できます。このスクリプトを実行すると、 |
| |
ほら、小さなグラフィックがあるよ |
| |
ゲームにインスパイアされたような健康モニターが、魚たちが東オーストラリア海流に乗ってシドニーを目指して泳ぎ下り、競争する様子を、それぞれの魚の上に浮かんでいる。 |
| |
これは、その機能がどのように動作するのかを、基本的に段階的に説明するものです。まず、画面上にマーカーを配置し、各マーカーのピクセル原点を設定しました。 |
| |
そして背景を描き始めますが、それにはいくつかの手順が必要です。最初に線の太さを設定したときは、実際には何も見えません。 |
| |
次に色を設定します。色は黒です。そして、移動と線描画を実行して、背景と非常に太い線を描画します。 |
| |
各棒グラフについて、まず棒の色を設定し、位置に移動させてから線を引きます。次に背景を描画し、その色を設定して棒グラフを延長します。もちろん、他の2本の線についても同じ手順を繰り返します。 |
| |
これで、さまざまなグラフィック関数が使えるようになりました。JSL構文リファレンスのグラフィック関数のセクションはこちらです。これを使って、好きなものを作ってみてください。さあ、始めてみましょう。 |
| |
次に、カスタムマップの使用について説明します。 |
| |
すみません。 |
| |
カスタムマップを使用するには、基本的に2つのテーブルを用意します。1つ目のテーブルは、使用したいすべての図形の定義です。2つ目のテーブルは、そのテーブル内の図形に名前を付けるものです。 |
| |
そして、この名前列については、基本的にマップロール列プロパティを追加する必要があります。そのプロパティは、シェイプ名定義のタイプである必要があります。後ほどご説明します。 |
| |
では、非常に簡単な例を挙げると、もちろん、必要なのは Big Class です。そして、非常に簡単な例を挙げます。 |
| |
それに対応する地図も必要です。ただ2つの長方形があるだけです。それらのファイルを開いてみます。 |
| |
先ほども言ったように、とても小さな地図です。そして、これらの座標をお見せするために、少し |
| |
ここに、基本的にポイントを表示するスクリプトがあります。 |
| |
一番上の4つをハイライトすると、それが一番上の長方形になり、次の4つが一番下の長方形になります。 |
| |
上段は重量、下段は高さです。列のプロパティを見ると、 |
| |
これはマップの役割、形状名の定義です。 |
| |
このマップが準備できたら、ビッグクラスを開設できます。 |
| |
そのまま再利用することはできません。まず最初に、身長と体重の列を取り出して積み重ねる必要があります。そこで、テーブルを作成します。積み重ねてみましょう。 |
| |
そして今、これらの列が積み重ねられたテーブルができました。 |
| |
ラベルには高さと太さが交互に並んでいることがわかります。これをマップファイルに接続するために必要なことは、別の列プロパティを追加することです。 |
| |
これは一番下まで来ています。マップロールをもう一度。ただし、シェイプ名の定義とは言わず、シェイプ名の使用と言います。そして、選択する必要があります。 |
| |
マップファイル、マップファイルの名前。 |
| |
また、列名を「名前」に設定してください。 |
| |
これで完了です。これでデータが得られましたので、実際にグラフに使用できます。 |
| |
私たちが目指すグラフは、基本的にラベル列をマップの形状として使用し、上部と下部の形状を設定し、その後、すべてのデータを含むデータ列をドラッグインします。 |
| |
色の役割に。これで、ビッグクラスの生徒全員の概要が分かりましたが、本当に知りたいのは |
| |
生徒一人につき1枚。それをラップロールにドラッグすると少し窮屈ですが、行ごとのレベルを設定して10に設定することで広げます。 |
| |
よし、これでいい。まさに私が目指していたものだ。そしてこれは便利なグラフになるだろう。 |
| |
それ自体で。 |
| |
では、もう少し複雑なことをやってみましょう。 |
| |
ええと、実際には、もっと複雑なことをする場合は、カスタムマップ作成アドインを使用した方が良いかもしれません。 |
| |
これは素晴らしい追加機能です。画像をドラッグして、その上をトレースすることができます。 |
| |
すべての図形をなぞり終えたら、「ランダムデータで完了」をクリックすると、 |
| |
必要な2つのシェープファイルと、カスタムマップをテストするためのランダムデータセットを用意しました。こちらは、4つの変数と中央に1つの変数を配置した例です。つまり、最初にスライドでご覧いただいたものの正方形バージョンです。 |
| |
しかし、それは私たちが目指していたものとは少し違いました。私たちは丸みを帯びたものが欲しかったのです。確かメイフィールド博士がそれを「複雑なパイ」と呼んだと思います。 |
| |
それが正式な用語かどうかは分かりませんが、私はこれらのものをスクリプトで構築することに決めました。 |
| |
そこで私がやりたかったのは、シェイプファイルを作成して、医師が指示したものを確実に作成することでした。つまり、中央に何かがある4つのシェイプです。 |
| |
そして私はこう思った。「私はプログラマーだ。もう少し工夫して、もう少し柔軟性を持たせたい。」 |
| |
そこで、同じことをしたいけれど、変数は2つだけで、それに加えて平均値や中心値などの変数、あるいはそれ以上の変数を使いたい人もいるのではないかと思ったのです。 |
| |
そして、ひし形や正方形のような様々な形状も作れるといいなと思いました。私は天才ではありません。運が良かっただけです。実際、Xan Greggさんが「JMPでこの極座標プロットを作るにはどうすればいいですか?」という投稿に回答してくれました。 |
| |
そして、それがやってくる。 |
| |
さあ、どうぞ |
| |
彼らはこのような形状を探していたのですが、それはまさに私が求めていたものと非常によく似ていました。 |
| |
Xanがやってくれたことは本当に素晴らしかった。これは柔軟性の高いスクリプトで、円周上に扇形を生成する機能がある。ただ、中心位置を指定する機能と、私が望んでいた特定の方法でファイル名を付ける機能が欠けていた。 |
| |
でも、それほど難しくはありませんでした。それが私のスクリプトの働きです。複雑なパイを実行すると、このパイのレシピが表示され、複雑なパイメーカーが開きます。次に、材料を追加します。まず、形状の数を指定する必要があります。 |
| |
そして、それを中央に配置するか、上部に配置するか、少し横にずらすかを決めます。 |
| |
それから、滑らかさを表す変数もあります。 |
| |
そして、内径、充填量を多くするか少なくするか、外径も指定する必要があります。 |
| |
もちろん、次のステップはスクリプトを実行することです。そうすれば、 |
| |
これら |
| |
シェイプファイルを用意し、カスタムパイメーカーやカスタムマップアドインのようにサンプルテストも実行します。それでは、5つの図形を使った複雑なパイの例を見てみましょう。 |
| |
そして滑らかさを7に設定します。5か6を使ってもおそらく問題ないでしょう。 |
| |
非常に小さく描かれています。サイズ自体はそれほど重要ではありません。重要なのは、相対的な内半径と外半径です。メイフィールド博士もおおよそこの比率で考えていたため、内半径を4、外半径を9にしました。 |
| |
では、実際にこれらのものをどのように使用できるか見ていきましょう。ビッグクラスのデモで行ったように、列を積み重ねる必要があります。ただし、1つ異なる点は、シェープファイルに強度と健康の変数がないことです。実際には、 |
| |
シェープファイルでは、それらはウェッジ 1、2、3、 |
| |
中心。 |
| |
だから私は構築する必要がある |
| |
ファイルは |
| |
その二つを結びつける。 |
| |
まず、積み重ねられた小さな学校の例があります。 |
| |
私は、健康、強さ、スピードの列を積み重ねることでそれを実現しました。 |
| |
そして、これが私が使用するシェープファイルです。名前はシェープファイルです。 |
| |
列プロパティがあることに注目してください |
| |
マップの役割、 |
| |
はい、マップロール定義です。 |
| |
そして、それは独自の形状を作成する際に必要となるものです。 |
| |
つまり、リンクされたファイル、つまり列をシェイプにマッピングしたものは、基本的に私のラベルをリストすることによって構築されました。 |
| |
積み重ねられたファイル。 |
| |
そして別の列「図形名」には、図形の名前をリストしました。 |
| |
ここで重要なのは、図形の名前が |
| |
マップロールのプロパティがありますが、こちらはシェイプ名の使用です。 |
| |
このデータラベル列にはリンクIDが付与されるため、仮想的に私のスタックテーブルに結合できます。 |
| |
これでテーブルの設定はすべて完了したので、 |
| |
次にやるべきことは、実際にグラフを作成することです。 |
| |
さて、手順は以前と似ています。唯一の違いは、ラベルをマップの形状にドラッグする代わりに、仮想結合列を使用して、それをマップの形状にドラッグすると、目的の形状が得られることです。次に必要なのは、カラー列にデータを追加することです。 |
| |
そして、名前をラップに追加します。そして、私の魚はすべて |
| |
それぞれにグラフィックがあります。適切なグラデーションを得るために、ここでグラデーションを選択します。これがまさにこれです。 |
| |
緑色がきちんと出ているか確認したいので、色を反転させます。 |
| |
これで終わりです。これが |
| |
この地図はそれ自体で非常に便利です。なぜなら、それぞれの魚の様子を見ることができるからです。もちろん、私はこれをさらに発展させたいと思っています。 |
| |
私がやりたいのは、それらの画像をツールチップに表示できるようにすることです。 |
| |
そのためには、データテーブルを作成します。 |
| |
私が持っていたファイルとあの画像を返してください。 |
| |
ここで何が起こるかというと、赤い三角形の人の下にデータテーブルを作成する機能があります。そして、これによって新しいデータテーブルが生成されます。 |
| |
これらの画像はすべて、特にリンクを貼っておけば非常に便利です。これをリンクIDとして設定すれば、私のシンプルな小さな学校ファイルからそれを参照できるようになり、各マーカーから各キャラクターのグラフを見つけることができるようになります。 |
| |
さて、実はこれは別のファイルに保存してあるので、そちらを開きます。ファイル名は「health images」です。 |
| |
だから、もうこれは必要ない。 |
| |
そして、もう積み重ねたファイルは必要ありません。 |
| |
しかし、私たちが本当に必要としているのは、私が最初に挙げたような小規模校の事例なのです。 |
| |
これらを表示させるために最初に行う必要があることは |
| |
グラフは、そのイメージ列、その仮想列を設定します。 |
| |
ラベルに記載されているとおりです。 |
| |
簡単なグラフでも同様のことができます。 |
| |
では、すでに例があります...ええと、もう一度これを開いてみます。いいでしょう。私のレーススクリプトです。ゼロから始めていることをお見せするためです。しかし、この列にラベルを付けたので、これらのグラフィックのいずれかにマウスカーソルを合わせると、3つの |
| |
このグラフィックの情報の一部であり、これらの文字をいくつでもピン留めすることができます。 |
| |
これが、これらのグラフィックを使用する方法の一つです。 |
| |
別の方法としては、マーカーとして使用する方法があります。 |
| |
そして、これから表示されるグラフィックはポイントの上に浮かぶように表示され、以前使用していたひし形の図形の代わりに使われます。 |
| |
健康に関する画像や、小さな学校の画像、そしてあの図表も復活させます。 |
| |
ということで、今、私たちはこれらのダイヤモンドを持っています。それらをこちらの形に変えるには、 |
| |
さらに追加しなければならなかった |
| |
この仮想参加列にバッジを付けます。とても人気が出てきているので、マーカーとして使用します。新しいバッジが表示されます。そして私の後ろには、 |
| |
これらの画像がシーンに配置されているのがお分かりいただけると思います。最後に一つだけ気になる点があります。画像の周りの白い部分があまり好きではないのですが、これはグラフ画像自体に組み込まれているものです。 |
| |
そして、その問題を解決する方法の一つは、白い領域を見つけてアルファチャンネルを設定し、それらを透明にするスクリプトを使うことです。これで、きれいなグラフが得られます。 |
| |
背景は四角形ではなく、丸い形にしてください。もう一つ、マーカーのサイズを大きくしてみるのも良いかもしれません。 |
| |
そして、11まで上げることができます。 |
| |
どうですか? ほぼ私が持っていたものと同じです。10の方が良かったかもしれません。でも、11にするのが好きです。わかりました、それでは |
| |
マーカーから使用します。もう少し複雑なグラフを作成したいのです。アンダーソン・メイフィールド博士が目指していたのは、マーカーの背後にあるヒートマップです。これはかなり複雑ですが、JMPなら処理できます。これは実際には等高線です。 |
| |
ということで、ここにあるのは小さな学校の別バージョンです。でも今回は、海水温を扱っています。 |
| |
一番下の方に |
| |
そしてそれらは非表示になっているので、実際のポイントとして表示されることはありません。 |
| |
ということで、この件については既にイメージを作成済みです。 |
| |
実際、以前作成したものと同じ画像です。 |
| |
まず最初に |
| |
最後に、私が目指しているものを実際に見ていただくために、ここに表示します。つまり、私は基本的にこれらのグラフィックを表示したいのです。 |
| |
等高線の上にカーソルを合わせると、それぞれのものが何であるかを示す凡例がいくつか表示されます。 |
| |
それほど難しくはないはずです。地図が既に配置されていて、緯度経度がx軸とy軸に既に設定されている状態から始めます。 |
| |
まず最初に、輪郭線を追加したいと思います。 |
| |
そして、少し色味を加える必要があるので、温度ロールをカラーロールの上にドラッグして、この輪郭のレベル数を調整します。 |
| |
アルファ値を少し変更して、滑らかさを加えてください。 |
| |
次にやりたいことは、それを少し透明にすることです。 |
| |
それには0.6を掛けておきましょう。 |
| |
それは以前とほぼ同じです。マーカーを追加するには、2 つの方法があります。ポイントを Shift キーを押しながらクリックするか、ドラッグして追加します。ドラッグして追加するには、 |
| |
その後、マーカーのサイズを再度設定できます。 |
| |
それをすることで |
| |
ここに行って他のことをしましょう。今回は10を使ってみましょう。11は少し大きすぎたと思います。よし、いい感じですね。もうすぐ完成です。この凡例に取り組みたいのですが、これらの色をどうやって入れるのでしょうか?ええと、すでに体力ロールはあります。 |
| |
そして、それを隅までドラッグして、2つ目のカラーロールを追加するだけです。最初はグラフが少し乱れてしまいます。 |
| |
それは対処可能です。問題は、輪郭線が実際には健康状態の役割を使用する必要がないことです。そのため、それを無効にすれば、私たちが望む状態に戻ります。 |
| |
次に、凡例に色を追加します。これも以前と同じようにカスタマイズできます。 |
| |
今回はもう少し増やしてみよう。ラベルを4つ付けたいんだ。 |
| |
5から始めて、 |
| |
20. |
| |
ああ、色も反転させたかったんです。 |
| |
これでほぼ完成です。あと少しだけ見栄えを良くしたいですね。凡例にいくつか修正したい箇所があります。 |
| |
凡例設定に移動して、あまり役に立たないと思われる項目を削除し、体力に関する凡例を一番上に移動してください。 |
| |
これで完成です。自分が目指していたものに、できる限り近い形で近づけられたと思います。 |
| |
だから、これは処分できますね。もう全員がこれを必要としているとは思えません。 |
| |
でも、もう少し付け加えたいことがあります。 |
| |
この凡例を追加するのはどうでしょうか。この図のどの部分が何を表しているのか、つまり空腹、スピード、筋力、健康状態などを把握する方法が実際にはなかったからです。幸いなことに、私たちは |
| |
マッピングファイル。列名から形状への変換を表します。 |
| |
では、ちょっとだけそれを開いてみます。 |
| |
ご覧のとおり、すべての行にラベルを付け、データラベル列にもラベルを付けました。つまり、グラフを作成すると、 |
| |
すべてラベル付けされます。これは本当に簡単です。図形の名前を取得してマップロールにドラッグするだけで、このグラフィックは完成です。 |
| |
だから、それを自分のシーンに挿入したい場合は、それを選択してプラス記号をクリックし、コピーするのが一番良い方法です。 |
| |
それから画像編集アプリケーションを開いてディスクに保存します。もちろん、それはもう済ませてあります。それで、 |
| |
それができたら表示して、グラフィックをもう一度表示する必要があります。 |
| |
わあ、これをドラッグするだけで入れられるんですね。 |
| |
ほら、ありました。あれ、ないですね。では、見つける方法があります。カスタマイズに移動してください。通常、画像をドラッグすると背景画像もドラッグされるので、背景にドロップされます。 |
| |
それでは、あとは…何が起こっているのか見えるようにこれをどかしましょう…前に出てください。さあ、来ます。 |
| |
よし、これでいい。前面に来た。ちょっと明るすぎるので、透明度を少し上げたい。 |
| |
それでは、0.8 を入れてみましょう。 |
| |
あとはそれを隅っこに引きずり込めば、ほぼ完了です。 |
| |
さて、たくさんのファイルがあり、多くの作業が必要でした。では、使用したすべてのファイルをまとめてみましょう。必要な2つのマップファイル、シェープファイルを生成するために、複雑なパイメーカーを使用しました。小さな学校を取り上げ、それを積み重ねました。 |
| |
マップロールを持つ名前ファイルを指す必要のあるマッピングファイルの形状を作成するために、この列を作成しました。リンク参照を使用して、小さな学校スタックへの仮想結合を行いました。 |
| |
次に、データテーブルにしたいグラフィックを作成し、それをhealth images.jmpに保存しました。 |
| |
もちろん、そのグラフィックを作成するためには、元の小さな学校と仮想的に結合させる必要がありました。 |
| |
そして、小さな学校の海水温についても同じことをしました。健康に関する画像へのリンクです。 |
| |
私はただ...列をシェープファイルに変換して、海洋温度で作成しようとしたグラフの凡例を描画し、それを基本的にドラッグインして使用しました。 |
| |
これで、私がやりたかった2Dのデモンストレーションは終わりです。ここで少し休憩して、次は3Dの世界、そしてウェブの世界へと進んでいきましょう。 |
| |
応用。 |
| |
わかった。 |
| |
これが私のWeb 3D散布図アプリケーションです。 |
| |
そして、これからお見せするのは、JMPからどのようにデータをこのソフトに取り込んだかということです。 |
| |
私のアプリケーションはJMPの3D散布図をベースにしています。これは、その表示方法を改めてお伝えするためのものです。 |
| |
それでは、そのデモを少しお見せしましょう。 |
| |
つまり、基本的には...これからいくつかの機能を紹介しますが、まずはさまざまなデータセットを選択できる機能から始まります。これがダイヤモンドのデータセットです。 |
| |
そしてもちろん、これがポイントを描くということです。それが全体のアイデアです。そして、それらはこの小さな球体で描かれます。その描き方については、後ほど説明します。 |
| |
しかし、JMPと同様に、回転させたり、ズームしたり、前後に移動させたりすることもできます。 |
| |
さらに、ホバーラベルも付いています。右下隅に軸とグリッドを描画し、少しだけカスタマイズを加えています。それほど大掛かりなものではありません。 |
| |
背景を変更したり、壁の色を設定したりできます。少し青色にしてみましょう。 |
| |
ええ、もしかしたら気に入らないかもしれませんね。でもこれはあくまでデモです。マーカーのサイズは後で変更できますよ。 |
| |
それはウェブ上に載っています。 |
| |
さて、このアプリケーションの開発を始めたとき、まず最初にやりたかったのは、ウェブ上でちゃんと動作するか、iPhoneやiPadで問題なく動作するかということでした。 |
| |
それらのマシンは私のデスクトップほど強力ではないからです。そこで、組み込みの3Dまたは点の数が増える3つのランダムデータセットを作成しました。私は行って... |
| |
低出力デバイスで試してみる価値があるのは25,000だと考えていましたが、高出力デバイスであれば実際にはもっと高い値まで上げることができます。 |
| |
そこで私は、実際のデータを取り入れてみようと思い、有名なアヤメのデータセットを見つけました。それはCSV(カンマ区切り変数)形式でした。 |
| |
そして私はそれを取り込んだ。しかし、それを自分の内部構造に変換するために、いくつかコードを書く必要があった。 |
| |
そこで私は、JMPにはたくさんのデータセットがあるから、それらを取り込んだ方がいいと考えました。そこで、車、ダイヤモンド、サイトメトリーのデータを取り込みました。唯一の違いはサイトメトリーで、あまり良いデータはありませんでした。 |
| |
色を使用するためのカテゴリがあり、実際には、色を使用していないグラフを受け入れるように私のアプリケーションを変更する必要がありました。 |
| |
アプリケーションは非常にシンプルです。1ページだけのWebアプリです。HTMLファイルが1つ、JavaScriptファイルがいくつか、サードパーティライブラリがいくつか、フォントが1つ、テクスチャが1つあります。テクスチャは、図形に使用されるボールです。 |
| |
私がゲーム業界で使っている技術は、パーティクルまたはパーティクルシステムです。これらはシミュレーションゲームや3Dビジュアライゼーションで非常によく使われています。炎、煙、花火、雲など、クールなエフェクトを作成できます。 |
| |
以前、商用ゲームエンジンの開発に携わった経験があり、私の担当業務はパーティクルシステムを改良することでした。 |
| |
ということで、実はこれに関しては既に経験がありました。ええと、それはJavaScriptではなくC++の世界でしたが。でも、インタラクティブなHTML5とJMPをかなり長い間扱ってきたので、そろそろ試してみようと思ったんです。 |
| |
私の二つの情熱を融合させ、パーティクルシステムを使ったウェブベースのバージョンを開発しようと考えました。幸運なことに、Three.jsというライブラリを見つけることができました。 |
| |
ハードウェアアクセラレーションによる3D描画が可能で、優れたドキュメントが用意されており、パーティクルシステムを含む多くのコード例も含まれているため、アプリケーションの構築は非常に容易でした。 |
| |
実際、私にとって一番難しかったのは、JMPからデータをどうやって取り込むかを考えることでした。 |
| |
でも、スクリプトは共有します。私がやったことの一つは、これらのオブジェクトを簡単に使えるようにしたことです。 |
| |
私のアプリケーションでは、JavaScriptオブジェクトの配列を作成し、数値列には最小値と最大値を追加することで、JavaScriptで計算する必要がないようにしました。もちろん、JMPはそういった計算に非常に優れています。 |
| |
えっと、カテゴリ、つまり色の列については、カテゴリ辞書のようなものを使う必要がありました。基本的には、カテゴリ名を1つのリストにまとめて、0から始まるインデックスでその値を参照するだけです。そういう仕組みになっています。 |
| |
ユーザーインターフェースを作ってみたらいいなと思ったんです。実際、それは簡単にできました。後ほどお見せしますね。基本的には、x、y、z の列を数値に限定するだけでいいんです。 |
| |
そして、色の役割を表すカテゴリ列に限定します。 |
| |
それでは、そのコードを見てみましょう。 |
| |
それではまず、非常にシンプルなデータセットの例を挙げてみましょう。 |
| |
そして、ダイアログの作成は本当に簡単でした。列ダイアログを使用し、数値列と色列にそれぞれ必要な値を指定し、モデリングタイプがカテゴリカル(順序尺度と名義尺度の両方を持つ)であることを確認しました。 |
| |
次に、列のデータを取得し、必要なJavaScriptオブジェクトを作成します。これが最小値と最大値の文字列です。そして、これはこれらのオブジェクトの文字列を作成しているだけです。 |
| |
そして、色の列がある場合も同様の処理を行います。ただし、文字列を取得してJavaScriptオブジェクトに格納する必要があるため、少し複雑になります。 |
| |
そして最後に、これをテキストファイルに保存するだけです。 |
| |
それでは、試してみましょう。 |
| |
もちろん、Big Classを使うので、ファイルサイズは小さくて済みます。 |
| |
そして |
| |
そこで私はスクリプトを実行しました。 |
| |
そして、「XYZ には何を入力しますか?」と聞かれました。身長と体重は既に選択済みで、年齢は数値列なので、それも使用します。性別は色分けに適しています。 |
| |
これで完了です。実際、ここにある出力はファイルの場所を示しています。 |
| |
ちょうど次のスライドにその資料があります。では、そちらに移りましょう。 |
| |
きっと皆さんは、JavaScript の Big Class がどんなものかずっと気になっていたことでしょう。これがその Big Class です。そして、3 つの要素が確認できます。 |
| |
数値列には最小値と最大値が、そして色列にはカテゴリを表すFとMの辞書があり、0は女性、1は男性を表します。さて、これで今回の講演の締めくくりです。お楽しみいただけたでしょうか。 |
| |
ご視聴ありがとうございました。ご質問があれば、お気軽にお尋ねください。 |