D3.jsを利用してみた

D3.jsは任意のデータをDOMにバインドすることで、ドキュメントを操作するJavaScriptライブラリです。D3は、非常に高速で相互作用とアニメーションのための大きなデータセットとダイナミックな振舞いをサポートしています。ここではD3.jsについて解説していきます。

01: インストール

bash


# 作業ディレクトの作成/移動
$ mkdir JS0503-D3js
$ cd JS0503-D3js

# CSSgramをダウンロード
$ git clone https://github.com/una/CSSgram

# サンプルコードを作成する。
$ nano index.html
$ nano style.css

index.html


<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <div class="chart"></div>
    <script>
      d3.select(".chart").selectAll("div").data([3,8,9,11,15,20])
        .enter() //データセットの数に対して足りない要素をチェック
        .append("div") // 足りない分のdiv要素を追加
        .style("color", "white")
        .style("width", function(d) { return d * 10 + "px"; }) // バーの幅を指定
        .text(function(d) { return d; }); // バーのテキストを指定
    </script>
  </body>
</html>

style.css


.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
}

02: 動作テスト

ブラウザで作成したindex.htmlにアクセスすることで、下記のような棒グラフを描画できる。