Observable Framework + D3.jsで 資料請求データを 触って楽しいネットワークグラフに

データ可視化ツールのObservable Framework

Transcript

1. Observable Framework + D3.jsで 資料請求データを 触って楽しいネットワークグラフに 開発定例LT 2025/10/30 データチーム 安永翼
2. アジェンダ 1. デモ + グラフ説明 2. 今回のテーマ 3. データの説明 4. 技術の紹介 5. おわり 可視化って面白いかも
3. デモ ダミーデータにしたデモページも作りました ↓ https://ysng2p.github.io/observable-framework-sandbox/network-graph ※資料請求データを使わずに、 一般的なマーケットバスケット分析をイメージしたダミーデータにしたもの
4. 今回のテーマ 最近業務で作ったデータを 使ってみる 過去に興味を持ったけど 触っていなかったツールを 使ってみる 何か楽しいもの
5. 今回のテーマ 【所属】 株式会社イノベーション 技術開発ユニット デジタル推進グループ データチーム データエンジニア 【主な業務】 分析等で活用するデータ基盤の構築・運用 各プロダクトのデータの横断的な活用に向け、データを整備 【最近業務で作ったデータ】 ITトレンドのKPI算出・可視化用データ 経緯: KPIを各所で色んな出し方をしていてばらつきがあった →KPI用にデータを整備 LTやるし せっかくなので自分でも使ってみよう 最近業務で作ったデータを 使ってみる 過去に興味を持ったけど 触っていなかったツールを 使ってみる 何か楽しいもの
6. 今回のテーマ 最近業務で作ったデータを 使ってみる 過去に興味を持ったけど 触っていなかったツールを 使ってみる 何か楽しいもの 職業柄 データ可視化ツールに興味を持つことがあるのですが 数年前に Observable というデータ可視化ツールを知りました。 https://observablehq.com/ ※Observable という名称は色んな分野で使われているようです。 ここではデータ可視化ツールの Observable を指しています。 当時 興味を持ってユーザー登録をしたらしく たまにメールが来ますが これまでほとんど触れていませんでした。 LTやるし せっかくなので使ってみよう
7. 今回のテーマ 個人でゲームや音楽を作っています。 思えば アートやクリエイティブに微妙に縁のある経歴 チームラボ （アートが有名。自分は ITソリューション事業部でアートとは別でしたが、 クライアントの中にはアート性を期待する人もいたり、 逆にチームラボ側から売りにしたりすることもあったように思います。） ガラパゴス （広告デザイン・制作事業。自分は制作チームが使う ITツールを開発するチーム。 クライアントMTGの中で使われるITツールもあるのですが、 見映えの良さや「なんかすごそう感」は大事なようでした。） これまでの経験から、楽しいもの・見映えのいいものは エンタメだけでなくビジネス的にも好影響があると思いました。 と それっぽい理屈も一応書きましたがシンプルに せっかくなら楽しいものを作りたい 最近業務で作ったデータを 使ってみる 過去に興味を持ったけど 触っていなかったツールを 使ってみる 何か楽しいもの
8. グラフの説明 （割愛） 一言で言うと「楽しそうだったから」 【可視化方法として ネットワークグラフを選んだ理由】 「触って動かせて楽しそうなもの」 として最初に浮かんだのが ネットワークグラフでした。 力学的なレイアウト（ノードの位置関係の 物理演算的なシミュレーション）も できたりして面白そうと思いました。
9. グラフの説明 （割愛） 【グラフの意味】 ノード（青い円） = 製品（ITトレンドで資料請求された製品） 一緒に資料請求された製品がリンク（線）で つながっています。 ノードが大きい = 資料請求数（or 売上）が大きい リンクが濃い = 一緒に資料請求された回数が多い 上部に資料請求数（ or 売上）の 分布（ヒストグラム）も表示しています。
10. グラフの説明 【グラフのユースケース（使いどころ）】 ※楽しさ目線で作ったので ユースケースは想定してないですが あえて言うなら… 一緒に資料請求されやすい製品がわかる →ある製品を資料請求した人に 「他の人はこんな製品も資料請求してますよ」 とレコメンド 一緒に資料請求されやすい製品の 特集記事や比較記事を作ったり 一般にはマーケットバスケット分析や 共起分析と呼ばれます。 スーパーで一緒に購入されやすい商品を近くに置いたり 商品の売れ方に関する仮説を立てたり ITトレンドも記事を出してますね https://it-trend.jp/data_mining/article/153-122
11. データの説明 （割愛） データが不完全のため可視化内容を そのまま信用しないよう注意 【概要】 ITトレンドの資料請求データ 1行 = 1資料請求 × 1製品 1回の資料請求に複数の製品が含まれるとき 製品ごとに別の行として持っています。 今回は可視化を優先して部分使用のため 可視化内容を信用しないよう注意 【使用した列】 可視化に必要な上図の例にある列のみ。 元テーブルには他にもKPI算出用の列が色々あります。 課金対象を識別するフラグもあるが今回は使っておらず、 今回の可視化の売上は実際の売上とは異なる可能性があります。 【使用した行】 2025-09-01〜2025-10-06のデータを BigQueryからCSVでローカル保存。 10MBまでの制約があるため、さらに一部の可能性あり
12. 使った技術の紹介 Observable: ブラウザ上で可視化のコードを実行して結果を表示できるノートブック型の オンライン実行環境。資料請求データを扱うのは不安があったので下記の Framework を使用。 インタラクティブな可視化の実装に便利なコンポーネント（ UI部品や簡単なグラフ）が使える。 Observable Framework: Observable の仕組みを使える静的サイトジェネレータ（ SSG）。 ローカルで実行できるのでこれを使用。 D3.js: インタラクティブな可視化を柔軟に実装できるライブラリ。 Observable のコンポーネントでは 実現できない表現（ネットワークグラフや力学レイアウト）を実装するために使用。
13. まとめ • 業務で作ったデータ × 使ったことない技術 × 楽しいもの • 資料請求データ × Observable Framework・D3 × インタラクティブなネットワークグラフ • 今後も「面白い可視化」をテーマに色々作ってみたい ありがとうございました！