スカラー演算

線形代数では、大きさのみで表され、方向をもたない量のことをスカラーと言います。

つまり、0 や 1、2 などの連続しない独立した単一の値がスカラーです。

ベクトルは１次元配列なので、ベクトルに対してスカラー演算を行う場合、forなどで処理を繰り返す必要があります。

しかしndarrayオブジェクトとして作成したベクトル列は、ループを使わず一括して処理が行えます。

ブロードキャスト

NumPyでは、ブロードキャストという仕組みを使うことで、成分ごとの演算をまとめて行うことができます。

ブロードキャストを行うための条件は下記のいずれかの条件を満たした場合です。

• 次元が等しい。
• 一方のベクトルまたは行列がスカラーである。（スカラー演算）

スカラー演算のサンプル

ベクトルに対して四則演算子でスカラー演算を行うと、すべての要素に対して演算を行うことができます。

[Google Colaboratory]

1
2
3
4
5
6
7
8

import numpy as np

# ベクトルを作成
import numpy as np
x = np.array([1, 2, 3, 4, 5], dtype = np.float)

# 足し算
x + 20

[実行結果]

[Google Colaboratory]

1
2

# 引き算
x - 10

[実行結果]

[Google Colaboratory]

1
2

# 掛け算
x * 100

[実行結果]

[Google Colaboratory]

1
2

# 割り算
x / 2

[実行結果]

[Google Colaboratory]

1
2

# 割り算の結果を整数だけにする
x // 3

[実行結果]

[Google Colaboratory]

1
2

# 剰余
x % 3

[実行結果]

ベクトルに対してそれぞれのスカラー演算が行われていることが確認できました。

NumPyとは

NumPyは数値計算ライブラリで、Pythonがデータサイエンスの分野で注目されるのに貢献しています。

Pythonの仕様を踏まえつつ、高度な数値計算を高速に行えるように設計されていてコアな部分はC言語で実装されています。

配列の作成

線形代数では、要素を縦または横に一列に並べたものをベクトルと呼びます。

プログラミングでいうと１次元の配列のことです。

NumPyの配列（ベクトル）はndarrayクラスのオブジェクトとして表現され、arrayコンストラクタで作成します。

[Google Colaboratory]

1
2
3
4
5
6

import numpy as np

x = np.array([1, 2, 3, 4, 5],   # 配列要素
             dtype = np.float   # 実数型(float)にする
             )
print(x)

arrayコンストラクタの第１引数には、カンマで区切って要素を指定します。

第２引数には配列の型をdtypeで指定します。今回は小数を含む実数型としてnp.floatを指定しています。

[実行結果]

実数型のベクトル（１次元配列）を作成することができました。

Yield curve Analysis

利回り曲線分析では、連邦政府が一定期間お金を借りるのにどれだけの費用がかかるかを示し、長期金利と短期金利の関係を明らかにすることができます。

今後、インフレ率がどの程度になるか、どれだけの経済成長が見られるか、などの将来的な経済の予測を行うこともできます。

Yield curve Analysis - https://dash.gallery/dash-yield-curve/

Fifa Dashboard

Fifa DashboardのPlayer Comparisonダッシュボードを使うと、サッカー選手の特徴を容易に比較することができます。

Fifa Dashboard - https://dash.gallery/dash-fifa-dashboard/

左右のドロップダウンリストからサッカー選手を選ぶと、二人の選手の特徴がそれぞれ表示されます。

真ん中のレーダーチャートには２人の選手のパス／ドリブル／ディフェンス／シュート／足の速さ／フィジカルに関する評価が重ねて表示されます。

また下のテーブルには、プレイヤーの様々な情報（氏名、国籍、ポジション、年棒、スキル、ポテンシャルなど）も表示されます。

Dash Autonomous Driving

今回ご紹介するアプリでは、自動運転の様子をシミュレーションします。

自動運転車の走行から収集されたシーンを読み込み、センサーによるデータ(LIDAR、パスなど) と手動で注釈を付けたデータ(境界ボックス) の両方を表示します。

Dash Autonomous Driving Demo - https://dash.gallery/dash-avs-explorer/

ユーザインターフェース(UI)は、基本的なUIと高度なUIがあり、モードをクリックすることで切り替えができます。

どちらのユーザインターフェース(UI)も streetscape.gl を使用して作成されており、Dash コンポーネントとして利用できます。

Match Analysis Tool

今回ご紹介するアプリは、サッカーにおけるチームの集合的な動きのパフォーマンスを分析したり、個々のプレーヤーの評価をしたりすることを支援します。

Match Analysis Tool - https://dash.gallery/dash-soccer-analytics/

Dash Enterprise のスナップショット・エンジンを使うと、ユーザーのプレイする様子（ポジショニングやボール回し）を把握できるようになります。

試合の様子を再現することでそれぞれのプレイを確認することができ、コーチやマネージャは下記のような分析を行うことができます。

• 個々のプレーヤーのオンボール、オフボールでの位置と動き
• 攻撃時と防御時のチームフォーメーション
• チーム全体の動きまたは一部の選手の動作

Explore object properties

Explore object propertiesでは、画像セグメンテーションからメタデータを抽出し、データテーブルとリンクして表示することができます。

Explore object properties - https://dash.gallery/dash-label-properties/

まず白血球の一種の画像が左側に表示されています。

この画像は、scikit-image を使用して領域ごと分割されおり、領域の面積や周囲の長さなどの多くのプロパティが左のテーブルに表示されます。

画像とデータテーブルは動的にリンクされていて、一方を操作するともう片方に情報が反映されます。

使い方

このアプリケーションの操作方法は以下の通りです。

• 画像内の領域にカーソルを合わせると、それらに関する情報が表示され、データテーブル内の対応する行が強調表示されます。
• データテーブルの対応する列を選択すると、各領域に表示される情報が変更されます。
• データテーブルの行をクリックすると、対応する領域の周りにアウトラインが描画されます。
• データテーブルをフィルタリングすると、対応する領域が抽出されます。
• データテーブルから行を削除すると、対応する領域が画像から削除されます。

Alignment Chart

Alignment Viewerコンポーネントは、FASTAファイル または Clustalファイルから複数のゲノムまたはプロテオミクス配列を表示させることができます。

Alignment Chart - https://dash.gallery/dash-alignment-chart/

マルチ シーケンス アラインメント ビューアーとなっており、カラースケール サポート、コンセンサス シーケンス、ギャップや保存情報など複数のサブプロットを表示することができます。

Alignment Viewer は、強化されたコンポーネントであるWebGL アーキテクチャ のおかげで、アラインメントのサイズに関係なく遺伝子やタンパク質をすばやく表示できます。

またスライダーやヒートマップを利用して、長いシーケンスでもすばやくスクロールすることが可能です。

AlignmentChart ではシーケンスのチャートのみを表示しますが、AlignmentViewer にはカラースケール、ヒートマップ、およびサブプロットのコントロールが統合されているので、シーケンスをインタラクティブに制御できます。

今回からはDashを使ったいろいろなアプリケーションをご紹介します。

MANUFACTURING SPC DASHBOARD

MANUFACTURING SPC DASHBOARDは、製造生産ラインでリアルタイムにプロセス品質を監視するためのダッシュボードです。

MANUFACTURING SPC DASHBOARD - https://dash.gallery/dash-manufacture-spc-dashboard/

STARTボタンをクリックすると測定が開始され、STOPボタンをクリックすると測定が停止します。

画面真ん中にあるテーブルのParameter 列のボタンをクリックすると、下部パネルのLive SPC Chart(測定傾向線)に詳細が表示されます。

上部テーブルのSparkLine列と下部パネルのチャートは、プロセス・モニターを表示しています。

リアルタイム測定をシミュレートしており 測定中は1秒おきに更新されます。

制御不能 (OOC)を示す信号が発生すると、アラートが表示されます。

Dash Multiple slicers

前回記事で紹介したDash Slicerは複数設定することができます。

今回は複数のスライサー を各ディメンションごとに作成し、３つのレイアウトに配置します。

各ビューには、他のスライサーの位置を示すインジケーターラインが含まれます。

各スライサーには特定の色 (自動選択) が割り当てられ画像の四隅に表示されます。他のビュー上でのスライサーの位置はインジケーターラインの色で判断することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import dash
import dash_html_components as html
import imageio
from dash_slicer import VolumeSlicer

app = dash.Dash(__name__, update_title=None)

vol = imageio.volread("imageio:stent.npz")
slicer0 = VolumeSlicer(app, vol, axis=0)
slicer1 = VolumeSlicer(app, vol, axis=1)
slicer2 = VolumeSlicer(app, vol, axis=2)

slicer0.graph.config["scrollZoom"] = False
slicer1.graph.config["scrollZoom"] = False
slicer2.graph.config["scrollZoom"] = False

app.layout = html.Div(
    style={
        "display": "grid",
        "gridTemplateColumns": "33% 33% 33%",
    },
    children=[
        html.Div([slicer0.graph, html.Br(), slicer0.slider, *slicer0.stores]),
        html.Div([slicer1.graph, html.Br(), slicer1.slider, *slicer1.stores]),
        html.Div([slicer2.graph, html.Br(), slicer2.slider, *slicer2.stores]),
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True, dev_tools_props_check=False)

[ブラウザで表示]

３種類の断面図が表示されました。

画面下部のスライダーを操作すると、３種類のビューのスライス位置が全て更新されます。

まだドラッグして画像の表示位置を変更したり、zoom機能で拡大して表示したりすることも可能です。