javascript:d 3.jsはcsvを読み、折れ線を引く.

//      
var border_color = "#1E90FF";
//        
var fillcolor = "rgba(204, 238, 255, 0.1)";
var dotcolor = "rgba(255, 255, 255, 0.9)";
//       
var dataset =[];
var dates =[];
var jzset =[];
d3.csv("jijin1.csv", function(error,data){
   // if(error){ console.log(error);}
   data.forEach(function(d) {
    var cx = d.date;
    var cy = d.jz; 
    dataset.push([cx,cy]);
    dates.push(cx);
    jzset.push(cy);
  })

var w1 = 1000;
var h1 = 500;

var svg = d3.select("body").append('svg')
     .attr("width", w1)
     .attr("height", h1);

var div2 = d3.select("body").append('div')
     .attr("class", "tooltip2")
     .style("opacity", 0);

var margin = {top: 20, right: 25, bottom: 100, left: 60};
   width = w1 - margin.left - margin.right,
   height = h1 - margin.top - margin.bottom;

var new_svg = svg.append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

var x = d3.time.scale()
    .domain([format.parse(dates[0]),
             format.parse(dates[dates.length-1])])
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10)
    .tickFormat(d3.time.format("%Y-%m-%d"));

var y = d3.scale.linear()
    .domain([0, d3.max(jzset, function(d){ return d;})*1.1])
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

// Define the line
var line = d3.svg.line()
    .x(function(d){return x(format.parse(d[0]))})
    .y(function(d){return y(d[1])})
    .interpolate("linear");

// Add the X Axis
new_svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "x axis")
    .style("fill",border_color)
    .style("font-size","1em")
    .call(xAxis)
    .selectAll("text")
    .attr("transform", "rotate(-70)")
    .style("text-anchor", "end");

// Add the Y Axis
new_svg.append("g")
    .attr("class", "y axis")
    .style("fill",border_color)
    .style("font-size","1.3em")
    .call(yAxis);

// Add the line
var svg_path1 = new_svg.append('path')
    .attr("d", line(dataset))
    .attr("fill","none")
    .attr("stroke-width","0.16em")
    .attr("stroke",border_color);

//   
function do_animation(path) {
    var totalLength = path.node().getTotalLength();
    path.attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(2000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);
 }
do_animation(svg_path1);
// Grid    
function styleGridlineNodes(axisNodes) {
  axisNodes.selectAll('.domain')
   .attr({ fill: 'none', stroke: 'none'});
  axisNodes.selectAll('.tick line')
   .attr({fill: 'none', 'stroke-width': 1, stroke: 'lightgray'});
}
//  Grid   
var yGridlinesAxis = d3.svg.axis().scale(y).orient("left");
var yGridlineNodes = svg.append('g')
   .attr('transform', 'translate(' + (margin.left + width)+ ',' + margin.top + ')')
   .call(yGridlinesAxis.tickSize(width, 0, 0).tickFormat(""));
styleGridlineNodes(yGridlineNodes);
//   Grid   
var xGridlinesAxis = d3.svg.axis().scale(x).orient("bottom");
var xGridlineNodes = svg.append('g')
   .attr('transform', 'translate(' + margin.left + ',' +(h1 - margin.bottom) + ')')
   .call(xGridlinesAxis.tickSize(-w1, 0, 0).tickFormat(""));
styleGridlineNodes(xGridlineNodes);

});