Power Appsでデータソースによって自動生成できるアプリをアレンジして、飲んだ日本酒を記録するアプリを作るシリーズです。
六角形のレーダーチャートで日本酒のフレーバーを指定し、コサイン類似度で検索値や選択した銘柄に似ている銘柄を検索します。
レーダーチャートの作り方
多角形でパラメーターを評価できるレーダーチャートの作り方を紹介します。
テーブルの設定
ボタンなどでレーダーチャートの値を初期化します。
ClearCollect(
col,
AddColumns(
Sequence(SliderCorner.Value, 1),
"Val",
200
)
)Val列が初期値となり、SliderCorner.Valueで何角形になるかを指定します。
ギャラリーの設定
ギャラリーを設置して、Itemsを先ほど設定したcolに、テンプレートのサイズを1に設定します。
次に円を一つだけ追加してXとYをギャラリーの中心になるよう、
X：Parent.Width / 2
Y：Parent.Height / 2 - ThisItem.Value
を設定します。Yはテンプレートのサイズごとにずれていくので、 - ThisItem.Valueで調整します。
ギャラリーコントロールの範囲内でしか点は表示されないので注意です。
レーダーチャートの点の追加
円をもう一つ追加し、
X：ThisItem.Val * Cos(Radians(360 / Parent.AllItemsCount * (ThisItem.Value - 1) - 90)) + CircleCenter.X
Y：ThisItem.Val * Sin(Radians(360 / Parent.AllItemsCount * (ThisItem.Value - 1) - 90)) - ThisItem.Value + CircleCenter.Y
に設定します。
極座標と直交座標の変換でX = rcosθ, Y = rsinθを用いて計算しています。
ここでrは中心からの距離、θは0°（ここでは画面で一番上にくる頂点と中心を基準となる）からの角度となるようにしています。
これでレーダーチャートが描けました。
スライダーによる値の変更
スライダーを設置してOnChangeに以下の数式を設定することで、選択した点の位置を変更することができます。
OnChange = Patch(col, Gallery1.Selected, {Val:Self.Value})
Default = Gallery1.Selected.Val
コサイン類似度での検索
レイアウト調整
レーダーチャートを設置するために、以下のコントロールを削除してItemsを日本酒記録テーブルのみにします。
画面上に垂直コンテナーを設置し、ギャラリーをその中に切り取り→ペーストで格納します。
レーダーチャート設置のためのコンテナーをContainer1内に配置します。
レーダーチャートの設置
前項で解説したレーダーチャートをコンテナー内に設置します。
初期化ボタンのOnSelectを以下の数式に変更します。
ClearCollect(
col,
AddColumns(
Sequence(6, 1),
"Val",
200,
"Flavor",
Switch(
ThisRecord.Value,
1, "華やか",
2, "芳醇",
3, "重厚",
4, "穏やか",
5, "ドライ",
6, "軽快"
)
)
)ギャラリーにラベルを追加してXとYをCircle1のXとYを参照するようにすれば、以下のようになります。
コサイン類似度での検索ロジック
さけのわAPIで取得できるフレーバーを1行6列のベクトルに見立てて計算します。
参考までに、1行3列の[1,2,3]と[3,2,1]のコサイン類似度を求める計算です。
計算ボタンのOnSelectに以下の数式を設定します。
ClearCollect(
colItems,
AddColumns(
Ungroup(
AddColumns(
ColBrands,
"Flavors",
Filter(ColFlavorCharts, brandId = id)
),
"Flavors"
),
"コサイン類似度",
Sum(
Index(col, 1).Val / 400 * ThisRecord.f1,
Index(col, 2).Val / 400 * ThisRecord.f2,
Index(col, 3).Val / 400 * ThisRecord.f3,
Index(col, 4).Val / 400 * ThisRecord.f4,
Index(col, 5).Val / 400 * ThisRecord.f5,
Index(col, 6).Val / 400 * ThisRecord.f6
)
/
Sqrt(
Sum(
[
Power(Index(col, 1).Val / 400, 2),
Power(Index(col, 2).Val / 400, 2),
Power(Index(col, 3).Val / 400, 2),
Power(Index(col, 4).Val / 400, 2),
Power(Index(col, 5).Val / 400, 2),
Power(Index(col, 6).Val / 400, 2)
]
, Value
)
)
*
Sqrt(
Sum(
[
Power(ThisRecord.f1, 2),
Power(ThisRecord.f2, 2),
Power(ThisRecord.f3, 2),
Power(ThisRecord.f4, 2),
Power(ThisRecord.f5, 2),
Power(ThisRecord.f6, 2)
]
, Value
)
)
)
)colItemsをコサイン類似度でソートすれば、レーダーチャートに近い日本酒を検索することができます。
またギャラリーにコピーボタンを設置し、以下の数式を設定することで選択した日本酒のフレーバーに近い日本酒を検索することもできます。
UpdateIf(
col,
Flavor = "華やか",
{Val:ThisItem.f1 * 400},
Flavor = "芳醇",
{Val:ThisItem.f2 * 400},
Flavor = "重厚",
{Val:ThisItem.f3 * 400},
Flavor = "穏やか",
{Val:ThisItem.f4 * 400},
Flavor = "ドライ",
{Val:ThisItem.f5 * 400},
Flavor = "軽快",
{Val:ThisItem.f6 * 400}
)
続きます
私の味評価関数の出力はBoolean型なので、日本酒をうまいかまずいかしかでしか評価できません。
Number型やText型で日本酒を評価できる方々をとても尊敬しています。
コメント