D3.js 折れ線グラフ メモ

JavaScript

だんだん慣れてきた.

[
{
"DATE": "2015/11/27 15:47:29", 
"TOTAL_RECORDS": 265
}, 
{
"DATE": "2015/11/27 15:50:47", 
"TOTAL_RECORDS": 461
}, 
{
"DATE": "2015/11/27 15:53:58", 
"TOTAL_RECORDS": 647
}, 
{
"DATE": "2015/11/27 15:58:14", 
"TOTAL_RECORDS": 829
}, 
{
"DATE": "2015/11/27 16:27:18", 
"TOTAL_RECORDS": 1008
}, 
{
"DATE": "2015/11/30 11:18:07", 
"TOTAL_RECORDS": 1198
}, 
{
"DATE": "2015/12/01 10:34:28", 
"TOTAL_RECORDS": 1364
}, 
{
"DATE": "2015/12/03 10:49:03", 
"TOTAL_RECORDS": 1977
}, 
{
"DATE": "2015/12/03 10:50:18", 
"TOTAL_RECORDS": 2156
}, 
{
"DATE": "2015/12/04 10:29:15", 
"TOTAL_RECORDS": 2347
}, 
{
"DATE": "2015/12/07 10:44:02", 
"TOTAL_RECORDS": 2509
}
]

というjsonファイルの可視化

d3.json(dirpath+"total_records.json", function(error, data){

    // 軸の表示のためのマージンと画面サイズ
    var margin = {top: 20, right: 20, bottom: 30, left: 40};
    var width = 1000 - margin.left - margin.right;
    var height = 300 - margin.top - margin.bottom;

    // svgタグの作成
    var svg = d3.select("#total_records")
                .append("svg")
                .attr({ //元の画面サイズ
                    width: width + margin.left + margin.right,
                    height: height + margin.top + margin.bottom
                })
                .append("g") // マージンの分だけ位置をずらす
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // x軸の最小最大
    var xMin = new Date(data[0]["DATE"]);
    var xMax = new Date(data[data.length - 1]["DATE"]);
    // y軸の最小最大
    var yMin = Math.min.apply(null,data.map(function(o){return o["TOTAL_RECORDS"];}));
    var yMax = Math.max.apply(null,data.map(function(o){return o["TOTAL_RECORDS"];}));

    // スケールの定義
    var xScale = d3.scale.linear()
                            .domain([xMin,xMax])
                            .range([0,width]);
    var yScale = d3.scale.linear()
                            .domain([yMin-10, yMax])
                            .range([height, 0]);

    var fmtFunc = d3.time.format("%Y/%m/%d");

    // 軸の設定
    var xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient("bottom")
                        .tickSize(6, -height)
                        .tickFormat(function(d){ return fmtFunc(new Date(d))});

    var yAxis = d3.svg.axis()
                            .ticks(5) //軸のチックの数
                            .scale(yScale)
                            .orient("left")
                            .tickSize(6, -width);

    // line設定
    var line = d3.svg.line()
                        .x(function(d,i){ return xScale(new Date(d["DATE"]));})
                        .y(function(d,i){ return yScale(d["TOTAL_RECORDS"]);});

    // svgタグの中にcircleタグの作成
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr({
            r: 5,
            cx: function(d,i){ return xScale(new Date(d["DATE"])); },
            cy: function(d,i){ return yScale(d["TOTAL_RECORDS"]);}
        });

    // line表示
    svg.append("path")
        .datum(data) //data読み込み
        .attr({
            class: "line",
            d: line //上で作ったlineを入れて、linepathを作る
        });

    // gタグの中でyAxisをcallし、y軸を作る
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr({
            x: 10,
            y: -10
        })
        .style("text-anchor", "end")
        .text("Number");

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

});

参考URL

D3.jsチュートリアル Archives - Data is fun.