D3 line chart with animation

Built with blockbuilder.org

forked from romsson's block: D3 bar chart without data-binding

forked from as-eldlc's block: D3 bar chart without data-binding

forked from as-eldlc's block: D3 line chart with animation

forked from anonymous's block: D3 line chart with animation

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

https://d3js.org/d3.v4.min.js