# ブラウザ上で複雑な集計を行いたい ## データ - 60 × 200 = 12,000 個くらい - それぞれ `1` - `6` の数値が入ってる - 5 属性 × 6 項目くらいのクロス集計用の情報が入ってる ## 要件 - ブラウザ上でリアルタイムにクロス集計などしたい - あれもしたいこれもしたい ## 1. API で集計データを返す - コードを書く - SQL でやるならこのへん - CASE 式 - GROUP BY 句 - 適切に cache を作る ## 2. JavaScript で集計する - API からは集計前の 12,000 個の値を返す - 各値は数字 1 文字なので UTF-8 だと 1 バイト - 区切り文字なしで送った場合 - 12,000 バイト = 12 KB - + メタデータ - JavaScript　頑張る - ライブラリ - [Danfo.js Documentation | Danfo.js](https://danfo.jsdata.org/) - _Danfo.js is an open-source, JavaScript library providing high-performance, intuitive, and easy-to-use data structures for manipulating and processing structured data._ - _Danfo.js is heavily inspired by the Pandas library and provides a similar interface and API. This means users familiar with the Pandas API can easily use Danfo.js._ - グラフも描画できる ## 3. WebAssembly を使う - JavaScript がつらかったら - 集計ロジック - パフォーマンス ### Python + Pandas - [Pyodide](https://pyodide.org/) - _Pyodide is a Python distribution for the browser and Node.js based on WebAssembly._ - _including numpy, pandas, scipy, matplotlib, and scikit-learn_ - Pandas で crosstab 集計する ### 何言語でも + SQLite - [sqlite3 WebAssembly & JavaScript Documentation Index](https://sqlite.org/wasm/doc/trunk/index.md) - CDN 利用時の CORS 違反回避テクニック - [SQLite WASM (v1.8.0) as BASE64 · GitHub](https://gist.github.com/SMUsamaShah/358fba159cb41fe469fc61e7db444c0e) - 集計用の SQL が API 側と近いものが使える - 方言の差はあるけど - CASE 式はある ### Rust 実装 - [[Rust + WebAssembly で行列計算]] - [[行列計算でクロス集計をする]]