Line Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .line {
            fill: none;
            stroke: #000;
            stroke-width: 1.5px;
        }
  </style>
</head>
<svg width="960" height="500">
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
 		var data = [];
    var svg = d3.select("svg"),
            margin = {
                top: 20,
                right: 20,
                bottom: 20,
                left: 40
            },
        		width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom;
      var g1 = svg.append("g")
      		.attr("transform", "translate(" + margin.left + "," +margin.top + ")");
    var parseTime = d3.timeParse("%m/%Y"),
        	timeValue = function(d) { return parseTime(d.month); },
        	dataValue = function (d) { return +d.value; },
        	color = "steelblue";
    d3.csv('data.csv')
  		.then(function(data) {
      console.log(data);
      data = data.map(function (d, i) {
                return { time: timeValue(d), value: dataValue(d) };
            });
      
      var x = d3.scaleTime()
                .rangeRound([0, width - margin.left - margin.right])
                .domain(d3.extent(data, function(d) { return d.time; }));

g.append("path")
        			.data([data])
        			.attr("class", "data")
              .attr("fill", "none")
              .attr("stroke", "steelblue")
              .attr("stroke-linejoin", "round")
              .attr("stroke-linecap", "round")
              .attr("stroke-width", 4);
        		
        	g.append("g").attr("class", "axis x").attr("transform", "translate(0," 
+(height - margin.bottom) + ")").call(d3.axisBottom(x).ticks(5))
                .select(".domain")
                .remove();
      
      		g.append("g").attr("class", "axis y")
                .append("text")
                .attr("fill", "#000")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", "0.71em")
                .attr("text-anchor", "end")
                .text("Data");
      
      		 g.select("g.axis.y")
                .attr("class", "axis y")
                .call(d3.axisLeft(y));

g.append("path")
                .attr("class", "data");
      		
      		function transition(path) {
              path.transition()
                  .duration(2000).attrTween("stroke-dasharray", tweenDash);
    }
    function tweenDash() {
        var l = this.getTotalLength(),
            i = d3.interpolateString("0," + l, l + "," + l);
        return function (t) { return i(t); };
    }
      		g.select("path.data")
                .datum(data)
                .attr("d", line)
          			.call(transition);
      
  	});

</script>
</body>

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