D3 Examples - D3 line chart with animation

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    rect {
      fill: red;
      stroke: black;
      stroke-width: 0;
    }
    .dot {
      opacity: 0.5;
      fill: grey;
    }
    
    line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }
    
    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }
        
    
    div.tooltip {   
        position: absolute;         
        text-align: center;         
        width: 60px;                    
        height: 15px;                   
        padding: 2px;       
        margin-left: 50px;
        margin-top: 5px;
        font: 14px sans-serif;      
        background: lightsteelblue; 
        border: 1px;        
        border-radius: 8px;         
        pointer-events: none;           
    }
    
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top: 20, right: 30, bottom: 50, left: 40},
    width = 900 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width+ margin.left + margin.right)
      .attr("height", height+ margin.top + margin.bottom)
        var g = svg.append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
    
    var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
    
        var data;
    d3.text("data_linechart.csv", function(error, raw){
    
      var data = d3.dsvFormat(",").parse(raw);
      var parseTime = d3.timeParse("%d/%m/%Y");
      var formatTime = d3.timeFormat("%d/%m/%Y");
      
      data.map(function(d){
        d.value = parseInt(d.value)
        d.date = parseTime(d.date);
      })
      //console.log(data)
      var max = d3.max(data, function(d){return parseInt(d.value)})
      var y = d3.scaleLinear()
        .domain([0, max])
        .range([height,0]);
      
      var x = d3.scaleTime()
        .rangeRound([0, width]);
      
      x.domain(d3.extent(data, function(d) { return d.date; }));
      
      var line = d3.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.value); });
      
      console.log(data.length)
      var barwidth = width / data.length
            
      g.append("g")
      .attr("transform", "translate(0," + (height) + ")")
      .call(d3.axisBottom(x))
      
      g.append("g")
      //.attr("transform", "translate(0," + (height) + ")")
      .call(d3.axisLeft(y))
​
      var svg_aline = g.append("line")
        .attr("class", "line")  
        .style("stroke-dasharray", ("3, 10"))   
        .attr("x1",100)
        .attr("x2",400)
        .attr("y1",200)
          .attr("y2",200)
        .style("display", "None")
      
​
      // Line 
      g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line);
      
      g.selectAll("dot").data(data)
        .enter()
        .append("circle")
        .attr("r", 8)
        .attr("cx", function(d){return x(d.date)})
        .attr("cy", function(d){return y(d.value);})
        .attr("class", "dot")
        .on("mouseover", function(d) {  
                d3.select(this).transition().duration(100)
              .style("fill", "black")
              .attr("r", 12);
            div.transition()        
                .duration(200)      
                .style("opacity", .8);      
            div .html(d.value)  
                .style("left", x(d.date) + "px")        
                .style("top", y(d.value) + "px");   
                svg_aline.transition().duration(10)
                .style("display", "block")
                .attr("x1", x(d.date))
                .attr("y1", y(d.value))
                .attr("x2", x(d.date))
                .attr("y2", height)
            })          
            
        .on("mouseout", function(d) {   
                d3.select(this).transition().duration(100)
              .style("fill", "grey")
              .attr("r", 8);
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
                svg_aline.style("display","None")
        });
      // bar chart
      /*var g = svg.selectAll("rect").data(data)
        .enter()
        .append("rect")
        .attr("y", function(d,i){return y(d.value);})
        .attr("x", function(d,i){return x(d.date)})
        .attr("width", barwidth)
        .attr("fill",  "red")
        .attr("height", function(d,i){return height-y(d.value)});
            */
      
      
    })
  </script>
</body>
​
    