ch-bu · March 22, 2017 20:17
diff --git a/.block b/.block
 licence: gpl-3.0
 height: 220
 width: 1000
diff --git a/app.js b/app.js
 var margin = {top: 40, bottom: 50, left: 70, right: 20};
 var width = 1000;
 var height = 220;
 var gridSize = 15;
 var colors = ['#eee', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];

 // List of all weekdays
 var weekdays = moment.weekdays();

 // We need to parse the time of our data
 var parseDate = d3.timeParse('%Y-%m-%d');

 // Generate svg
 var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

 // Create wrapper for heatmap
 var visWrapper = svg.append('g')
  .attr('width', width - margin.left - margin.right)
  .attr('height', height - margin.top - margin.bottom)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

 // Get data from csv file
 d3.csv('work-per-day.csv', type, function(error, days) {
  // Throw error if data cannot be fetched
  if (error) throw error;

  // Sort data by date
  var sortedDays = days.sort(function(a, b) {
    return a.date - b.date;
  });

  // Copy days for loop
  // otherwise we run into a major bug as we
  // would change the days array within the
  // loop
  var daysCopy = sortedDays;

  // Generate all dates
  // I haven't worked on some days. Therefore
  // I have to include the  missing values
  // afterwards
  for (let i = 0; i < (sortedDays.length - 1); i++) {

    var dayIncrement = i + 1;
    var currentDay = days[i].date;
    var nextDay = moment(currentDay).add(1, 'days');
    var nextDayString = nextDay.toDate();
    var nextDayInList = days[dayIncrement].date;

    // There is at least a day missing
    // We need to fill in the gaps
    if (nextDayInList.getDate() != nextDayString.getDate()) {

      // Loop over every day as long
      // the next day is missing in the dataset
      let missing = true;

      // Reinitialize missing days array
      // stores all dates where I did not
      // work
      var missingDays = [];

      while (missing) {
        // Add new object
        let fillObject = {day: nextDayString.getDate(),
                          minutes: 0,
                          date: nextDayString,
                          month: moment.months()[nextDayString.getMonth()],
                          year: nextDayString.getFullYear(),
                          dayString: weekdays[nextDayString.getDay()]};

        // Add missing day to array
        missingDays.push(fillObject);

        // Increment current and next day
        nextDay = moment(nextDay).add(1, 'days');
        nextDayString = nextDay.toDate();

        // Break loop over next in list exists
        if (nextDayString.getDate() == nextDayInList.getDate()) {
          missing = false;
        }
      }

      // Merge both arrays
      daysCopy = daysCopy.concat(missingDays);
    }
  }

  // Sort final dataset
  var daysCopy = daysCopy.sort(function(a, b) {
    return a.date - b.date;
  });

  // Get only data of the last year
  var yearAgo = moment(daysCopy[daysCopy.length - 1].date).subtract(1, 'year').toDate();

  // Get all dates that are less than a year ago
  var daysLastYear = daysCopy.filter(function(e) {
    // Is date more recent than day one year ago?
    let dateLater = moment(e.date.toISOString()).isAfter(yearAgo.toISOString());

    // Day is more recent
    if (dateLater) {
      // Create week variable
      e.week = moment(e.date.toISOString()).startOf('week').toDate();

      return e;
    }
  });

  //////////////////////////////////////////////////////////////////
  // Now that we have our data set ready we can create our scales //
  //////////////////////////////////////////////////////////////////

  // Generate color scale for the squares
  var colorScale = d3.scaleLinear()
    .domain([0,
        d3.max(daysLastYear, function(d) {
          return d.minutes;
        }) * 0.2,
        d3.max(daysLastYear, function(d) {
          return d.minutes;
        }) * 0.4,
        d3.max(daysLastYear, function(d) {
          return d.minutes;
        }) * 0.6,
        d3.max(daysLastYear, function(d) {
          return d.minutes;
        }) * 0.8,
        d3.max(daysLastYear, function(d) {
          return d.minutes;
        })])
    .range(colors);

  // Scale y axis by weeks of dataset
  var x = d3.scaleTime()
    .domain(d3.extent(daysLastYear, function(d) {
      return d.week;
    }))
    .range([0, (width - margin.left - margin.right)]);

  var xAxis = d3.axisTop(x)
    .ticks(d3.timeMonth.every(1));

  // Create day scale
  var y = d3.scaleBand()
    .domain(weekdays)
    .range([0, height - margin.top - margin.bottom]);


  ///////////////////////////////////
  // Now we can visualize our data //
  ///////////////////////////////////

  // Create heatmap
  var heatMap = visWrapper.selectAll('.day')
    .data(daysLastYear)
    .enter().append('rect')
    .attr('x', function(d) {
      return x(d.week);
    })
    .attr('y', function(d) {
      return y(d.dayString);
    })
    .attr('width', gridSize)
    .attr('height', gridSize)
    .attr('id', function(d) {
      return d.date.toString();
    })
    // .attr('stroke', '#ccc')
    .attr('fill', function(d) {
      return colorScale(d.minutes);
    })
    .on('mouseover', showLength)
    .on('mouseout', hideLength);

  // Add labels of weekday
  var weekdaysShort = [['Sunday', 'Sun'],
                       ['Monday', 'Mon'],
                       ['Tuesday', 'Tue'],
                       ['Wednesday', 'Wed'],
                       ['Thursday', 'Thu'],
                       ['Friday', 'Fri'],
                       ['Saturday', 'Sat']];


  var dayLabels = visWrapper.selectAll('.dayLabel')
    .data(weekdaysShort)
    .enter().append('text')
    .text(function(d) {
      if (d[1] == 'Mon' || d[1] == 'Wed' || d[1] == 'Fri') {
        return d[1];
      }
    })
    .attr('x', 0)
    .attr('y', function(d) {
      return y(d[0]) + 10;
    })
    .style('text-anchor', 'start')
    .attr('transform', 'translate(-28, -2)');

  // Add month labels
  visWrapper.append('g')
    .call(xAxis);

  //////////////////
  // Add Legend   //
  //////////////////
  var legend = svg.append('g')
    .attr('width', 150)
    .attr('height', 10)
    .attr('transform', 'translate(' + (width - 130) + ', ' + (height - 30) + ')');

  legend.selectAll('rect')
    .data(colors)
    .enter().append('rect')
    .attr('width', gridSize)
    .attr('height', gridSize)
    .attr('y', 0)
    .attr('x', function(d, i) {
      return i * 18;
    })
    .attr('fill', function(d) {
      return d;
    });

  legend.append('text')
    .text('Less')
    .attr('x', -25)
    .attr('y', 10);

  legend.append('text')
    .text('More')
    .attr('x', 92)
    .attr('y', 10);


  ///////////////////////////
  //  hours and minutes //
  ///////////////////////////

  var hours = svg.append('text')
    .text('')
    .attr('id', 'time')
    .attr('x', (width / 2))
    .attr('y', (height - 20));

  // Show how long I worked
  function showLength(d) {
    var calcHours = Math.trunc(d.minutes / 60);
    var minutes = d.minutes % 60;

    hours.text(calcHours + "h " + minutes + 'm');
  }

  // Hide minutes and hours
  function hideLength(d) {
    hours.text('');
  }
 });


 function type(d) {
  d.day = +d.day;
  d.date = parseDate(d.date);
  d.minutes = +d.minutes;
  return d;
 }


diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <title></title>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v4.min.js"></script>

  <style>
    html {
      font-size: 62.5%;
    }

    text {
        font-size: 0.8rem;
        fill: #aaa;
        font-weight: 400;
    }

    #time {
      font-size: 1.4rem;
      fill: black;
    }

    path, line {
      stroke: none;
    }

  </style>

 </head>
 <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
  <script src="app.js"></script>
 </body>
diff --git a/Selection_063.png b/Selection_063.png
diff --git a/Selection_064.png b/Selection_064.png
diff --git a/thumbnail-0.png b/thumbnail-0.png
diff --git a/thumbnail-1.png b/thumbnail-1.png
diff --git a/thumbnail-2.png b/thumbnail-2.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/work-per-day.csv b/work-per-day.csv
	var margin = {top: 40, bottom: 50, left: 70, right: 20};
	var width = 1000;
	var height = 220;
	var gridSize = 15;
	var colors = ['#eee', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];

	// List of all weekdays
	var weekdays = moment.weekdays();

	// We need to parse the time of our data
	var parseDate = d3.timeParse('%Y-%m-%d');

	// Generate svg
	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	// Create wrapper for heatmap
	var visWrapper = svg.append('g')
	.attr('width', width - margin.left - margin.right)
	.attr('height', height - margin.top - margin.bottom)
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	// Get data from csv file
	d3.csv('work-per-day.csv', type, function(error, days) {
	// Throw error if data cannot be fetched
	if (error) throw error;

	// Sort data by date
	var sortedDays = days.sort(function(a, b) {
	return a.date - b.date;
	});

	// Copy days for loop
	// otherwise we run into a major bug as we
	// would change the days array within the
	// loop
	var daysCopy = sortedDays;

	// Generate all dates
	// I haven't worked on some days. Therefore
	// I have to include the missing values
	// afterwards
	for (let i = 0; i < (sortedDays.length - 1); i++) {

	var dayIncrement = i + 1;
	var currentDay = days[i].date;
	var nextDay = moment(currentDay).add(1, 'days');
	var nextDayString = nextDay.toDate();
	var nextDayInList = days[dayIncrement].date;

	// There is at least a day missing
	// We need to fill in the gaps
	if (nextDayInList.getDate() != nextDayString.getDate()) {

	// Loop over every day as long
	// the next day is missing in the dataset
	let missing = true;

	// Reinitialize missing days array
	// stores all dates where I did not
	// work
	var missingDays = [];

	while (missing) {
	// Add new object
	let fillObject = {day: nextDayString.getDate(),
	minutes: 0,
	date: nextDayString,
	month: moment.months()[nextDayString.getMonth()],
	year: nextDayString.getFullYear(),
	dayString: weekdays[nextDayString.getDay()]};

	// Add missing day to array
	missingDays.push(fillObject);

	// Increment current and next day
	nextDay = moment(nextDay).add(1, 'days');
	nextDayString = nextDay.toDate();

	// Break loop over next in list exists
	if (nextDayString.getDate() == nextDayInList.getDate()) {
	missing = false;
	}
	}

	// Merge both arrays
	daysCopy = daysCopy.concat(missingDays);
	}
	}

	// Sort final dataset
	var daysCopy = daysCopy.sort(function(a, b) {
	return a.date - b.date;
	});

	// Get only data of the last year
	var yearAgo = moment(daysCopy[daysCopy.length - 1].date).subtract(1, 'year').toDate();

	// Get all dates that are less than a year ago
	var daysLastYear = daysCopy.filter(function(e) {
	// Is date more recent than day one year ago?
	let dateLater = moment(e.date.toISOString()).isAfter(yearAgo.toISOString());

	// Day is more recent
	if (dateLater) {
	// Create week variable
	e.week = moment(e.date.toISOString()).startOf('week').toDate();

	return e;
	}
	});

	//////////////////////////////////////////////////////////////////
	// Now that we have our data set ready we can create our scales //
	//////////////////////////////////////////////////////////////////

	// Generate color scale for the squares
	var colorScale = d3.scaleLinear()
	.domain([0,
	d3.max(daysLastYear, function(d) {
	return d.minutes;
	}) * 0.2,
	d3.max(daysLastYear, function(d) {
	return d.minutes;
	}) * 0.4,
	d3.max(daysLastYear, function(d) {
	return d.minutes;
	}) * 0.6,
	d3.max(daysLastYear, function(d) {
	return d.minutes;
	}) * 0.8,
	d3.max(daysLastYear, function(d) {
	return d.minutes;
	})])
	.range(colors);

	// Scale y axis by weeks of dataset
	var x = d3.scaleTime()
	.domain(d3.extent(daysLastYear, function(d) {
	return d.week;
	}))
	.range([0, (width - margin.left - margin.right)]);

	var xAxis = d3.axisTop(x)
	.ticks(d3.timeMonth.every(1));

	// Create day scale
	var y = d3.scaleBand()
	.domain(weekdays)
	.range([0, height - margin.top - margin.bottom]);


	///////////////////////////////////
	// Now we can visualize our data //
	///////////////////////////////////

	// Create heatmap
	var heatMap = visWrapper.selectAll('.day')
	.data(daysLastYear)
	.enter().append('rect')
	.attr('x', function(d) {
	return x(d.week);
	})
	.attr('y', function(d) {
	return y(d.dayString);
	})
	.attr('width', gridSize)
	.attr('height', gridSize)
	.attr('id', function(d) {
	return d.date.toString();
	})
	// .attr('stroke', '#ccc')
	.attr('fill', function(d) {
	return colorScale(d.minutes);
	})
	.on('mouseover', showLength)
	.on('mouseout', hideLength);

	// Add labels of weekday
	var weekdaysShort = [['Sunday', 'Sun'],
	['Monday', 'Mon'],
	['Tuesday', 'Tue'],
	['Wednesday', 'Wed'],
	['Thursday', 'Thu'],
	['Friday', 'Fri'],
	['Saturday', 'Sat']];


	var dayLabels = visWrapper.selectAll('.dayLabel')
	.data(weekdaysShort)
	.enter().append('text')
	.text(function(d) {
	if (d[1] == 'Mon' \|\| d[1] == 'Wed' \|\| d[1] == 'Fri') {
	return d[1];
	}
	})
	.attr('x', 0)
	.attr('y', function(d) {
	return y(d[0]) + 10;
	})
	.style('text-anchor', 'start')
	.attr('transform', 'translate(-28, -2)');

	// Add month labels
	visWrapper.append('g')
	.call(xAxis);

	//////////////////
	// Add Legend //
	//////////////////
	var legend = svg.append('g')
	.attr('width', 150)
	.attr('height', 10)
	.attr('transform', 'translate(' + (width - 130) + ', ' + (height - 30) + ')');

	legend.selectAll('rect')
	.data(colors)
	.enter().append('rect')
	.attr('width', gridSize)
	.attr('height', gridSize)
	.attr('y', 0)
	.attr('x', function(d, i) {
	return i * 18;
	})
	.attr('fill', function(d) {
	return d;
	});

	legend.append('text')
	.text('Less')
	.attr('x', -25)
	.attr('y', 10);

	legend.append('text')
	.text('More')
	.attr('x', 92)
	.attr('y', 10);


	///////////////////////////
	// hours and minutes //
	///////////////////////////

	var hours = svg.append('text')
	.text('')
	.attr('id', 'time')
	.attr('x', (width / 2))
	.attr('y', (height - 20));

	// Show how long I worked
	function showLength(d) {
	var calcHours = Math.trunc(d.minutes / 60);
	var minutes = d.minutes % 60;

	hours.text(calcHours + "h " + minutes + 'm');
	}

	// Hide minutes and hours
	function hideLength(d) {
	hours.text('');
	}
	});


	function type(d) {
	d.day = +d.day;
	d.date = parseDate(d.date);
	d.minutes = +d.minutes;
	return d;
	}
	<!DOCTYPE html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v4.min.js"></script>

	<style>
	html {
	font-size: 62.5%;
	}

	text {
	font-size: 0.8rem;
	fill: #aaa;
	font-weight: 400;
	}

	#time {
	font-size: 1.4rem;
	fill: black;
	}

	path, line {
	stroke: none;
	}

	</style>

	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
	<script src="app.js"></script>
	</body>