D3.js v4/v5 入門① – 環境準備
このチュートリアルではD3.jsで簡単なグラフ(散布図)を書けるところまでを解説します。
チュートリアル目次
D3.jsとは
D3.js（Data-Driven Documents）はjavascriptのデータ視覚化ライブラリです。データビジュアライゼーションといったらこれ、というぐらい有名なライブラリです。他のライブラリとは異なり、関数にデータを入れれば描画してくれるものでなく、用意したデータを描画用のデータに変換し、変換したデータを元に画面を構成していきます。一つの表示を作るためにいくつかの処理を組み合わせなければなりませんが、それゆえ他のライブラリと比べて汎用性が非常に高く、アイディア次第で魔法のような表示が可能です。
公式サイトのギャラリーに、多くのサンプルがあり雰囲気を掴むことができます。
開発に必要なのはテキストエディタ(メモ帳、SublimeTextなど)と、ブラウザ(Google Chrome推奨)で、簡単に無料で始めることが始めることができます。ライセンスもフリー(修正BSDライセンス)で商用利用も可能です。
必要な知識としてはHTML、javascript、CSS、SVG or Canvasですが、ここでは知識がない人でも使い始められる用に説明していきます。
環境の準備
まず、テキストエディタを準備して下のテキストをコピーしてください。（※このサイトのコードは、そのままクリックすると数字などが入ってしまいますが、ダブルクリックするとテキストをコピーできるモードに切り替わります。右上の<>を押すと元に戻ります。)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // ここにコードを書いていきます。 </script> </body> </html> |
テキストエディタはメモ帳で構いません。筆者はSublimeTextを使っています。SublimeTextは関数などを色分けしてくれますし、動作が軽くておススメです。テキストをコピーしたらファイル名をindex.htmlとして、適当な場所(デスクトップなど)に保存してください。
保存したらこれをGoogleChromeで開きます。GoogleChormeでの開き方はいくつかありますが、GoogleChromeを先に開いてからファイルをGoogleChrome上にドロップする方法が簡単かと思います。
何もない真っ白な画面が開かれましたでしょうか。 
こんな感じです。この真っ白な画面に要素を追加していきます。
D3.jsのチュートリアルを始める前に、GoogleChromeの開発者用ツールの説明をしたいと思います。画面右上の点々（下の赤まる）をクリックしてメニューを開き、「その他のツール」→「デベロッパーツール」を選択してください。
右上にこのような情報が表示されます。
現在のindex.htmlの構造を表示しています。headの情報が表示されていない場合は<head>の左にある三角を押すと表示されます。<head>と</head>の間にタイトル等のヘッダ情報が記載され、<body>と</body>の間に実際にブラウザに表示される文書の本体が記述されます。<script>はjavascriptのコードを記載するタグです。<head>タグの中にある
|
1 |
<script src="https://d3js.org/d3.v5.min.js"></script> |
で、D3.jsのライブラリを読み込んで使えるようにしています。v4を使いたい場合はv5の部分をv4に変えてください。
次のページ(要素の追加方法)で、表示する要素を追加していきます。
チュートリアル目次