Scott Murray D3.js チュートリアルまとめ


センサデータをリアルタイム可視化したいと思い、D3.jsのお勉強をはじめました。
そこで、スコットマレイさんのDS.jsの[チュートリアル](http://ja.d3js.info/alignedleft/tutorials/d3/)！！とてもわかりやすいです.


とはいえ、完全なソースが記述されているわけでなく、全体の見通しが悪いかなぁーと思い、各セクションの終了時のソースコードを記載しました。

--------



01. このチュートリアルについて
---------------- 

省略.詳細は下記
<http://ja.d3js.info/alignedleft/tutorials/d3/about/>



02. 基礎編
-------

省略.詳細は下記
<http://ja.d3js.info/alignedleft/tutorials/d3/fundamentals/>



03. セットアップ
-------

省略.詳細は下記
<http://ja.d3js.info/alignedleft/tutorials/d3/setup/>



04. 要素の追加
--------

<http://ja.d3js.info/alignedleft/tutorials/d3/adding-elements/>

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
    d3.select("body").append("p").text("新しいパラグラフ！");
</script>
</body>
</html>
``` 

### 結果

```
新しいパラグラフ！
```



05. メソッドのチェイン
-------------------

<http://ja.d3js.info/alignedleft/tutorials/d3/chaining-methods/>

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
	d3.select("body")
		.append("p")
		.text("新しいパラグラフ！");
</script>
</body>
</html>
```

### 結果

```
新しいパラグラフ！
```



06 データのバインディング
-------

<http://ja.d3js.info/alignedleft/tutorials/d3/binding-data/>

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];
    d3.select("body").selectAll("p")
        .data(dataset)
        .enter()
        .append("p")
        .text("新しいパラグラフ！");
 </script>
</body>
</html>
```

### 結果

```
新しいパラグラフ！

新しいパラグラフ！

新しいパラグラフ！

新しいパラグラフ！

新しいパラグラフ！
```




07. データの使い方
-------------

<http://ja.d3js.info/alignedleft/tutorials/d3/using-your-data/>

```html:Chapter07
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];
    d3.select("body").selectAll("p")
       .data(dataset)
       .enter()
       .append("p")
       .text(function(d) { return d; })
       .style("color", function(d) {
           if (d > 15) {   // 15 が区切り
              return "red";
           } else {
              return "black";
           }
        });
       console.log(d3.select("body").selectAll("p"));
</script>
</body>
</html>
```

### 結果

![Kobito.zTbqkC.png](https://qiita-image-store.s3.amazonaws.com/0/73207/f2830a3d-fd82-b9b4-6e85-f3bf0b40d27e.png "Kobito.zTbqkC.png")




08 DIV 要素の描画
-------------

<http://ja.d3js.info/alignedleft/tutorials/d3/drawing-divs/>

```html:Chapter08
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--
div.bar {
   display: inline-block;
   width: 20px;
   height: 75px;   /* この数値は実行時に上書きされます */
   background-color: teal;
   margin-right: 2px;
}
-->
</style>
</head>

<body>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];
    d3.select("body").selectAll("div")
       .data(dataset)
       .enter()
       .append("div")
       .attr("class", "bar")
       .style("height", function(d) {
           var barHeight = d * 5;  // 高さを 5 倍にします
           return barHeight + "px";
       });;
</script>
</body>
</html>
```

### 結果

![Chapter09](http://ja.d3js.info/alignedleft/tutorials/d3/drawing-divs/3.png)



09 data() の力
-------------

<http://ja.d3js.info/alignedleft/tutorials/d3/the-power-of-data/>

```html:Chapter09
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--
div.bar {
   display: inline-block;
   width: 20px;
   height: 75px;   /* この数値は実行時に上書きされます */
   background-color: teal;
   margin-right: 2px;
}
-->
</style>
</head>

<body>
<script type="text/javascript">

	/*
	 * 0～30のランダムな整数を生成。繰り返しは25回
	 * 生成した数を配列に追加
	 */
	var dataset = [];  
	for (var i = 0; i < 25; i++) {
		var newNumber = Math.round(Math.random() * 30);
		dataset.push(newNumber);
	}

	d3.select("body").selectAll("div")
		.data(dataset)  // <-- 答えはここに潜んでいます。
		.enter()
		.append("div")
		.attr("class", "bar")
		.style("height", function(d) {
			var barHeight = d * 5;
			return barHeight + "px";
	});
</script>
</body>
</html>
```

### 結果(リロードするたびに変わります)

![結果9](http://ja.d3js.info/alignedleft/tutorials/d3/the-power-of-data/5.png)



10 SVG の基本
-----------

<http://ja.d3js.info/alignedleft/tutorials/d3/an-svg-primer/>

```html:Chapter10
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script type="text/javascript" src="d3/d3.js"></script>
<!--script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script-->
<style type="text/css">
<!--

svg .pumpkin {
   fill: yellow;
   stroke: orange;
   stroke-width: 5;
}
-->
</style>
</head>

<body>
<script type="text/javascript">
</script>
<svg width="500" height="500">
    <rect x="0" y="0" width="500" height="50"/>
    <circle cx="250" cy="100" r="25"/>
    <ellipse cx="250" cy="175" rx="100" ry="25"/>
    <line x1="0" y1="200" x2="500" y2="250" stroke="black"/>
    <text x="250" y="300" font-family="sans-serif"
   font-size="25" fill="gray">javascript</text>
   <circle cx="25" cy="300" r="22" class="pumpkin"/>
   <rect x="0" y="0" width="30" height="30" fill="purple"/>
   <rect x="20" y="5" width="30" height="30" fill="blue"/>
   <rect x="40" y="10" width="30" height="30" fill="green"/>
   <rect x="60" y="15" width="30" height="30" fill="yellow"/>
   <rect x="80" y="20" width="30" height="30" fill="red"/>
   <circle cx="25" cy="350" r="20" fill="rgba(128, 0, 128, 1.0)"/>
   <circle cx="50" cy="350" r="20" fill="rgba(0, 0, 255, 0.75)"/>
   <circle cx="75" cy="350" r="20" fill="rgba(0, 255, 0, 0.5)"/>
   <circle cx="100" cy="350" r="20" fill="rgba(255, 255, 0, 0.25)"/>
   <circle cx="125" cy="350" r="20" fill="rgba(255, 0, 0, 0.1)"/>
   <circle cx="25" cy="400" r="20"
           fill="rgba(128, 0, 128, 0.75)"
           stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
   <circle cx="65" cy="400" r="20"
           fill="rgba(128, 0, 128, 0.75)"
           stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"
           opacity="0.5"/>
   <circle cx="105" cy="400" r="20"
           fill="rgba(128, 0, 128, 0.75)"
           stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"
           opacity="0.2"/>
</svg>
</body>
</html>
```

### 結果

![Kobito.7NUmUF.png](https://qiita-image-store.s3.amazonaws.com/0/73207/7b8d4127-0429-58be-9d79-937c580f071d.png "Kobito.7NUmUF.png")



11 SVG の描画
----------

<http://ja.d3js.info/alignedleft/tutorials/d3/drawing-svgs/>

```html:chapter11
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--
svg .pumpkin {
   fill: yellow;
   stroke: orange;
   stroke-width: 5;
}
-->
</style>
</head>

<body>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];

    var w = 500;
    var h = 50;
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)   // <-- ここ！
                .attr("height", h); // <-- ここにも！

    var circles = svg.selectAll("circle")
                     .data(dataset)
                     .enter()
                     .append("circle");

    circles.attr("cx", function(d, i) {
        return (i * 50) + 25;
    })
    .attr("cy", h/2)
    .attr("r", function(d) {
        return d;
    })
    .attr("fill", "yellow")
    .attr("stroke", "orange")
    .attr("stroke-width", function(d) {
        return d/2;
    });
</script>
</body>
</html>
```

### 結果

![結果](http://ja.d3js.info/alignedleft/tutorials/d3/drawing-svgs/2.png)



12 データ型
---------

<http://ja.d3js.info/alignedleft/tutorials/d3/data-types/>
省略



13 棒グラフの作成
---------

<http://ja.d3js.info/alignedleft/tutorials/d3/making-a-bar-chart/>

```html:Chapter13
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--
svg .pumpkin {
   fill: yellow;
   stroke: orange;
   stroke-width: 5;
}
-->
</style>
</head>

<body>
<script type="text/javascript">
    var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                      11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
    var w = 500;
    var h = 100;
    var barPadding = 1;  // <-- パディング（棒の間の間隔）を追加！
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return 4 * d;
        })
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - 4 * d;  // SVG の高さからデータの値を引く
        })
        .attr("fill", function(d) {
            return "rgb(0, 0, " + (d * 10) + ")";
        });

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text(function(d) {
           return d;
       })
       .attr("text-anchor", "middle")
       .attr("x", function(d, i) {
           return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
       })
       .attr("y", function(d) {
           return h - (d * 4) + 14;
       })
       .attr("font-family", "sans-serif")
       .attr("font-size", "11px")
       .attr("fill", "white");

</script>
</body>
</html>
```

### 結果

![結果13](http://ja.d3js.info/alignedleft/tutorials/d3/making-a-bar-chart/19.jpg)




14. 散布図の作成
------------

<http://ja.d3js.info/alignedleft/tutorials/d3/making-a-scatterplot/>

```html:chapter14
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--

-->
</style>
</head>

<body>
<script type="text/javascript">
    var dataset =
        [
            [   5, 20],
            [ 480, 90],
            [ 250, 50],
            [ 100, 33],
            [ 330, 95],
            [ 410, 12],
            [ 475, 44],
            [  25, 67],
            [  85, 21],
            [ 220, 88]
        ];
    var w = 500;
    var h = 100;
    var barPadding = 1;  // <-- パディング（棒の間の間隔）を追加！

    //Create SVG element
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return d[0];
        })
        .attr("cy", function(d) {
            return d[1];
        })
        .attr("r", 5).attr("r", function(d) {
            return Math.sqrt(h - d[1]);
        });

    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
            return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
            return d[0];
        })
        .attr("y", function(d) {
            return d[1];
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");

</script>
</body>
</html>
```

### 結果

![Kobito.Yg2sjU.png](https://qiita-image-store.s3.amazonaws.com/0/73207/4047d6b6-6cde-62ad-0864-63d6e6fc76e1.png "Kobito.Yg2sjU.png")



15. スケール
----------

<http://ja.d3js.info/alignedleft/tutorials/d3/scales/>

```html:Chapter15
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--

-->
</style>
</head>

<body>
<script type="text/javascript">
    var dataset = [
                    [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]
                ];

    var w = 500;
    var h = 300;
    var padding = 20;

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

    var xScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) {
                        return d[0];
                    })]).range([padding, w - 2 * padding]);
    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) {
                         return d[1];
                     })]).range([h - padding, padding]);
    var rScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) {
                         return d[1];
                    })]).range([2, 5]);


    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return xScale(d[0]);
        })
        .attr("cy", function(d) {
            return yScale(d[1]);
        })
        .attr("r", function(d) {
            return rScale(d[1]);
        });

    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
            return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
            return xScale(d[0]);
        })
        .attr("y", function(d) {
            return yScale(d[1]);
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");

</script>
</body>
</html>
```

### 結果

![結果15](http://ja.d3js.info/alignedleft/tutorials/d3/scales/7.jpg)


16. 軸
----------

<http://ja.d3js.info/alignedleft/tutorials/d3/axes/>

```html
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<title> study d3 </title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
<!--
.axis path,
.axis line {
   fill: none;
   stroke: black;
   shape-rendering: crispEdges;
}

.axis text {
   font-family: sans-serif;
   font-size: 11px;
}
-->
</style>
</head>

<body>
<script type="text/javascript">
    var dataset = [];
    var numDataPoints = 50;
    var xRange = Math.random() * 1000;
    var yRange = Math.random() * 1000;
    for (var i = 0; i < numDataPoints; i++) {
       var newNumber1 = Math.round(Math.random() * xRange);
       var newNumber2 = Math.round(Math.random() * yRange);
       dataset.push([newNumber1, newNumber2]);
    }

    var w = 500;
    var h = 300;
    var padding = 30;

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

    var xScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) {
                        return d[0];
                    })]).range([padding, w - 2 * padding]);
    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) {
                         return d[1];
                     })]).range([h - padding, padding]);
    var rScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d) {
                         return d[1];
                    })]).range([2, 5]);

    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
    var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return xScale(d[0]);
        })
        .attr("cy", function(d) {
            return yScale(d[1]);
        })
        .attr("r", function(d) {
            return rScale(d[1]);
        });

/*
    svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
            return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
            return xScale(d[0]);
        })
        .attr("y", function(d) {
            return yScale(d[1]);
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");
*/

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
</script>
</body>
</html>
```

### 結果

![Kobito.EixJ67.png](https://qiita-image-store.s3.amazonaws.com/0/73207/f7ca1c70-179d-a663-9e1b-72c091f5f12e.png "Kobito.EixJ67.png")