xxxxxxxxxx<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> <script type="text/javascript"> 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 nested_data = d3.nest() .key(function(d) { return +d.Year;}) .sortKeys(d3.ascending) .rollup(function(d) { return d3.sum(d, function(g) {return +g.Totals_Violent_All; }); }).entries(csv_data); nested_data.forEach(function(d) { d.Year = +d.key; d.Totals_Violent_All = +d.value; }); 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