interwebjill · February 13, 2019 00:59
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
 <svg width="960" height="500"></svg>
 <script src="http://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> 
diff --git a/kW.csv b/kW.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<svg width="960" height="500"></svg>
	<script src="http://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>