読者です 読者をやめる 読者になる 読者になる

UZABASE Tech Blog

株式会社ユーザベースの技術チームブログです。 主に週次の持ち回りLTやセミナー・イベント情報について書きます。

はじめてのビジュアライゼーション ~Tableau, Highchart.js触ってみた~

ユーザベースでSPEEDAの開発を担当しています。 外間です。

ビジュアライゼーションのニーズが高まり続ける中、 先日僕もビジュアライゼーションで有名な、あのTableauのセミナーに参加してきました。

Tableau

Tableauとは簡単に言えば、データを視覚化し分析を助けるBIツールです。 主に以下のような特徴があります。

  • インメモリで動作が軽い
  • 様々なデータソースに対応(約40種)

また、作成した資料を自由に組み替えてダッシュボードにまとめ、Web上に公開するといったこともできます。 Tableau Publicというサイトには、ユーザーが公開しているダッシュボードが集められていてかなり遊べます。

セミナーでは実際にTableau Desktopを使って、基本的な操作方法を学びました。
僕も試しにSPEEDAが持っている企業データを投入して、世界地図上に企業の売上高を円グラフで表示してみたところ、簡単にできました。
Tableau Publicからピックアップすると、このようなイメージです。
Which Mobile OS Dominates in Europe?

インメモリで軽いのですが、SPEEDAのように大量データを実際に使える形で分析するとなると、だいぶハイスペックなマシンでないと動かないんじゃないか。。 という懸念はありますね。

当初は無料トライアル版を使って、SPEEDAの様々なデータを多角的に見てみたかったんですが、 そうこうしている間にトライアル期間である2週間があっという間に過ぎてしまいました。。

とはいえ、今できるビジュアライズの手法としてどのようなものがあるのか この機会にいろいろと触りたい気持ちはあります。

ビジュアライゼーションと言えばD3.js
ですが、D3.jsは当ブログでも過去に複数の方が触れているので、今回は別のライブラリに触れたいと思います。

Highchart.js

Highchart.jsとは、グラフを描画するためのJSライブラリです。
2009年にリリースされておりご存知の方も多いかと思いますが、僕は触ったことが無かったのでこの機会に触ってみたいと思います。

Highchart.jsは主に以下のような特徴があります。

  • グラフの美しさと豊富さ
  • JSファイルを1つ読み込むだけで使える手軽さ

実際に公式サイトのデモ画面を見てみるとかなりの種類のグラフが用意されていることが分かります。デモ

実際に僕も簡単なグラフを作成してみました。
右下のグラフはたったこれだけのコードだけで書けてしまいます。(シンプルなので説明は省きます)

f:id:uzabase:20150121125202p:plain

SPEEDAでは別の手法を用いてグラフを表示していますが、さらに多種多様な見せ方を要求された場合、使えそうです。

今回はここまでですが、実際にデータを投入して様々な表示パターンを試したい好奇心に掻き立てられたので、時間を見つけてやってみようと思います。

貴重なデータを最大限に活かすためにも、 効果的な見せ方とその手法を学び、ニーズに応えられるよう準備しておきたいものです。

ユーザベースでは、新しい技術に興味を持ち、一緒に探究してより良いシステムを作っていける仲間を募集しています。 一緒にデータビジュアライズに挑戦したい!という方は、ぜひ一度Wantedlyをご覧ください。