Line_Chart_d3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart</title>
		<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>

var w = 1000;
			var h = 500;
      var dataset;

d3.csv("county_crime_sample.csv", function(csv_data) {
        dataset = csv_data;
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        var margin = {top: 50, right: 100, bottom: 50, left: 100};
				svg.append("text")
						.attr("x", (w)/2)
						.attr("y", (margin.top / 4))
						.attr("text-anchor", "middle")
						.attr("font-weight","bold")
						.style("font-size", "16px")
						.style("text-decoration", "underline")
						.text("Line chart using County crime data");
        w = svg.attr("width") - margin.left - margin.right;
        h = svg.attr("height") - margin.top - margin.bottom;

var xScale = d3.scaleBand()
                .domain(nested_data.map(function(d) { return d.Year; }))
                .range([0, w])
								.paddingInner(1);

var yScale = d3.scaleLinear()
                .domain([0, d3.max(nested_data, function(d) { return d.Totals_Violent_All;})])
                .range([h,0]);

var line = d3.line()
                      .x(function(d) {return xScale(d.Year); })
                      .y(function(d) {return yScale(d.Totals_Violent_All); });

var g = svg.append("g")
                   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        //by default 1em = 16px if font size is not set for any element
        g.append("g")
         .attr("class", "x-axis")
         .attr("transform", "translate(0," + h + ")")
         .call(d3.axisBottom(xScale))
				 .append("text")
         .attr("text-anchor", "start");;

g.append("g")
         .attr("class", "y-axis")
         .call(d3.axisLeft(yScale).ticks(10))
         .append("text")
         .attr("transform", "rotate(-90)")
         .attr("y", 6)
         .attr("dy", "0.71em")
         .attr("text-anchor", "end");

g.append("path")
          .datum(nested_data)
          .attr("fill", "none")
          .attr("stroke", "#CD5C5C")
          .attr("stroke-linejoin", "round")
          .attr("stroke-linecap", "round")
          .attr("stroke-width", 1.5)
          .attr("d", line);

svg.append("text")
					.attr("text-anchor", "middle")
					.attr("transform", "translate("+ (margin.left/4) +","+(h/2)+")rotate(-90)")
					.attr("font-weight","bold")
					.text("No of Violence related crimes");

svg.append("text")
				 .attr("text-anchor", "end")
				 .attr("transform", "translate("+ (w/2 + margin.left) +","+(h + margin.top + margin.bottom)+")")
				 .attr("font-weight","bold")
				 .text("Year");
      });

</script>
	</body>
</html>

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