新井 正貴

2014.09.29

D3.js入門〜Perfumeシングル売上チャート作成〜

お久しぶりです。Perfumeエンジニアの新井です。

先週の9/21(日)にPerfumeがメジャーデビュー10周年&結成15周年の記念日を迎えました。
その記念日に、最終日を迎えたPerfume 5th Tour 2014『ぐるんぐるん』の詳しい様子は、こちらのライブレポートを御覧ください。
また、このPerfume Dayに各CDショップで開かれたイベントの様子はこちらの記事を。

「この記念日を迎えた感動を、自分なりに表現しなければ…」
「メジャーデビュー10周年ということで、これまでの歴史を振り返りたい…」
「よしそれじゃ、これまでリリースしたシングルをざっと振り返ろう!」

という個人的な使命感に駆られて、このブログを書いています。

やることはタイトル通り
『メジャーデビューからの全シングル20曲の売上枚数の遷移を折れ線チャートで表示』

それを実現するためにこの頃興味があったD3.jsを、勉強がてら使ってみました。

※Perfumeのシングル曲のデータに関しては、こちらのサイトを全面的に信用して進めていきます。

D3.jsってなに?

データ視覚化のためのJavaScriptライブラリです。
公式サイト:http://d3js.org/

以下、そこからの引用です。

D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

要は、
「D3.jsを使うことで、HTMLやSVG、CSSにデータを吹き込みことができるし、
特定のフレームワークに縛られず、モダンブラウザの性能をフルに引き出すことができるよ」
ということを言っています。

また、D3.jsを利用しはじめるのは簡単で、

このスクリプトを貼り付けるだけでOKです。

ここにかっこいいD3.jsのサンプルがたくさんあるので、D3.jsの幅広い表現を体感してみてください。

デモ

今回作ってみたものをHerokuにあげて公開してます。ちょっと触ってみてください。
URL:http://prfm.herokuapp.com/sales.html

※グラフ上に表示している順位は、オリコンチャートの最高順位です。

ちょこっと解説

今回書いたソースはこちら
また、上記のPerfumeのシングル情報をまためたページから、データを引っ張ってきてごにょごにょっとしたcsvファイルがこちらとなります。

以下、ちょこっと解説していきます。

ここで出てきたsvg要素とは、HTML5から導入されたSVGの記述に基づいて、HTMLだけで図形が描画できるものです。
SVGは、Scalable Vector Graphicsの略で、XMLによってベクター形式の画像を表現できます。

また、ここで出てきてた’.append(“g”)’とは、新しいグループ要素gを用意することで、次に出てくるtransformを全体に適用できるようにしています。
このグループ要素gと軸の描写に関しては、以下の説明が詳しくわかりやすかったです。
D3 入門 : 軸 – スコット・マレイ – alignedleft

次に、実際にグラフを描写する関数を見ていきます。

これで、無事折れ線グラフを描写できます。

さてここで、datum()が出てきましたが、これはデータをバインドするために使用する関数です。

D3.jsでは、データバインドのための関数として、このdatum()以外に、もう一つdata()も存在します。
この違いは、一つの要素にバインドする場合はdatum()を、複数の要素にバインドする場合はdata()を利用するという感じらしいです。
このことは、Stack Overflowでも議論されていました。

あとは、各ポイント毎に表示しているオレンジ色の○と、テキスト部分を描画しているソースを見ていきます。

これで、グラフに表示する全ての要素の記述が完成したので、ページ読み込みの際にこのdraw関数が走るように設定すればOKです。

参考にしたサイト

D3.jsで折れ線チャートを作るにあたって、以下のサイトを参考にしました。
Line Chart
D3.jsの使い方とグラフを作成するサンプル | Tips Note
D3 入門 | スコット・マレイ | alignedleft
D3.js入門 (全17回) – プログラミングならドットインストール

Heroku Button

今回Herokuにあげたアプリケーションは、READMEに置いたDeploy to Herokuボタンをクリックするだけで、各々のHeroku環境にデプロイされて自由に使うことが出来ます。
(Heroku Buttonで共有するほどのアプリケーションではないですが…)

Heroku Buttonに関して詳しくは伊藤直也さんがブログにて紹介されていますので、そちらをぜひご覧ください。
http://d.hatena.ne.jp/naoya/20140809

Heroku Button で、URI を介した Web アプリケーションの交換が可能になった。

このことに感動したので、おまけ的にこのブログで取り上げてみました。
みなさんもぜひ、どんどん活用してみてくださいm(_ _)m

まとめ

今回はPerfumeのデータを可視化したいという思いから、D3.jsで遊んでみました。
jsをゴリゴリ書いていくことで、幅広いデータの表現が可能となるので、エンジニアにとってはとても幸せなツールだと思いますヽ(*´∀`)ノ

(追伸)
この頃、関根さんに感化されてPyConに参加したり、Pythonを勉強はじめてみたりしてます。
Pythonでのデータ分析とかめちゃくちゃ楽しそうなので、追々このブログでも取り上げられたらな…と思ってます。