Old school D3 from simpler times

All examples By author By category About

hitarth19

Full window Github gist

D3 V4 Line Chart example with scaling dates on xAxis

Built with blockbuilder.org

<!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; }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
}
  </style>
</head>

<body>
  <script>
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 300)

var margin = {left:30, right:30, top: 10, bottom: 20}
    var width = svg.attr("width") - margin.left - margin.right;
    var height = svg.attr("height") - margin.bottom - margin.top;
    
   
     var data = [
				
								{"date":"01/01/2016", "a": 220 },
                {"date":"02/01/2016", "a": 250},
                {"date":"03/01/2016", "a": 130},
                {"date":"04/01/2016", "a": 155},
                {"date":"05/01/2016", "a": 212 },
				{"date":"06/01/2016", "a": 250 },
                {"date":"07/01/2016", "a": 112},
                {"date":"08/01/2016", "a": 111},
                {"date":"09/01/2016", "a": 147},
                {"date":"10/01/2016", "a": 239 },
			    {"date":"11/01/2016", "a": 143 },
                {"date":"12/01/2016", "a": 159 },
                {"date":"13/01/2016", "a": 168 },
                {"date":"14/01/2016", "a": 190 },
                {"date":"15/01/2016", "a": 180 },
			    {"date":"16/01/2016", "a": 200 },
                {"date":"17/01/2016", "a": 189 },
                {"date":"18/01/2016", "a": 193 },
                {"date":"19/01/2016", "a": 142 },
                {"date":"20/01/2016", "a": 130 },
			    {"date":"21/01/2016", "a": 235 },
                {"date":"22/01/2016", "a": 180 },
                {"date":"23/01/2016", "a": 220 },
                {"date":"24/01/2016", "a": 178 },
                {"date":"25/01/2016", "a": 209 },
			    {"date":"26/01/2016", "a": 235 },
                {"date":"27/01/2016", "a": 164 },
                {"date":"28/01/2016", "a": 178 },
                {"date":"29/01/2016", "a": 168 },
                {"date":"30/01/2016", "a": 200 },
				{"date":"31/01/2016", "a": 210 },
				{"date":"01/02/2016", "a": 220 },
                {"date":"02/02/2016", "a": 250},
                {"date":"03/02/2016", "a": 130},
                {"date":"04/02/2016", "a": 155},
                {"date":"05/02/2016", "a": 212 },
				{"date":"06/02/2016", "a": 250 },
                {"date":"07/02/2016", "a": 112},
                {"date":"08/02/2016", "a": 111},
                {"date":"09/02/2016", "a": 147},
                {"date":"10/02/2016", "a": 239 },
			    {"date":"11/02/2016", "a": 143 },
                {"date":"12/02/2016", "a": 159 },
                {"date":"13/02/2016", "a": 168 },
                {"date":"14/02/2016", "a": 190 },
                {"date":"15/02/2016", "a": 180 },
			    {"date":"16/02/2016", "a": 200 },
                {"date":"17/02/2016", "a": 189 },
                {"date":"18/02/2016", "a": 193 },
                {"date":"19/02/2016", "a": 142 },
                {"date":"20/02/2016", "a": 130 },
			    {"date":"21/02/2016", "a": 235 },
                {"date":"22/02/2016", "a": 180 },
                {"date":"23/02/2016", "a": 220 },
                {"date":"24/02/2016", "a": 178 },
                {"date":"25/02/2016", "a": 209 },
			    {"date":"26/02/2016", "a": 235 },
                {"date":"27/02/2016", "a": 164 },
                {"date":"28/02/2016", "a": 178 },
				{"date":"01/03/2016", "a": 220 },
                {"date":"02/03/2016", "a": 250},
                {"date":"03/03/2016", "a": 130},
                {"date":"04/03/2016", "a": 155},
                {"date":"05/03/2016", "a": 212 },
				{"date":"06/03/2016", "a": 250 },
                {"date":"07/03/2016", "a": 112},
                {"date":"08/03/2016", "a": 111},
                {"date":"09/03/2016", "a": 147},
                {"date":"10/03/2016", "a": 239 },
			    {"date":"11/03/2016", "a": 143 },
                {"date":"12/03/2016", "a": 159 },
                {"date":"13/03/2016", "a": 168 },
                {"date":"14/03/2016", "a": 190 },
                {"date":"15/03/2016", "a": 180 },
			    {"date":"16/03/2016", "a": 200 },
                {"date":"17/03/2016", "a": 189 },
                {"date":"18/03/2016", "a": 193 },
                {"date":"19/03/2016", "a": 142 },
                {"date":"20/03/2016", "a": 130 },
			    {"date":"21/03/2016", "a": 235 },
                {"date":"22/03/2016", "a": 180 },
                {"date":"23/03/2016", "a": 220 },
                {"date":"24/03/2016", "a": 178 },
                {"date":"25/03/2016", "a": 209 },
			    {"date":"26/03/2016", "a": 235 },
                {"date":"27/03/2016", "a": 164 },
                {"date":"28/03/2016", "a": 178 },
                {"date":"29/03/2016", "a": 168 },
                {"date":"30/03/2016", "a": 200 },
				{"date":"31/03/2016", "a": 210 },
				{"date":"01/04/2016", "a": 220 },
                {"date":"02/04/2016", "a": 250},
                {"date":"03/04/2016", "a": 130},
                {"date":"04/04/2016", "a": 155},
                {"date":"05/04/2016", "a": 212 },
				{"date":"06/04/2016", "a": 250 },
                {"date":"07/04/2016", "a": 112},
                {"date":"08/04/2016", "a": 111},
                {"date":"09/04/2016", "a": 147},
                {"date":"10/04/2016", "a": 239 },
			    {"date":"11/04/2016", "a": 143 },
                {"date":"12/04/2016", "a": 159 },
                {"date":"13/04/2016", "a": 168 },
                {"date":"14/04/2016", "a": 190 },
                {"date":"15/04/2016", "a": 180 },
			    {"date":"16/04/2016", "a": 200 },
                {"date":"17/04/2016", "a": 189 },
                {"date":"18/04/2016", "a": 193 },
                {"date":"19/04/2016", "a": 142 },
                {"date":"20/04/2016", "a": 130 },
			    {"date":"21/04/2016", "a": 235 },
                {"date":"22/04/2016", "a": 180 },
                {"date":"23/04/2016", "a": 220 },
                {"date":"24/04/2016", "a": 178 },
                {"date":"25/04/2016", "a": 209 },
			    {"date":"26/04/2016", "a": 235 },
                {"date":"27/04/2016", "a": 164 },
                {"date":"28/04/2016", "a": 178 },
                {"date":"29/04/2016", "a": 168 },
                {"date":"30/04/2016", "a": 200 },
				{"date":"01/05/2016", "a": 220 },
                {"date":"02/05/2016", "a": 250},
                {"date":"03/05/2016", "a": 130},
                {"date":"04/05/2016", "a": 155},
                {"date":"05/05/2016", "a": 212 },
				{"date":"06/05/2016", "a": 250 },
                {"date":"07/05/2016", "a": 112},
                {"date":"08/05/2016", "a": 111},
                {"date":"09/05/2016", "a": 147},
                {"date":"10/05/2016", "a": 239 },
			    {"date":"11/05/2016", "a": 143 },
                {"date":"12/05/2016", "a": 159 },
                {"date":"13/05/2016", "a": 168 },
                {"date":"14/05/2016", "a": 190 },
                {"date":"15/05/2016", "a": 180 },
			    {"date":"16/05/2016", "a": 200 },
                {"date":"17/05/2016", "a": 189 },
                {"date":"18/05/2016", "a": 193 },
                {"date":"19/05/2016", "a": 142 },
                {"date":"20/05/2016", "a": 130 },
			    {"date":"21/05/2016", "a": 235 },
                {"date":"22/05/2016", "a": 180 },
                {"date":"23/05/2016", "a": 220 },
                {"date":"24/05/2016", "a": 178 },
                {"date":"25/05/2016", "a": 209 },
			    {"date":"26/05/2016", "a": 235 },
                {"date":"27/05/2016", "a": 164 },
                {"date":"28/05/2016", "a": 178 },
                {"date":"29/05/2016", "a": 168 },
                {"date":"30/05/2016", "a": 200 },
				{"date":"01/06/2016", "a": 220 },
                {"date":"02/06/2016", "a": 250},
                {"date":"03/06/2016", "a": 130},
                {"date":"04/06/2016", "a": 155},
                {"date":"05/06/2016", "a": 212 },
				{"date":"06/06/2016", "a": 250 },
                {"date":"07/06/2016", "a": 112},
                {"date":"08/06/2016", "a": 111},
                {"date":"09/06/2016", "a": 147},
                {"date":"10/06/2016", "a": 239 },
			    {"date":"11/06/2016", "a": 143 },
                {"date":"12/06/2016", "a": 159 },
                {"date":"13/06/2016", "a": 168 },
                {"date":"14/06/2016", "a": 190 },
                {"date":"15/06/2016", "a": 180 },
			    {"date":"16/06/2016", "a": 200 },
                {"date":"17/06/2016", "a": 189 },
                {"date":"18/06/2016", "a": 193 },
                {"date":"19/06/2016", "a": 142 },
                {"date":"20/06/2016", "a": 130 },
			    {"date":"21/06/2016", "a": 235 },
                {"date":"22/06/2016", "a": 180 },
                {"date":"23/06/2016", "a": 220 },
                {"date":"24/06/2016", "a": 178 },
                {"date":"25/06/2016", "a": 209 },
			    {"date":"26/06/2016", "a": 235 },
                {"date":"27/06/2016", "a": 164 },
                {"date":"28/06/2016", "a": 178 },
                {"date":"29/06/2016", "a": 168 },
                {"date":"30/06/2016", "a": 200 },
				{"date":"01/07/2016", "a": 220 },
                {"date":"02/07/2016", "a": 250},
                {"date":"03/07/2016", "a": 130},
                {"date":"04/07/2016", "a": 155},
                {"date":"05/07/2016", "a": 212 },
				{"date":"06/07/2016", "a": 250 },
                {"date":"07/07/2016", "a": 112},
                {"date":"08/07/2016", "a": 111},
                {"date":"09/07/2016", "a": 147},
                {"date":"10/07/2016", "a": 239 },
			    {"date":"11/07/2016", "a": 143 },
                {"date":"12/07/2016", "a": 159 },
                {"date":"13/07/2016", "a": 168 },
                {"date":"14/07/2016", "a": 190 },
                {"date":"15/07/2016", "a": 180 },
			    {"date":"16/07/2016", "a": 200 },
                {"date":"17/07/2016", "a": 189 },
                {"date":"18/07/2016", "a": 193 },
                {"date":"19/07/2016", "a": 142 },
                {"date":"20/07/2016", "a": 130 },
			    {"date":"21/07/2016", "a": 235 },
                {"date":"22/07/2016", "a": 180 },
                {"date":"23/07/2016", "a": 220 },
                {"date":"24/07/2016", "a": 178 },
                {"date":"25/07/2016", "a": 209 },
			    {"date":"26/07/2016", "a": 235 },
                {"date":"27/07/2016", "a": 164 },
                {"date":"28/07/2016", "a": 178 },
                {"date":"29/07/2016", "a": 168 },
                {"date":"30/07/2016", "a": 200 },
				{"date":"31/07/2016", "a": 190 },
				{"date":"01/08/2016", "a": 220 },
                {"date":"02/08/2016", "a": 250},
                {"date":"03/08/2016", "a": 130},
                {"date":"04/08/2016", "a": 155},
                {"date":"05/08/2016", "a": 212 },
				{"date":"06/08/2016", "a": 250 },
                {"date":"07/08/2016", "a": 112},
                {"date":"08/08/2016", "a": 111},
                {"date":"09/08/2016", "a": 147},
                {"date":"10/08/2016", "a": 239 },
			    {"date":"11/08/2016", "a": 143 },
                {"date":"12/08/2016", "a": 159 },
                {"date":"13/08/2016", "a": 168 },
                {"date":"14/08/2016", "a": 190 },
                {"date":"15/08/2016", "a": 180 },
			    {"date":"16/08/2016", "a": 200 },
                {"date":"17/08/2016", "a": 189 },
                {"date":"18/08/2016", "a": 193 },
                {"date":"19/08/2016", "a": 142 },
                {"date":"20/08/2016", "a": 130 },
			    {"date":"21/08/2016", "a": 235 },
                {"date":"22/08/2016", "a": 180 },
                {"date":"23/08/2016", "a": 220 },
                {"date":"24/08/2016", "a": 178 },
                {"date":"25/08/2016", "a": 209 },
			    {"date":"26/08/2016", "a": 235 },
                {"date":"27/08/2016", "a": 164 },
                {"date":"28/08/2016", "a": 178 },
                {"date":"29/08/2016", "a": 168 },
                {"date":"30/08/2016", "a": 200 },
				{"date":"31/08/2016", "a": 190 },
				{"date":"01/09/2016", "a": 220 },
                {"date":"02/09/2016", "a": 250},
                {"date":"03/09/2016", "a": 130},
                {"date":"04/09/2016", "a": 155},
                {"date":"05/09/2016", "a": 212 },
				{"date":"06/09/2016", "a": 250 },
                {"date":"07/09/2016", "a": 112},
                {"date":"08/09/2016", "a": 111},
                {"date":"09/09/2016", "a": 147},
                {"date":"10/09/2016", "a": 239 },
			    {"date":"11/09/2016", "a": 143 },
                {"date":"12/09/2016", "a": 159 },
                {"date":"13/09/2016", "a": 168 },
                {"date":"14/09/2016", "a": 190 },
                {"date":"15/09/2016", "a": 180 },
			    {"date":"16/09/2016", "a": 200 },
                {"date":"17/09/2016", "a": 189 },
                {"date":"18/09/2016", "a": 193 },
                {"date":"19/09/2016", "a": 142 },
                {"date":"20/09/2016", "a": 130 },
			    {"date":"21/09/2016", "a": 235 },
                {"date":"22/09/2016", "a": 180 },
                {"date":"23/09/2016", "a": 220 },
                {"date":"24/09/2016", "a": 178 },
                {"date":"25/09/2016", "a": 209 },
			    {"date":"26/09/2016", "a": 235 },
                {"date":"27/09/2016", "a": 164 },
                {"date":"28/09/2016", "a": 178 },
                {"date":"29/09/2016", "a": 168 },
                {"date":"30/09/2016", "a": 200 },
				{"date":"01/10/2016", "a": 220 },
                {"date":"02/10/2016", "a": 250},
                {"date":"03/10/2016", "a": 130},
                {"date":"04/10/2016", "a": 155},
                {"date":"05/10/2016", "a": 212 },
				{"date":"06/10/2016", "a": 250 },
                {"date":"07/10/2016", "a": 112},
                {"date":"08/10/2016", "a": 111},
                {"date":"09/10/2016", "a": 147},
                {"date":"10/10/2016", "a": 239 },
			    {"date":"11/10/2016", "a": 143 },
                {"date":"12/10/2016", "a": 159 },
                {"date":"13/10/2016", "a": 168 },
                {"date":"14/10/2016", "a": 190 },
                {"date":"15/10/2016", "a": 180 },
			    {"date":"16/10/2016", "a": 200 },
                {"date":"17/10/2016", "a": 189 },
                {"date":"18/10/2016", "a": 193 },
                {"date":"19/10/2016", "a": 142 },
                {"date":"20/10/2016", "a": 130 },
			    {"date":"21/10/2016", "a": 235 },
                {"date":"22/10/2016", "a": 180 },
                {"date":"23/10/2016", "a": 220 },
                {"date":"24/10/2016", "a": 178 },
                {"date":"25/10/2016", "a": 209 },
			    {"date":"26/10/2016", "a": 235 },
                {"date":"27/10/2016", "a": 164 },
                {"date":"28/10/2016", "a": 178 },
                {"date":"29/10/2016", "a": 168 },
                {"date":"30/10/2016", "a": 200 },
				{"date":"31/10/2016", "a": 200 },
				{"date":"01/11/2016", "a": 220 },
                {"date":"02/11/2016", "a": 250},
                {"date":"03/11/2016", "a": 130},
                {"date":"04/11/2016", "a": 155},
                {"date":"05/11/2016", "a": 212 },
				{"date":"06/11/2016", "a": 250 },
                {"date":"07/11/2016", "a": 112},
                {"date":"08/11/2016", "a": 111},
                {"date":"09/11/2016", "a": 147},
                {"date":"10/11/2016", "a": 239 },
			    {"date":"11/11/2016", "a": 143 },
                {"date":"12/11/2016", "a": 159 },
                {"date":"13/11/2016", "a": 168 },
                {"date":"14/11/2016", "a": 190 },
                {"date":"15/11/2016", "a": 180 },
			    {"date":"16/11/2016", "a": 200 },
                {"date":"17/11/2016", "a": 189 },
                {"date":"18/11/2016", "a": 193 },
                {"date":"19/11/2016", "a": 142 },
                {"date":"20/11/2016", "a": 130 },
			    {"date":"21/11/2016", "a": 235 },
                {"date":"22/11/2016", "a": 180 },
                {"date":"23/11/2016", "a": 220 },
                {"date":"24/11/2016", "a": 178 },
                {"date":"25/11/2016", "a": 209 },
			    {"date":"26/11/2016", "a": 235 },
                {"date":"27/11/2016", "a": 164 },
                {"date":"28/11/2016", "a": 178 },
                {"date":"29/11/2016", "a": 168 },
                {"date":"30/11/2016", "a": 200 },
				{"date":"01/12/2016", "a": 220 },
                {"date":"02/12/2016", "a": 250},
                {"date":"03/12/2016", "a": 130},
                {"date":"04/12/2016", "a": 155},
                {"date":"05/12/2016", "a": 212 },
				{"date":"06/12/2016", "a": 250 },
                {"date":"07/12/2016", "a": 112},
                {"date":"08/12/2016", "a": 111},
                {"date":"09/12/2016", "a": 147},
                {"date":"10/12/2016", "a": 239 },
			    {"date":"11/12/2016", "a": 143 },
                {"date":"12/12/2016", "a": 159 },
                {"date":"13/12/2016", "a": 168 },
                {"date":"14/12/2016", "a": 190 },
                {"date":"15/12/2016", "a": 180 },
			    {"date":"16/12/2016", "a": 200 },
                {"date":"17/12/2016", "a": 189 },
                {"date":"18/12/2016", "a": 193 },
                {"date":"19/12/2016", "a": 142 },
                {"date":"20/12/2016", "a": 130 },
			    {"date":"21/12/2016", "a": 235 },
                {"date":"22/12/2016", "a": 180 },
                {"date":"23/12/2016", "a": 220 },
                {"date":"24/12/2016", "a": 178 },
                {"date":"25/12/2016", "a": 209 },
			    {"date":"26/12/2016", "a": 235 },
                {"date":"27/12/2016", "a": 164 },
                {"date":"28/12/2016", "a": 178 },
                {"date":"29/12/2016", "a": 168 },
                {"date":"30/12/2016", "a": 200 },
				{"date":"31/12/2016", "a": 200 },
       					
			   ]
    
    var x = d3.scaleTime()
    	.rangeRound([0, width]);
    var x_axis = d3.axisBottom(x);
    
    var y = d3.scaleLinear()
    	.rangeRound([height, 0]);
    var y_axis = d3.axisBottom(y);
    var xFormat = "%d-%b-%Y";;
    var parseTime = d3.timeParse("%d/%m/%Y");
    
    x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));
  	y.domain([0, 
              d3.max(data, function(d) { 
                return d3.max([d.a, d.b, d.c, d.d]);
              })]);

var a = function(d) {return d.a};
    
    var multiline = function(category) {
      var line = d3.line()
                  .x(function(d) { return x(parseTime(d.date)); })
                  .y(function(d) { return y(d[category]); });
      return line;
    }

var categories = ['a', 'b', 'c', 'd'];
    //var color = d3.scale.category10();  // escala com 10 cores (category10)
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    var g = svg.append("g")
        .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
    
    for (i in categories) {
      var lineFunction = multiline(categories[i]);
      g.append("path")
        .datum(data) 
        .attr("class", "line")
        .style("stroke", color(i))
        .attr("d", lineFunction);
    }
    
      // Add the X Axis
  		g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat(xFormat)));
    
      // Add the Y Axis
  		g.append("g")
      .call(d3.axisLeft(y));

</script>
</body>

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