D3 Examples - Line bar chart generator with time series

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  
  // shape generator
    d3.functor = function functor(v) {
      return typeof v === "function" ? v : function() {
        return v;
      };
    }; 
​
    function lineBarGenerator() {
    //set defaults
    var x1 = function(d) { return d.x; },
        y1 = height,
        y2 = function(d) { return d.y-height; };
​
    //returned function to generate lineBar path
    function lineBar(d) {
      var line_x1 = d3.functor(x1).call(this, d),
          line_y2 = d3.functor(y2).call(this, d);
​
      return `M ${line_x1}, ${y1} v ${line_y2-height}`;
    }
​
    //getter-setter methods
    lineBar.x1 = function(value) {
      if (!arguments.length) return x1; x1 = value; return lineBar;
    };  
    lineBar.y1 = function(value) {
      if (!arguments.length) return y1; y1 = value; return lineBar;
    };  
    lineBar.y2 = function(value) {
      if (!arguments.length) return y2; y2 = value; return lineBar;
    };
​
    return lineBar;
  }
  // end shape generator
​
  var margin = {
        top: 100,
        right: 100,
        left: 100,
        bottom: 100
      };
​
  var svg = d3.select("svg");
​
  var width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;
​
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," +  margin.top + ")");
​
  var parseDate = d3.timeParse("%Y/%m/%d %H:%M");
​
    // scales
  var x = d3.scaleTime()
    .range([0, width]),
        y = d3.scaleLinear()
    .range([height, 0]);
  
  var xAxis = d3.axisBottom(x),
    yAxis = d3.axisLeft(y);
  
  var xGroup = g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
​
  var yGroup = g.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis);
​
  var lineBar = lineBarGenerator()
     .x1(function(d) { return x(d.date); })
     .y2(function(d) { console.log(d.value, y(d.value));return y(d.value); });
​
  d3.csv("kW.csv", type, function(error, data) {
    if (error) throw error;
    
    var xExtent = d3.extent(data, function(d) { return d.date; });
    x.domain(xExtent);
    y.domain([0, d3.max(data, function(d) { return d.value; })]);
    xGroup.call(xAxis);
    yGroup.call(yAxis);
​
    var linePaths = g.append("g")
        .attr("class", "pathsGroup");
  
    linePaths.selectAll("path.lineBar")
      .data(data)
    .enter().append("path")
    .attr("class", "lineBar")
      .attr("d", lineBar)
        .style("stroke", "steelblue" )
      .style("stroke-width", 1 );
  });
  
  function type(d) {
    d.date = parseDate(d.date);
    d.value = +Math.round(d.PVkW);     // changed data value to match new data and rounded to integer values to optimize
    return d;
  }
</script> 
    