More than 5 years have passed since last update.

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

Last updated at 2015-07-11Posted at 2015-07-11

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

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

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

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

基礎編

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

セットアップ

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

要素の追加

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

<!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>

結果

新しいパラグラフ！

メソッドのチェイン

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

<!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/

<!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>

結果

新しいパラグラフ！

新しいパラグラフ！

新しいパラグラフ！

新しいパラグラフ！

新しいパラグラフ！

データの使い方

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

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>

結果

08 DIV 要素の描画

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

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>

結果

09 data() の力

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

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>

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

10 SVG の基本

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

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>

結果

11 SVG の描画

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

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>

結果

12 データ型

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

13 棒グラフの作成

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

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>

結果

散布図の作成

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

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>

結果

スケール

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

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>

結果

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

<!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>

結果

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up