Tableau Desktopで時系列の変動を アニメーションで可視化して見た

Tabelauでアニメーションってどうやるのか？そんな疑問を基本に忠実にアプローチしたかと思われたが、ゴリゴリエンジニアリングで魔改造を始めた的なネタです。
2025年5月24日に巣鴨でTableauもくもく& LT会 Vol.3にてLT発表した内容です(Apprentice時代の者になります)
https://techplay.jp/event/977501

Transcript

1. 〜巣鴨でTableauもくもく& LT会 Vol.3〜 Tableau Desktopで時系列の変動を アニメーションで可視化して見た 株式会社キュービック テクノロジーエキスパートセンター Tech Lead/データエンジニア 尾﨑勇太　2025.05.25 あなたは最後騙される
2. 自己紹介 2 師匠：のぞぴぴさん 表のお仕事 所属組織：西新宿のデージタルマーケティングの会社 役割：Tech Lead/データエンジニア 業務領域 「データに関わる全て」 ざき（おざき ゆうた）
3. 3 どうせやるなら何か面白い ことをしたい
4. 4 そういえばKTさんが何かアニ メーション作っていたな
5. あれってどうやって作ってたんだろうか・・・ 5 ※上記はイメージです 3年前ぐらいにXで見かけた KTさんが何かの登壇ように仕込んでいた何かのviz…
6. 色々あるらしい 6 Tableau Desktop ✅ あり（ページスライダーで変化を表 現） ✅ 手動・スライサーで可視化 ❌ 不可 ❌ 対応なし ✅ ローカルで可能 ❌ 直接埋め込み不可 方法 アニメーション (ページ再生機能 ) パラメータ制御 アニメ GIF出力 JavaScript連携 データ出力 /API連携 埋め込み形式 Tableau Public ❌ なし（再生ボタン不可） ✅ 公開時に保持される ❌ 不可 ❌ 対応なし ❌ 制限あり ✅ iframeで可能 Web埋め込み(HTML/JS) ❌ iframeでは不可 ✅ JS制御で疑似表現可能 ✅ JSからAPI経由で変更可能（ PublicでもOK） ✅ 静的画像出力＋ JS切替で擬似アニメ化可能 ✅ Tableau JavaScript API でパラメータ操作可 ⚠ JS APIでのデータ取得は Publicでは制限あり ✅ iframe または JS（tableau.Viz）で制御可能
7. お手軽なのこのあたり 7 Tableau Desktop ✅ あり（ページスライダーで変化を表 現） ✅ 手動・スライサーで可視化 ❌ 不可 ❌ 対応なし ✅ ローカルで可能 ❌ 直接埋め込み不可 方法 アニメーション (ページ再生機能 ) パラメータ制御 アニメ GIF出力 JavaScript連携 データ出力 /API連携 埋め込み形式 Tableau Public ❌ なし（再生ボタン不可） ✅ 公開時に保持される ❌ 不可 ❌ 対応なし ❌ 制限あり ✅ iframeで可能 Web埋め込み(HTML/JS) ❌ iframeでは不可 ✅ JS制御で疑似表現可能 ✅ JSからAPI経由で変更可能（ PublicでもOK） ✅ 静的画像出力＋ JS切替で擬似アニメ化可能 ✅ Tableau JavaScript API でパラメータ操作可 ⚠ JS APIでのデータ取得は Publicでは制限あり ✅ iframe または JS（tableau.Viz）で制御可能
8. 実際に試してみましょう。まずはオーソドックスに 8 Tableau Desktop ✅ あり（ページスライダーで変化を表 現） ✅ 手動・スライサーで可視化 ❌ 不可 ❌ 対応なし ✅ ローカルで可能 ❌ 直接埋め込み不可 方法 アニメーション (ページ再生機能 ) パラメータ制御 アニメ GIF出力 JavaScript連携 データ出力 /API連携 埋め込み形式 Tableau Public ❌ なし（再生ボタン不可） ✅ 公開時に保持される ❌ 不可 ❌ 対応なし ❌ 制限あり ✅ iframeで可能 Web埋め込み(HTML/JS) ❌ iframeでは不可 ✅ JS制御で疑似表現可能 ✅ JSからAPI経由で変更可能（ PublicでもOK） ✅ 静的画像出力＋ JS切替で擬似アニメ化可能 ✅ Tableau JavaScript API でパラメータ操作可 ⚠ JS APIでのデータ取得は Publicでは制限あり ✅ iframe または JS（tableau.Viz）で制御可能
9. アニメーション(ページ再生機能) 9 参考：Tableauヘルプ ページ再生の使用 Tableauでアニメーションを作成する方法 Tableau Desktopのページの再生機能を利用する
10. 作ってみました 10 イメージ GDPの成長率のTOP10を時系列で可視化 データソース：WORLD BANK GROUP GDP growth (annual %) 詳細はdemoでお見せします
11. 11 シンプルで使いやすい。 でもWEB上でも動かしたいよね
12. そんなお悩みはパラメータ制御で解決 12 Tableau Desktop ✅ あり（ページスライダーで変化を表 現） ✅ 手動・スライサーで可視化 ❌ 不可 ❌ 対応なし ✅ ローカルで可能 ❌ 直接埋め込み不可 方法 アニメーション (ページ再生機能 ) パラメータ制御 アニメ GIF出力 JavaScript連携 データ出力 /API連携 埋め込み形式 Tableau Public ❌ なし（再生ボタン不可） ✅ 公開時に保持される ❌ 不可 ❌ 対応なし ❌ 制限あり ✅ iframeで可能 Web埋め込み(HTML/JS) ❌ iframeでは不可 ✅ JS制御で疑似表現可能 ✅ JSからAPI経由で変更可能（ PublicでもOK） ✅ 静的画像出力＋ JS切替で擬似アニメ化可能 ✅ Tableau JavaScript API でパラメータ操作可 ⚠ JS APIでのデータ取得は Publicでは制限あり ✅ iframe または JS（tableau.Viz）で制御可能
13. パラメータ制御 13 参考：Tableauからはじめるデータサイエンス Tableauでアニメーションを作成する方法 WEBページ上でHTMLにTableau Publicに公開したURLを埋め込み、 JSでパラメータを更新する パラメータ更新 Viz https://public.tableau.com/views/・・・・/? ・・・&:format=png&Year=2016&Month=1
14. 14 最近解いたOrd9に 何かちょうど良いのがあったぞ
15. 作ってみました 15 題材：Ord9のQ7の「年の選択」をパラメータで更新する データソース：[DATA Saber] 9. HandsOn - Advanced II
16. ちょっと待って・・・・ 16 W E B
17. 時間(予算)の都合で今回はローカルで動かしました 17 力技！！
18. まとめ 18 おすすめ方法 Tableau Desktop Tableau Public + JS API Tableau Desktop +画像書き出し +JS切 り替え 利用シーン 社内プレゼン・詳細分析など 公開サイトでの動的ビジュアライズ 視覚的な時間変化を見たい ポイント ✅ページ再生や動的フィルタも可能 ✅パラメータ制御や擬似アニメが可能 ✅スクリーンショットを並べて擬似アニメーションが可能 Tableauのアニメーションってどうやって作るんだ？という疑問から 方法論と実際に作ったvizをご紹介しました 制約を理解しつつHowを選択すればvizの幅が広がる
19. 〜巣鴨でTableauもくもく& LT会 Vol.3〜 Tableau Desktopで時系列の変動を アニメーションで可視化して見た 株式会社キュービック テクノロジーエキスパートセンター Tech Lead/データエンジニア 尾﨑勇太　2025.05.25 あなたは最後騙される お分かりいただけただろうか？
20. Why don’t you do your best? 20 師は仰いました あえてコメントするなら、ざきさんにしては少しさっぱりしすぎと いうか、抑え気味がします。ので、最後「それをやって何を学 んだ？」があってもよいかもとは思いました。 LTまであと2週間
21. ここからが本編です 21 魔 改 造
22. わかったこと 22 アニメーション単独では使い所が限られるが・・・ WEB上のvizに関して操作が可能である 操作結果をJSなどのスクリプト経由で拡張できる 視点を変えると そう、Tableauの魔改造へのルートはここにあったのです😈
23. 辛酸を舐めた日々 23 ・Tableauにログインしない(２要素認証の壁) ・ライセンスがないからみんな見れない(IT投資の壁) ・結局見るのPdf(ハイレイヤーの壁) ・玄人しか理解できない分析軸(スキルの壁) ワンアクションの壁 汎用化しようとすると立ちはだかってくる
24. 解決できるかも 24 + ボタンアクションでTabpyの機械学習の関数を 呼び出して、インタラクティブにWEB上でviz を更新 応用：Tableauの標準機能でカバーできないスコープをカバー 基礎：リアルタイムの結果を自動連携 + ボタンアクションで今の解析結果をSlackや Spread Sheetに連携 Tableauを静的ではなく動的なアプリケーションとしてWEBに組み込む
25. 25 ア ニ メ ー シ ョ ン
26. 26 ご清聴、ありがとうございました