Line bar chart generator with time series

forked from interwebjill's block: Line bar chart generator

<!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>

Modified http://d3js.org/d3.v4.min.js to a secure url

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