Allied ArchitectsAllied ArchitectsEngineer Blog

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

2014/09/29 D3.js

お久しぶりです。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でのデータ分析とかめちゃくちゃ楽しそうなので、追々このブログでも取り上げられたらな…と思ってます。

新井 正貴
  • 新井 正貴
  • Software Developer
  • こんにちは。アライドには2013年に新卒で入社しました。 Perfume × ラクロス × エンジニア といった感じです。お手柔らかにお願いしますm(_ _)m

RELATION ENTRY

Instagram開発者に送る、注意すべきAPI規約/ブランド規約まとめ

Instagram開発者に送る、注意すべ...

2015/07/8 Instagram

お久しぶりです。Perfumeエンジニアの@massa142です。 今年のPerfumeはメジャーデビュー10周年、結成15周年というAnniversary Yearを迎えて、大いに盛り上がっています。Perfume Anniversary Website 9月に行われるAnniversary 1...

続きを読む

BigQuery × Perfume × tweet分析(Advent Calendar 19日目)

BigQuery × Perfume ×...

2014/12/19 Google BigQuery

この記事は Google Cloud Platform Advent Calendar 2014 - Qiita の19日目の記事も兼ねています。 こんにちは。Perfumeエンジニアの@massa142です。 今回の記事は、Google BigQueryに関して前々から気になっていたんで、この...

続きを読む

新井 正貴の記事一覧へ

ページTOPへ