【JavaScript】D3.js ～ 折れ線グラフを作成する ～

Webグラフ / 地図作成ツール

サンプル

基本的な折れ線グラフ

<html>
<head>
<meta charset="UTF-8">
<style>
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="">http://d3js.org/d3.v3.js">
<script>

var margin = {top: 20, right: 100, bottom: 30, left: 100},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
var dataset = [
  {graphId: "000", yVal: 4,},
  {graphId: "001", yVal: 15,},
  {graphId: "002", yVal: 3},
  {graphId: "003", yVal: 22},
  {graphId: "004", yVal: 9},
  {graphId: "005", yVal: 19},
  {graphId: "006", yVal: 15},
  {graphId: "007", yVal: 3},
  {graphId: "008", yVal: 22},
  {graphId: "009", yVal: 9},
  {graphId: "010", yVal: 19},
];

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d){ return d.graphId; })])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d){ return d.yVal; })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return xScale(d.graphId); })
    .y(function(d) { return yScale(d.yVal); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("path")
    .datum(dataset)
    .attr("class", "line")
    .attr("d", line);

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

応用

* 軸あり、複数、アニメーション、なんちゃって凡例とTooltip
* もっといい方法あるが、とりあえずメモ 
<html>
<head>
<meta charset="UTF-8">
<style>
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke-width: 1.5px;
}

.legend {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
}

</style>
</head>
<body>
<script src="">http://d3js.org/d3.v3.js">
<script>

var margin = {top: 20, right: 100, bottom: 30, left: 100},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var dataset = [
  {id: "001", xVal: 0, yVal: 5, gColor: "red"},
  {id: "001", xVal: 1, yVal: 8, gColor: "red"},
  {id: "001", xVal: 2, yVal: 13, gColor: "red"},
  {id: "001", xVal: 3, yVal: 12, gColor: "red"},
  {id: "001", xVal: 4, yVal: 16, gColor: "red"},
  {id: "001", xVal: 5, yVal: 21, gColor: "red"},
  {id: "001", xVal: 6, yVal: 18, gColor: "red"},
  {id: "001", xVal: 7, yVal: 23, gColor: "red"},
  {id: "001", xVal: 8, yVal: 24, gColor: "red"},
  {id: "001", xVal: 9, yVal: 28, gColor: "red"},
  {id: "001", xVal: 10, yVal: 35, gColor: "red"},
  {id: "001", xVal: 11, yVal: 30, gColor: "red"},
  {id: "001", xVal: 12, yVal: 32, gColor: "red"},
  {id: "001", xVal: 13, yVal: 36, gColor: "red"},
  {id: "001", xVal: 14, yVal: 40, gColor: "red"},
  {id: "001", xVal: 15, yVal: 38, gColor: "red"},
  {id: "002", xVal: 0, yVal: 62, gColor: "blue"},
  {id: "002", xVal: 1, yVal: 23, gColor: "blue"},
  {id: "002", xVal: 2, yVal: 9, gColor: "blue"},
  {id: "002", xVal: 3, yVal: 4, gColor: "blue"},
  {id: "002", xVal: 4, yVal: 23, gColor: "blue"},
  {id: "002", xVal: 5, yVal: 43, gColor: "blue"},
  {id: "002", xVal: 6, yVal: 52, gColor: "blue"},
  {id: "002", xVal: 7, yVal: 41, gColor: "blue"},
  {id: "002", xVal: 8, yVal: 3, gColor: "blue"},
  {id: "002", xVal: 9, yVal: 23, gColor: "blue"},
  {id: "002", xVal: 10, yVal: 31, gColor: "blue"},
  {id: "002", xVal: 11, yVal: 14, gColor: "blue"},
  {id: "002", xVal: 12, yVal: 43, gColor: "blue"},
  {id: "002", xVal: 13, yVal: 13, gColor: "blue"},
  {id: "002", xVal: 14, yVal: 31, gColor: "blue"},
  {id: "002", xVal: 15, yVal: 11, gColor: "blue"},
  {id: "003", xVal: 0, yVal: 21, gColor: "green"},
  {id: "003", xVal: 1, yVal: 52, gColor: "green"},
  {id: "003", xVal: 2, yVal: 32, gColor: "green"},
  {id: "003", xVal: 3, yVal: 32, gColor: "green"},
  {id: "003", xVal: 4, yVal: 11, gColor: "green"},
  {id: "003", xVal: 5, yVal: 3, gColor: "green"},
  {id: "003", xVal: 6, yVal: 41, gColor: "green"},
  {id: "003", xVal: 7, yVal: 11, gColor: "green"},
  {id: "003", xVal: 8, yVal: 32, gColor: "green"},
  {id: "003", xVal: 9, yVal: 28, gColor: "green"},
  {id: "003", xVal: 10, yVal: 35, gColor: "green"},
  {id: "003", xVal: 11, yVal: 53, gColor: "green"},
  {id: "003", xVal: 12, yVal: 23, gColor: "green"},
  {id: "003", xVal: 13, yVal: 11, gColor: "green"},
  {id: "003", xVal: 14, yVal: 31, gColor: "green"},
  {id: "003", xVal: 15, yVal: 25, gColor: "green"},
];

var dataGroup = d3.nest()
    .key(function(d) { return d.id; })
    .entries(dataset);

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d){ return d.xVal; })])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d){ return d.yVal; })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return xScale(d.xVal); })
    .y(function(d) { return yScale(d.yVal); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

 var tooltip = d3.select("body")
     .append("div")
     .style("position", "absolute")
     .style("z-index", "10")
     .style("visibility", "hidden");
     
  var legendSpace = width / dataGroup.length;
  
  dataGroup.forEach(function(d, i) {
    var path = svg.append("path")
        .datum(dataset)
        .attr('stroke', function() { return d.values[i].gColor; })
        .attr("class", "line")
        .attr("d", line(d.values))
        // なんちゃってTooltip
        .on("mouseover", function(){return tooltip.style("visibility", "visible");})
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
        .on("mousemove", function(dArg, j){
           return tooltip
                    .style("top", (event.pageY-10)+"px")
                    .style("left",(event.pageX+10)+"px")
                    .html("<div style='color: " + d.values[j].gColor +
                     "'> ID : " + d.values[j].id + "</div>");});
      
        // 凡例
        svg.append("text")
            .attr("x", (legendSpace/2)+i*legendSpace)
            .attr("y", height + (margin.bottom/2)+ 15)
            .attr("class", "legend")
            .style("fill", function() { // Add the colours dynamically
                return d.values[i].gColor; })
            .on("click", function(){
                // Determine if current line is visible 
                var active   = d.active ? false : true,
                newOpacity = active ? 0 : 1; 
                // Hide or show the elements based on the ID
                d3.select("#tag"+d.key.replace(/\s+/g, ''))
                    .transition().duration(100) 
                    .style("opacity", newOpacity); 
                // Update whether or not the elements are active
                d.active = active;
                })  
            .text(d.key); 

    // 以降は、アニメーションのための設定
    var totalLength = path.node().getTotalLength();

    path.attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
      .duration(1000) // アニメーション速度
      .ease("linear")
      .attr("stroke-dashoffset", 0);
  });
</script>
</body>
</html>

参考文献

http://blog.qaramell.com/hunzy/12591
http://webdesign-dackel.com/2015/04/05/d3js-responsive-line-chart/
http://dev.classmethod.jp/client-side/javascript/d3-js_linechart_and_barchart/
http://www.tam-tam.co.jp/tipsnote/javascript/post4913.html
* アニメーション
http://duspviz.mit.edu/d3-workshop/transitions-animation/
http://bl.ocks.org/markmarkoh/8700606
http://jsfiddle.net/nrabinowitz/XytnD/
* 複数ライン
http://bl.ocks.org/d3noob/e99a762017060ce81c76
http://codepen.io/brantwills/pen/igsoc
http://code.tutsplus.com/tutorials/building-a-multi-line-chart-using-d3js-part-2--cms-22973
http://www.d3noob.org/2014/07/d3js-multi-line-graph-with-automatic.html
https://gist.github.com/mbostock/3884955#file-thumbnail-png
* Tooltip
http://hnakamur.github.io/blog/2013/03/02/multi-series-line-chart-example-with-tooltip-using-d3-dot-js/

今後の参考になりそうなサイト

http://bl.ocks.org/Matthew-Weber/5645518
http://bl.ocks.org/mbostock/3902569

関連記事

D3.js ～ 入門編 ～

http://blogs.yahoo.co.jp/dk521123/35423681.html

D3.js ～ 円グラフを作成する ～

http://blogs.yahoo.co.jp/dk521123/35435961.html

D3.js ～ 縦棒グラフを作成する ～

http://blogs.yahoo.co.jp/dk521123/35435053.html

D3.js ～ 複合グラフ / 折れ線・縦棒グラフを作成する ～

http://blogs.yahoo.co.jp/dk521123/35463598.html