はじめに

Tableauについて調べる機会があったので、Tableau Publicの埋め込み方法について記載したいと思います。

目次

Tableau Publicとは
埋め込み方法

Tableau Publicとは

Tableau Public は、データビジュアライゼーション (以下 Viz) をオンラインで探索、作成、公開共有するための無料プラットフォームです。
誰もがプラットフォーム内の Web 作成や Tableau Desktop Public Edition を無料で使用して Viz を作成することができます。

埋め込み方法

共有リンクを取得

今回は検索欄に「Data table」と入力し、検索結果に表示されたものを埋め込みたいと思います。

結果に表示された下記の赤枠のテーブルを使います。

赤枠のアイコンをホバーすると「共有」と表示されます。

赤枠のアイコンをクリックすると、モーダルウィンドウが表示されます
今回は埋め込みコードではなく、リンクをコピーします。

コードを埋め込む

次に、WebアプリケーションのHTMLコードにライブラリを含めるには、以下を設定する必要があります。

<script type="module" src="https://YOUR-SERVER/javascripts/api/tableau.embedding.3.latest.min.js"></script>

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tableau埋め込みの練習</title>

  <link rel="stylesheet" href="../assets/css/style.css">

  <!-- Tableau -->
  <script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script>
</head>

<body>
  <div class="l-container">
  <!-- コピーしたURLをsrc=""の中に記述する -->
    <tableau-viz
      src="https://public.tableau.com/views/Cellulardatatable/Dashboard1?:language=ja-JP&:sid=&:redirect=auth&:display_count=n&:origin=viz_share_link"
      toolbar="hidden"
      hideTabs
      class="tableau"
    />
  </div>
</body>

style.css

.tableau {
    width: 100%;
    height: 1000px;
}

表示

埋め込むとこのように表示されます。

別のデータを表示

データの縦幅が大きい場合はスクロールも表示されます。

元のデータはこちら | Mykyta Loiko作成のExecutive Performance Overview

元のデータはこちら | Agata Ketterick作成のJapan's Most Beautiful Prefectures 都道府県魅力度ランキング