drewbo · August 29, 2015 14:10
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
  <div class="viz"></div>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
 <script>

 var margin = {top: 20, right: 40, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

 var x = d3.time.scale()
    .range([0,width])

 var y = d3.scale.linear()
    .range([height, 0]);

 var area = d3.svg.area()
 //   .interpolate("monotone")
    .x(function(d) { return x(d.displayDate); })
    .y0(height)
    .y1(function(d) { return y(d.Value); });
    
 var _months = { 
        "Jan" : 0, 
        "Feb" : 1,
        "Mar" : 2,
        "Apr" : 3,
        "May" : 4,
        "Jun" : 6,
        "Jul" : 5,
        "Aug" : 7,
        "Sep" : 8,
        "Oct" : 9,
        "Nov" : 10,
        "Dec" : 11
    };

 function getMonthObject(month) {
  return _months[month];
 }
    
 var svg = d3.select(".viz").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 // drop shadow code from http://bl.ocks.org/cpbotha/5200394
    
 var defs = svg.append("defs");

 var filter = defs.append("filter")
    .attr("id", "drop-shadow")
    .attr("height", "130%");

 filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", 1)
    .attr("result", "blur");

 filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 1)
    .attr("dy", -1)
    .attr("result", "offsetBlur");

 var feMerge = filter.append("feMerge");

 feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
 feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");
    
 d3.csv("KWH.csv", function(error, data) {
    data.forEach(function(d){
       d.Value = +d.Value;
       date = d.Date.split(' ')
       time = date[0].split(':')
       hours = +time[0] + ((date[1] === 'PM' && +time[0] !== 12) ? 12 : 0) + ((date[1] === 'AM' && +time[0] === 12) ? -12 : 0)  
       d.date = new Date(date[5], getMonthObject(date[3]), date[4], hours, time[1])
       d.displayDate = new Date(2001,01,01, hours, time[1])
    });
    
    days = _.unique(data.map(function(d) { return d.date.getDate(); }))
    lastDay = days[days.length-1]
    
    fullData = _.map(days, function(day) {
      return { day: day,
               values: _.filter(data, function(d,i) {
                 // remove every Xth value to smooth line
                 return (d.date.getDate() === day && (i % 4) === 0);
               })
             };
    });
    console.log(fullData);
    
    x.domain(d3.extent(_.pluck(fullData[1].values,'displayDate')));
    y.domain(d3.extent(data.map(function(d) { return d.Value; })));
    
    var days = svg.selectAll(".day")
      .data(fullData)
    .enter().append("g")
      .attr("class", "day");

  days.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return area(d.values); })
      .style("stroke", 0)
      .style('fill', function(d) { 
        var fill = (d.day === lastDay) ? d3.rgb(243,177,153) : d3.rgb(232,121,93);
        return fill;
       })
      .style("filter", "url(#drop-shadow)")
  
  console.log(data[data.length-2])
  svg.append('rect')
     .data([data[data.length-2]])
     .attr('class','cyclist')
     .attr('x', function(d) { return x(d.displayDate); })
     .attr('y', function(d) { return y(d.Value); })
     .attr('width',5)
     .attr('height',5)
  
  
 });



 </script>
diff --git a/KWH.csv b/KWH.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<div class="viz"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
	<script>

	var margin = {top: 20, right: 40, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0,width])

	var y = d3.scale.linear()
	.range([height, 0]);

	var area = d3.svg.area()
	// .interpolate("monotone")
	.x(function(d) { return x(d.displayDate); })
	.y0(height)
	.y1(function(d) { return y(d.Value); });

	var _months = {
	"Jan" : 0,
	"Feb" : 1,
	"Mar" : 2,
	"Apr" : 3,
	"May" : 4,
	"Jun" : 6,
	"Jul" : 5,
	"Aug" : 7,
	"Sep" : 8,
	"Oct" : 9,
	"Nov" : 10,
	"Dec" : 11
	};

	function getMonthObject(month) {
	return _months[month];
	}

	var svg = d3.select(".viz").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// drop shadow code from http://bl.ocks.org/cpbotha/5200394

	var defs = svg.append("defs");

	var filter = defs.append("filter")
	.attr("id", "drop-shadow")
	.attr("height", "130%");

	filter.append("feGaussianBlur")
	.attr("in", "SourceAlpha")
	.attr("stdDeviation", 1)
	.attr("result", "blur");

	filter.append("feOffset")
	.attr("in", "blur")
	.attr("dx", 1)
	.attr("dy", -1)
	.attr("result", "offsetBlur");

	var feMerge = filter.append("feMerge");

	feMerge.append("feMergeNode")
	.attr("in", "offsetBlur")
	feMerge.append("feMergeNode")
	.attr("in", "SourceGraphic");

	d3.csv("KWH.csv", function(error, data) {
	data.forEach(function(d){
	d.Value = +d.Value;
	date = d.Date.split(' ')
	time = date[0].split(':')
	hours = +time[0] + ((date[1] === 'PM' && +time[0] !== 12) ? 12 : 0) + ((date[1] === 'AM' && +time[0] === 12) ? -12 : 0)
	d.date = new Date(date[5], getMonthObject(date[3]), date[4], hours, time[1])
	d.displayDate = new Date(2001,01,01, hours, time[1])
	});

	days = _.unique(data.map(function(d) { return d.date.getDate(); }))
	lastDay = days[days.length-1]

	fullData = _.map(days, function(day) {
	return { day: day,
	values: _.filter(data, function(d,i) {
	// remove every Xth value to smooth line
	return (d.date.getDate() === day && (i % 4) === 0);
	})
	};
	});
	console.log(fullData);

	x.domain(d3.extent(_.pluck(fullData[1].values,'displayDate')));
	y.domain(d3.extent(data.map(function(d) { return d.Value; })));

	var days = svg.selectAll(".day")
	.data(fullData)
	.enter().append("g")
	.attr("class", "day");

	days.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return area(d.values); })
	.style("stroke", 0)
	.style('fill', function(d) {
	var fill = (d.day === lastDay) ? d3.rgb(243,177,153) : d3.rgb(232,121,93);
	return fill;
	})
	.style("filter", "url(#drop-shadow)")

	console.log(data[data.length-2])
	svg.append('rect')
	.data([data[data.length-2]])
	.attr('class','cyclist')
	.attr('x', function(d) { return x(d.displayDate); })
	.attr('y', function(d) { return y(d.Value); })
	.attr('width',5)
	.attr('height',5)


	});



	</script>