28:null 29:["$","title",null,{"children":"Activity Calendar Heatmap | Kumar Chalasani | Observable"}] 2e:T627,styles = html``2f:T9c5,createelements = calendarHeatmap.createElements = function() { console.log("in createElements"); if (calendarHeatmap.container != null) { // Access container for calendar console.log("Found the container"); var container = document.getElementById(calendarHeatmap.container); if (!container || container.tagName != "DIV") { throw 'Element not found or not of type div'; } if (!container.classList.contains('calendar-heatmap')) { //If the element being passed doesn't have the right class set then set it. container.classList.add('calendar-heatmap'); } } else { // Create main html container for the calendar console.log("did not find the container"); const container = document.createElement('div'); container.className = 'calendar-heatmap'; document.body.appendChild(container); } // Create svg element let svg = d3.select('svg'); if (!svg) { svg = d3.select(container).append('svg') .attr('class', 'svg'); } else { calendarHeatmap.removeElements(); } // Create other svg elements calendarHeatmap.items = svg.append('g'); calendarHeatmap.labels = svg.append('g'); calendarHeatmap.buttons = svg.append('g'); // Add tooltip to the same element as main svg calendarHeatmap.tooltip = d3.select(container).append('div') .attr('class', 'heatmap-tooltip') .style('opacity', 0); // Calculate dimensions based on available width var calcDimensions = function() { var dayIndex = Math.round((moment() - moment().subtract(1, 'year').startOf('week')) / 86400000); var colIndex = Math.trunc(dayIndex / 7); var numWeeks = colIndex + 1; calendarHeatmap.settings.width = container.offsetWidth < 1000 ? 1000 : container.offsetWidth; calendarHeatmap.settings.item_size = ((calendarHeatmap.settings.width - calendarHeatmap.settings.label_padding) / numWeeks - calendarHeatmap.settings.gutter); calendarHeatmap.settings.height = calendarHeatmap.settings.label_padding + 7 * (calendarHeatmap.settings.item_size + calendarHeatmap.settings.gutter); svg.attr('width', calendarHeatmap.settings.width) .attr('height', calendarHeatmap.settings.height); if (!!calendarHeatmap.data && !!calendarHeatmap.data[0].summary) { calendarHeatmap.drawChart(); } }; calcDimensions(); window.onresize = function(event) { calcDimensions(); }; }30:T2567,drawmultiyearview = calendarHeatmap.drawGlobalOverview = function() { // Add current overview to the history if (calendarHeatmap.history[calendarHeatmap.history.length - 1] !== calendarHeatmap.overview) { calendarHeatmap.history.push(calendarHeatmap.overview); } // Define start and end of the dataset var start = moment(calendarHeatmap.data[0].date).startOf('year'); var end = moment(calendarHeatmap.data[calendarHeatmap.data.length - 1].date).endOf('year'); // Define array of years and total values var year_data = d3.timeYears(start, end).map(function(d) { var date = moment(d); return { 'date': date, 'total': calendarHeatmap.data.reduce(function(prev, current) { if (moment(current.date).year() === date.year()) { prev += current.total; } return prev; }, 0), 'summary': function() { var summary = calendarHeatmap.data.reduce(function(summary, d) { if (moment(d.date).year() === date.year()) { for (var i = 0; i < d.summary.length; i++) { if (!summary[d.summary[i].name]) { summary[d.summary[i].name] = { 'value': d.summary[i].value, }; } else { summary[d.summary[i].name].value += d.summary[i].value; } } } return summary; }, {}); var unsorted_summary = Object.keys(summary).map(function(key) { return { 'name': key, 'value': summary[key].value }; }); return unsorted_summary.sort(function(a, b) { return b.value - a.value; }); }(), }; }); // Calculate max value of all the years in the dataset var max_value = d3.max(year_data, function(d) { return d.total; }); // Define year labels and axis var year_labels = d3.timeYears(start, end).map(function(d) { return moment(d); }); var yearScale = d3.scaleBand() .rangeRound([0, calendarHeatmap.settings.width]) .padding([0.05]) .domain(year_labels.map(function(d) { return d.year(); })); // Add global data items to the overview calendarHeatmap.items.selectAll('.item-block-year').remove(); var item_block = calendarHeatmap.items.selectAll('.item-block-year') .data(year_data) .enter() .append('rect') .attr('class', 'item item-block-year') .attr('width', function() { return (calendarHeatmap.settings.width - calendarHeatmap.settings.label_padding) / year_labels.length - calendarHeatmap.settings.gutter * 5; }) .attr('height', function() { return calendarHeatmap.settings.height - calendarHeatmap.settings.label_padding; }) .attr('transform', function(d) { return 'translate(' + yearScale(d.date.year()) + ',' + calendarHeatmap.settings.tooltip_padding * 2 + ')'; }) .attr('fill', function(d) { var color = d3.scaleLinear() .range(['#ffffff', calendarHeatmap.color || '#ff4500']) .domain([-0.15 * max_value, max_value]); return color(d.total) || '#ff4500'; }) .on('click', function(d) { if (calendarHeatmap.in_transition) { return; } // Set in_transition flag calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all global overview related items and labels calendarHeatmap.removeGlobalOverview(); // Redraw the chart calendarHeatmap.overview = 'year'; calendarHeatmap.drawChart(); }) .style('opacity', 0) .on('mouseover', function(d) { if (calendarHeatmap.in_transition) { return; } // Construct tooltip var tooltip_html = ''; tooltip_html += '

Total time tracked:'; var sec = parseInt(d.total, 10); var days = Math.floor(sec / 86400); if (days > 0) { tooltip_html += '' + (days === 1 ? '1 day' : days + ' days') + '

'; } var hours = Math.floor((sec - (days * 86400)) / 3600); if (hours > 0) { if (days > 0) { tooltip_html += '

' + (hours === 1 ? '1 hour' : hours + ' hours') + '

'; } else { tooltip_html += '' + (hours === 1 ? '1 hour' : hours + ' hours') + ''; } } var minutes = Math.floor((sec - (days * 86400) - (hours * 3600)) / 60); if (minutes > 0) { if (days > 0 || hours > 0) { tooltip_html += '

' + (minutes === 1 ? '1 minute' : minutes + ' minutes') + '

'; } else { tooltip_html += '' + (minutes === 1 ? '1 minute' : minutes + ' minutes') + ''; } } tooltip_html += '
'; // Add summary to the tooltip if (d.summary.length <= 5) { for (var i = 0; i < d.summary.length; i++) { tooltip_html += '

' + d.summary[i].name + ''; tooltip_html += '' + calendarHeatmap.formatTime(d.summary[i].value) + '

'; }; } else { for (var i = 0; i < 5; i++) { tooltip_html += '

' + d.summary[i].name + ''; tooltip_html += '' + calendarHeatmap.formatTime(d.summary[i].value) + '

'; }; tooltip_html += '
'; var other_projects_sum = 0; for (var i = 5; i < d.summary.length; i++) { other_projects_sum = +d.summary[i].value; }; tooltip_html += '

Other:'; tooltip_html += '' + calendarHeatmap.formatTime(other_projects_sum) + '

'; } // Calculate tooltip position var x = yearScale(d.date.year()) + calendarHeatmap.settings.tooltip_padding * 2; while (calendarHeatmap.settings.width - x < (calendarHeatmap.settings.tooltip_width + calendarHeatmap.settings.tooltip_padding * 5)) { x -= 10; } var y = this.getBoundingClientRect().top + calendarHeatmap.settings.tooltip_padding; // Show tooltip calendarHeatmap.tooltip.html(tooltip_html) .style('left', x + 'px') .style('top', y + 'px') .transition() .duration(calendarHeatmap.settings.transition_duration / 2) .ease(d3.easeLinear) .style('opacity', 1); }) .on('mouseout', function() { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.hideTooltip(); }) .transition() .delay(function(d, i) { return calendarHeatmap.settings.transition_duration * (i + 1) / 10; }) .duration(function() { return calendarHeatmap.settings.transition_duration; }) .ease(d3.easeLinear) .style('opacity', 1) .call(function(transition, callback) { if (transition.empty()) { callback(); } var n = 0; transition .each(function() {++n; }) .on('end', function() { if (!--n) { callback.apply(this, arguments); } }); }, function() { calendarHeatmap.in_transition = false; }); // Add year labels calendarHeatmap.labels.selectAll('.label-year').remove(); calendarHeatmap.labels.selectAll('.label-year') .data(year_labels) .enter() .append('text') .attr('class', 'label label-year') .attr('font-size', function() { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function(d) { return d.year(); }) .attr('x', function(d) { return yearScale(d.year()); }) .attr('y', calendarHeatmap.settings.label_padding / 2) .on('mouseenter', function(year_label) { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.items.selectAll('.item-block-year') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .style('opacity', function(d) { return (moment(d.date).year() === year_label.year()) ? 1 : 0.1; }); }) .on('mouseout', function() { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.items.selectAll('.item-block-year') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }) .on('click', function(d) { if (calendarHeatmap.in_transition) { return; } // Set in_transition flag calendarHeatmap.in_transition = true; // Set selected year to the one clicked on calendarHeatmap.selected = { date: d }; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all global overview related items and labels calendarHeatmap.removeGlobalOverview(); // Redraw the chart calendarHeatmap.overview = 'year'; calendarHeatmap.drawChart(); }); calendarHeatmap.hideBackButton(); }31:T3269,drawyearview = calendarHeatmap.drawYearOverview = function () { // Add current overview to the history if (calendarHeatmap.history[calendarHeatmap.history.length - 1] !== calendarHeatmap.overview) { calendarHeatmap.history.push(calendarHeatmap.overview); } // Define start and end date of the selected year var start_of_year = moment(calendarHeatmap.selected.date).startOf('year'); var end_of_year = moment(calendarHeatmap.selected.date).endOf('year'); // Filter data down to the selected year var year_data = calendarHeatmap.data.filter(function(d) { return start_of_year <= moment(d.date) && moment(d.date) < end_of_year; }); // Calculate max value of the year data var max_value = d3.max(year_data, function(d) { return d.total; }); var color = d3.scaleLinear() .range(['#fdae6b', calendarHeatmap.settings.futureColor]) .domain([-0.05 * max_value, max_value]); var colorPast = d3.scaleLinear() .range(['#a1d99b', calendarHeatmap.settings.pastColor]) .domain([-0.05 * max_value, max_value]); var colorToday = d3.scaleLinear() .range(['#efedf5', calendarHeatmap.settings.todayColor]) .domain([-0.05 * max_value, max_value]); var calcItemX = function(d) { var date = moment(d.date); var dayIndex = Math.round((date - moment(start_of_year).startOf('week')) / 86400000); var colIndex = Math.trunc(dayIndex / 7); return colIndex * (calendarHeatmap.settings.item_size + calendarHeatmap.settings.gutter) + calendarHeatmap.settings.label_padding; }; var calcItemY = function(d) { return calendarHeatmap.settings.label_padding + moment(d.date).weekday() * (calendarHeatmap.settings.item_size + calendarHeatmap.settings.gutter); }; var calcItemSize = function(d) { if (max_value <= 0) { return calendarHeatmap.settings.item_size; } //return calendarHeatmap.settings.item_size * 0.75 + (calendarHeatmap.settings.item_size * d.total / max_value) * 0.25; return calendarHeatmap.settings.item_size * 0.95; }; calendarHeatmap.items.selectAll('.item-circle').remove(); calendarHeatmap.items.selectAll('.item-circle') .data(year_data) .enter() .append('rect') .attr('class', 'item item-circle') .style('opacity', 0) .attr('x', function(d) { return calcItemX(d) + (calendarHeatmap.settings.item_size - calcItemSize(d)) / 2; }) .attr('y', function(d) { return calcItemY(d) + (calendarHeatmap.settings.item_size - calcItemSize(d)) / 2; }) /* .attr('rx', function(d) { return calcItemSize(d); }) .attr('ry', function(d) { return calcItemSize(d); }) */ .attr('width', function(d) { return calcItemSize(d); }) .attr('height', function(d) { return calcItemSize(d); }) .attr('stroke', function(d) { if (moment().diff(d.date, 'days') === 0) { return '#232323'; } else { return 'transparent'; } }) .attr('fill', function(d) { //return (d.total > 0) ? color(d.total) : 'transparent'; var clr='#996633'; if (d.total <= 0) { } else { if (moment().diff(d.date, 'days') === 0) { console.log("here today, gone tomorrow!"); clr = colorToday(d.total); } else { var dat = moment(d.date).valueOf(); if (dat < now) { clr = colorPast(d.total); } else { clr = color(d.total); } } } return clr; }) .on('click', function(d) { if (calendarHeatmap.in_transition) { return; } // Don't transition if there is no data to show if (d.total === 0) { return; } calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeYearOverview(); // Redraw the chart calendarHeatmap.overview = 'day'; calendarHeatmap.drawChart(); }) .on('mouseover', function(d) { if (calendarHeatmap.in_transition) { return; } // Pulsating animation var circle = d3.select(this); (function repeat() { circle = circle.transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .attr('x', function(d) { return calcItemX(d) - (calendarHeatmap.settings.item_size * 1.1 - calendarHeatmap.settings.item_size) / 2; }) .attr('y', function(d) { return calcItemY(d) - (calendarHeatmap.settings.item_size * 1.1 - calendarHeatmap.settings.item_size) / 2; }) .attr('width', calendarHeatmap.settings.item_size * 1.1) .attr('height', calendarHeatmap.settings.item_size * 1.1) .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .attr('x', function(d) { return calcItemX(d) + (calendarHeatmap.settings.item_size - calcItemSize(d)) / 2; }) .attr('y', function(d) { return calcItemY(d) + (calendarHeatmap.settings.item_size - calcItemSize(d)) / 2; }) .attr('width', function(d) { return calcItemSize(d); }) .attr('height', function(d) { return calcItemSize(d); }) .on('end', repeat); })(); // Construct tooltip var tooltip_html = ''; tooltip_html += ''; tooltip_html += '

on ' + moment(d.date).format('dddd, MMM Do YYYY') + '

'; // Add summary to the tooltip for (var i = 0; i < d.summary.length; i++) { tooltip_html += '

' + d.summary[i].name + ''; tooltip_html += '' + calendarHeatmap.formatTime(d.summary[i].value) + '

'; }; // Calculate tooltip position var x = calcItemX(d) + calendarHeatmap.settings.item_size; if (calendarHeatmap.settings.width - x < (calendarHeatmap.settings.tooltip_width + calendarHeatmap.settings.tooltip_padding * 3)) { x -= calendarHeatmap.settings.tooltip_width + calendarHeatmap.settings.tooltip_padding * 2; } var y = this.getBoundingClientRect().top + calendarHeatmap.settings.item_size; // Show tooltip calendarHeatmap.tooltip.html(tooltip_html) .style('left', x + 'px') .style('top', y + 'px') .transition() .duration(calendarHeatmap.settings.transition_duration / 2) .ease(d3.easeLinear) .style('opacity', 1); }) .on('mouseout', function() { if (calendarHeatmap.in_transition) { return; } // Set circle radius back to what it's supposed to be d3.select(this).transition() .duration(calendarHeatmap.settings.transition_duration / 2) .ease(d3.easeLinear) .attr('x', function(d) { return calcItemX(d) + (calendarHeatmap.settings.item_size - calcItemSize(d)) / 2; }) .attr('y', function(d) { return calcItemY(d) + (calendarHeatmap.settings.item_size - calcItemSize(d)) / 2; }) .attr('width', function(d) { return calcItemSize(d); }) .attr('height', function(d) { return calcItemSize(d); }); // Hide tooltip calendarHeatmap.hideTooltip(); }) .transition() .delay(function() { return (Math.cos(Math.PI * Math.random()) + 1) * calendarHeatmap.settings.transition_duration; }) .duration(function() { return calendarHeatmap.settings.transition_duration; }) .ease(d3.easeLinear) .style('opacity', 1) .call(function(transition, callback) { if (transition.empty()) { callback(); } var n = 0; transition .each(function() {++n; }) .on('end', function() { if (!--n) { callback.apply(this, arguments); } }); }, function() { calendarHeatmap.in_transition = false; }); // Add month labels var month_labels = d3.timeMonths(start_of_year, end_of_year); var monthScale = d3.scaleLinear() .range([0, calendarHeatmap.settings.width]) .domain([0, month_labels.length]); calendarHeatmap.labels.selectAll('.label-month').remove(); calendarHeatmap.labels.selectAll('.label-month') .data(month_labels) .enter() .append('text') .attr('class', 'label label-month') .attr('font-size', function() { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function(d) { return d.toLocaleDateString('en-us', { month: 'short' }); }) .attr('x', function(d, i) { return monthScale(i) + (monthScale(i) - monthScale(i - 1)) / 2; }) .attr('y', calendarHeatmap.settings.label_padding / 2) .on('mouseenter', function(d) { if (calendarHeatmap.in_transition) { return; } var selected_month = moment(d); calendarHeatmap.items.selectAll('.item-circle') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .style('opacity', function(d) { return moment(d.date).isSame(selected_month, 'month') ? 1 : 0.1; }); }) .on('mouseout', function() { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.items.selectAll('.item-circle') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }) .on('click', function(d) { if (calendarHeatmap.in_transition) { return; } // Check month data var month_data = calendarHeatmap.data.filter(function(e) { return moment(d).startOf('month') <= moment(e.date) && moment(e.date) < moment(d).endOf('month'); }); // Don't transition if there is no data to show if (!month_data.length) { return; } // Set selected month to the one clicked on calendarHeatmap.selected = { date: d }; calendarHeatmap.in_transition = true; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeYearOverview(); // Redraw the chart calendarHeatmap.overview = 'month'; calendarHeatmap.drawChart(); }); // Add day labels var day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')); var dayScale = d3.scaleBand() .rangeRound([calendarHeatmap.settings.label_padding, calendarHeatmap.settings.height]) .domain(day_labels.map(function(d) { return moment(d).weekday(); })); calendarHeatmap.labels.selectAll('.label-day').remove(); calendarHeatmap.labels.selectAll('.label-day') .data(day_labels) .enter() .append('text') .attr('class', 'label label-day') .attr('x', calendarHeatmap.settings.label_padding / 3) .attr('y', function(d, i) { return dayScale(i) + dayScale.bandwidth() / 1.75; }) .style('text-anchor', 'left') .attr('font-size', function() { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function(d) { return moment(d).format('dddd')[0]; }) .on('mouseenter', function(d) { if (calendarHeatmap.in_transition) { return; } var selected_day = moment(d); calendarHeatmap.items.selectAll('.item-circle') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .style('opacity', function(d) { return (moment(d.date).day() === selected_day.day()) ? 1 : 0.1; }); }) .on('mouseout', function() { if (calendarHeatmap.in_transition) { return; } calendarHeatmap.items.selectAll('.item-circle') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeLinear) .style('opacity', 1); }); // Add button to switch back to previous overview calendarHeatmap.drawButton(); }32:T2c20,drawmonthview = calendarHeatmap.drawMonthOverview = function () { // Add current overview to the history if ( calendarHeatmap.history[calendarHeatmap.history.length-1] !== calendarHeatmap.overview ) { calendarHeatmap.history.push(calendarHeatmap.overview); } // Define beginning and end of the month var start_of_month = moment(calendarHeatmap.selected.date).startOf('month'); var end_of_month = moment(calendarHeatmap.selected.date).endOf('month'); // Filter data down to the selected month var month_data = calendarHeatmap.data.filter(function (d) { return start_of_month <= moment(d.date) && moment(d.date) < end_of_month; }); var max_value = d3.max(month_data, function (d) { return d3.max(d.summary, function (d) { return d.value; }); }); // Define day labels and axis var day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')); var dayScale = d3.scaleBand() .rangeRound([calendarHeatmap.settings.label_padding, calendarHeatmap.settings.height]) .domain(day_labels.map(function (d) { return moment(d).weekday(); })); // Define week labels and axis var week_labels = [start_of_month.clone()]; while ( start_of_month.week() !== end_of_month.week() ) { week_labels.push(start_of_month.add(1, 'week').clone()); } var weekScale = d3.scaleBand() .rangeRound([calendarHeatmap.settings.label_padding, calendarHeatmap.settings.width], 0.05) .domain(week_labels.map(function(weekday) { return weekday.week(); })); // Add month data items to the overview calendarHeatmap.items.selectAll('.item-block-month').remove(); var item_block = calendarHeatmap.items.selectAll('.item-block-month') .data(month_data) .enter() .append('g') .attr('class', 'item item-block-month') .attr('width', function () { return (calendarHeatmap.settings.width - calendarHeatmap.settings.label_padding) / week_labels.length - calendarHeatmap.settings.gutter * 5; }) .attr('height', function () { return Math.min(dayScale.bandwidth(), calendarHeatmap.settings.max_block_height); }) .attr('transform', function (d) { return 'translate(' + weekScale(moment(d.date).week()) + ',' + ((dayScale(moment(d.date).weekday()) + dayScale.bandwidth() / 1.75) - 15)+ ')'; }) .attr('total', function (d) { return d.total; }) .attr('date', function (d) { return d.date; }) .attr('offset', 0) .on('click', function (d) { if ( calendarHeatmap.in_transition ) { return; } // Don't transition if there is no data to show if ( d.total === 0 ) { return; } calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all month overview related items and labels calendarHeatmap.removeMonthOverview(); // Redraw the chart calendarHeatmap.overview = 'day'; calendarHeatmap.drawChart(); }); var item_width = (calendarHeatmap.settings.width - calendarHeatmap.settings.label_padding) / week_labels.length - calendarHeatmap.settings.gutter * 5; var itemScale = d3.scaleLinear() .rangeRound([0, item_width]); item_block.selectAll('.item-block-rect') .data(function (d) { return d.summary; }) .enter() .append('rect') .attr('class', 'item item-block-rect') .attr('x', function (d) { var total = parseInt(d3.select(this.parentNode).attr('total')); var offset = parseInt(d3.select(this.parentNode).attr('offset')); itemScale.domain([0, total]); d3.select(this.parentNode).attr('offset', offset + itemScale(d.value)); return offset; }) .attr('width', function (d) { var total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); return Math.max((itemScale(d.value) - calendarHeatmap.settings.item_gutter), 1) }) .attr('height', function () { return Math.min(dayScale.bandwidth(), calendarHeatmap.settings.max_block_height); }) .attr('fill', function (d) { console.log(d); var clr = 'transparent'; var colorFuture = d3.scaleLinear() .range(['#ffffff', calendarHeatmap.settings.futureColor]) .domain([-0.1 * max_value, max_value]); var colorPast = d3.scaleLinear() .range(['#ffffff', calendarHeatmap.settings.pastColor]) .domain([-0.1 * max_value, max_value]); var colorToday = d3.scaleLinear() .range(['#ffffff', calendarHeatmap.settings.todayColor]) .domain([-0.1 * max_value, max_value]); var dat = moment((d3.select(this.parentNode).attr('date'))).valueOf(); //var dat = moment(d.date).valueOf(); console.log('DAT:'+dat); console.log('NOW:'+now); if (moment().diff(dat, 'days') === 0) { clr = colorToday(d.value); } else { if (dat < now) { clr = colorPast(d.value); } else if (dat > now ) { clr = colorFuture(d.value); } } return clr; }) .style('opacity', 0) .on('mouseover', function(d) { if ( calendarHeatmap.in_transition ) { return; } // Get date from the parent node var date = new Date(d3.select(this.parentNode).attr('date')); // Construct tooltip var tooltip_html = ''; tooltip_html += '
'; tooltip_html += '

' + (d.value ? calendarHeatmap.formatTime(d.value) : 'No time') + ' tracked

'; tooltip_html += '

on ' + moment(date).format('dddd, MMM Do YYYY') + '

'; // Calculate tooltip position var x = weekScale(moment(date).week()) + calendarHeatmap.settings.tooltip_padding; while ( calendarHeatmap.settings.width - x < (calendarHeatmap.settings.tooltip_width + calendarHeatmap.settings.tooltip_padding * 3) ) { x -= 10; } var y = dayScale(moment(date).weekday()) + calendarHeatmap.settings.tooltip_padding * 2; // Show tooltip calendarHeatmap.tooltip.html(tooltip_html) .style('left', x + 'px') .style('top', y + 'px') .transition() .duration(calendarHeatmap.settings.transition_duration / 2) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.hideTooltip(); }) .transition() .delay(function () { return (Math.cos(Math.PI * Math.random()) + 1) * calendarHeatmap.settings.transition_duration; }) .duration(function () { return calendarHeatmap.settings.transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 1) .call(function (transition, callback) { if ( transition.empty() ) { callback(); } var n = 0; transition .each(function() { ++n; }) .on('end', function() { if ( !--n ) { callback.apply(this, arguments); } }); }, function() { calendarHeatmap.in_transition = false; }); // Add week labels calendarHeatmap.labels.selectAll('.label-week').remove(); calendarHeatmap.labels.selectAll('.label-week') .data(week_labels) .enter() .append('text') .attr('class', 'label label-week') .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function (d) { return 'Week ' + d.week(); }) .attr('x', function (d) { return weekScale(d.week()); }) .attr('y', calendarHeatmap.settings.label_padding / 2) .on('mouseenter', function (weekday) { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block-month') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', function (d) { return ( moment(d.date).week() === weekday.week() ) ? 1 : 0.1; }); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block-month') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('click', function (d) { if ( calendarHeatmap.in_transition ) { return; } // Check week data var week_data = calendarHeatmap.data.filter(function (e) { return d.startOf('week') <= moment(e.date) && moment(e.date) < d.endOf('week'); }); // Don't transition if there is no data to show if ( !week_data.length ) { return; } calendarHeatmap.in_transition = true; // Set selected month to the one clicked on calendarHeatmap.selected = { date: d }; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all year overview related items and labels calendarHeatmap.removeMonthOverview(); // Redraw the chart calendarHeatmap.overview = 'week'; calendarHeatmap.drawChart(); }); // Add day labels calendarHeatmap.labels.selectAll('.label-day').remove(); calendarHeatmap.labels.selectAll('.label-day') .data(day_labels) .enter() .append('text') .attr('class', 'label label-day') .attr('x', calendarHeatmap.settings.label_padding / 3) .attr('y', function (d, i) { return dayScale(i) + dayScale.bandwidth() / 1.75; }) .style('text-anchor', 'left') .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function (d) { return moment(d).format('dddd')[0]; }) .on('mouseenter', function (d) { if ( calendarHeatmap.in_transition ) { return; } var selected_day = moment(d); calendarHeatmap.items.selectAll('.item-block-month') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', function (d) { return (moment(d.date).day() === selected_day.day()) ? 1 : 0.1; }); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block-month') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }); // Add button to switch back to year overview calendarHeatmap.drawButton(); }33:T1ecd,drawdayview = calendarHeatmap.drawDayOverview = function() { // Add current overview to the history if ( calendarHeatmap.history[calendarHeatmap.history.length-1] !== calendarHeatmap.overview ) { calendarHeatmap.history.push(calendarHeatmap.overview); } // Initialize selected date to today if it was not set if ( !Object.keys(calendarHeatmap.selected).length ) { calendarHeatmap.selected = calendarHeatmap.data[calendarHeatmap.data.length - 1]; } var project_labels = calendarHeatmap.selected.summary.map(function (project) { return project.name; }); var projectScale = d3.scaleBand() .rangeRound([calendarHeatmap.settings.label_padding, calendarHeatmap.settings.height]) .domain(project_labels); var itemScale = d3.scaleTime() .range([calendarHeatmap.settings.label_padding*2, calendarHeatmap.settings.width]) .domain([moment(calendarHeatmap.selected.date).startOf('day'), moment(calendarHeatmap.selected.date).endOf('day')]); calendarHeatmap.items.selectAll('.item-block').remove(); calendarHeatmap.items.selectAll('.item-block') .data(calendarHeatmap.selected.details) .enter() .append('rect') .attr('class', 'item item-block') .attr('x', function (d) { return itemScale(moment(d.date)); }) .attr('y', function (d) { return (projectScale(d.name) + projectScale.bandwidth() / 2) - 15; }) .attr('width', function (d) { var end = itemScale(d3.timeSecond.offset(moment(d.date), d.value)); return Math.max((end - itemScale(moment(d.date))), 1); }) .attr('height', function () { return Math.min(projectScale.bandwidth(), calendarHeatmap.settings.max_block_height); }) .attr('fill', function () { return calendarHeatmap.color || '#ff4500'; }) .style('opacity', 0) .on('mouseover', function(d) { if ( calendarHeatmap.in_transition ) { return; } // Construct tooltip var tooltip_html = ''; tooltip_html += '

' + d.name + '

'; tooltip_html += '

' + (d.value ? calendarHeatmap.formatTime(d.value) : 'No time') + ' tracked

'; tooltip_html += '

on ' + moment(d.date).format('dddd, MMM Do YYYY HH:mm') + '

'; // Calculate tooltip position var x = d.value * 100 / (60 * 60 * 24) + itemScale(moment(d.date)); while ( calendarHeatmap.settings.width - x < (calendarHeatmap.settings.tooltip_width + calendarHeatmap.settings.tooltip_padding * 3) ) { x -= 10; } var y = projectScale(d.name) + projectScale.bandwidth() / 2 + calendarHeatmap.settings.tooltip_padding / 2; // Show tooltip calendarHeatmap.tooltip.html(tooltip_html) .style('left', x + 'px') .style('top', y + 'px') .transition() .duration(calendarHeatmap.settings.transition_duration / 2) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.hideTooltip(); }) .on('click', function (d) { if ( !!calendarHeatmap.handler && typeof calendarHeatmap.handler == 'function' ) { calendarHeatmap.handler(d); } }) .transition() .delay(function () { return (Math.cos(Math.PI * Math.random()) + 1) * calendarHeatmap.settings.transition_duration; }) .duration(function () { return calendarHeatmap.settings.transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 0.5) .call(function (transition, callback) { if ( transition.empty() ) { callback(); } var n = 0; transition .each(function() { ++n; }) .on('end', function() { if ( !--n ) { callback.apply(this, arguments); } }); }, function() { calendarHeatmap.in_transition = false; }); // Add time labels var timeLabels = d3.timeHours( moment(calendarHeatmap.selected.date).startOf('day'), moment(calendarHeatmap.selected.date).endOf('day') ); var timeScale = d3.scaleTime() .range([calendarHeatmap.settings.label_padding*2, calendarHeatmap.settings.width]) .domain([0, timeLabels.length]); calendarHeatmap.labels.selectAll('.label-time').remove(); calendarHeatmap.labels.selectAll('.label-time') .data(timeLabels) .enter() .append('text') .attr('class', 'label label-time') .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function (d) { return moment(d).format('HH:mm'); }) .attr('x', function (d, i) { return timeScale(i); }) .attr('y', calendarHeatmap.settings.label_padding / 2) .on('mouseenter', function (d) { if ( calendarHeatmap.in_transition ) { return; } var selected = itemScale(moment(d)); calendarHeatmap.items.selectAll('.item-block') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', function (d) { var start = itemScale(moment(d.date)); var end = itemScale(moment(d.date).add(d.value, 'seconds')); return ( selected >= start && selected <= end ) ? 1 : 0.1; }); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 0.5); }); // Add project labels calendarHeatmap.labels.selectAll('.label-project').remove(); calendarHeatmap.labels.selectAll('.label-project') .data(project_labels) .enter() .append('text') .attr('class', 'label label-project') .attr('x', calendarHeatmap.settings.gutter) .attr('y', function (d) { return projectScale(d) + projectScale.bandwidth() / 2; }) .attr('min-height', function () { return projectScale.bandwidth(); }) .style('text-anchor', 'left') .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function (d) { return d; }) .each(function () { var obj = d3.select(this), text_length = obj.node().getComputedTextLength(), text = obj.text(); while (text_length > (calendarHeatmap.settings.label_padding * 1.5) && text.length > 0) { text = text.slice(0, -1); obj.text(text + '...'); text_length = obj.node().getComputedTextLength(); } }) .on('mouseenter', function (project) { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', function (d) { return (d.name === project) ? 1 : 0.1; }); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 0.5); }); // Add button to switch back to year overview calendarHeatmap.drawButton(); }34:T74c,drawbutton = calendarHeatmap.drawButton = function () { calendarHeatmap.buttons.selectAll('.button').remove(); var button = calendarHeatmap.buttons.append('g') .attr('class', 'button button-back') .style('opacity', 0) .on('click', function () { if ( calendarHeatmap.in_transition ) { return; } // Set transition boolean calendarHeatmap.in_transition = true; // Clean the canvas from whichever overview type was on if (calendarHeatmap.overview === 'year') { calendarHeatmap.removeYearOverview(); } else if ( calendarHeatmap.overview === 'month' ) { calendarHeatmap.removeMonthOverview(); } else if ( calendarHeatmap.overview === 'week' ) { calendarHeatmap.removeWeekOverview(); } else if ( calendarHeatmap.overview === 'day' ) { calendarHeatmap.removeDayOverview(); } // Redraw the chart calendarHeatmap.history.pop(); calendarHeatmap.overview = calendarHeatmap.history.pop(); calendarHeatmap.drawChart(); }); button.append('circle') .attr('cx', calendarHeatmap.settings.label_padding / 2.25) .attr('cy', calendarHeatmap.settings.label_padding / 2.5) .attr('r', calendarHeatmap.settings.item_size / 1.5); button.append('text') .attr('x', calendarHeatmap.settings.label_padding / 2.25) .attr('y', calendarHeatmap.settings.label_padding / 2.75) .attr('dy', function () { return Math.floor(calendarHeatmap.settings.width / 100) / 2.5; }) .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .html('←'); button.transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 1.0); }35:T2581,drawweekview = calendarHeatmap.drawWeekOverview = function() { // Add current overview to the history if ( calendarHeatmap.history[calendarHeatmap.history.length-1] !== calendarHeatmap.overview ) { calendarHeatmap.history.push(calendarHeatmap.overview); } // Define beginning and end of the week var start_of_week = moment(calendarHeatmap.selected.date).startOf('week'); var end_of_week = moment(calendarHeatmap.selected.date).endOf('week'); // Filter data down to the selected week var week_data = calendarHeatmap.data.filter(function (d) { return start_of_week <= moment(d.date) && moment(d.date) < end_of_week; }); var max_value = d3.max(week_data, function (d) { return d3.max(d.summary, function (d) { return d.value; }); }); // Define day labels and axis var day_labels = d3.timeDays(moment().startOf('week'), moment().endOf('week')); var dayScale = d3.scaleBand() .rangeRound([calendarHeatmap.settings.label_padding, calendarHeatmap.settings.height]) .domain(day_labels.map(function (d) { return moment(d).weekday(); })); // Define week labels and axis var week_labels = [start_of_week]; var weekScale = d3.scaleBand() .rangeRound([calendarHeatmap.settings.label_padding, calendarHeatmap.settings.width], 0.01) .domain(week_labels.map(function (weekday) { return weekday.week(); })); // Add week data items to the overview calendarHeatmap.items.selectAll('.item-block-week').remove(); var item_block = calendarHeatmap.items.selectAll('.item-block-week') .data(week_data) .enter() .append('g') .attr('class', 'item item-block-week') .attr('width', function () { return (calendarHeatmap.settings.width - calendarHeatmap.settings.label_padding) / week_labels.length - calendarHeatmap.settings.gutter * 5; }) .attr('height', function () { return Math.min(dayScale.bandwidth(), calendarHeatmap.settings.max_block_height); }) .attr('transform', function (d) { return 'translate(' + weekScale(moment(d.date).week()) + ',' + ((dayScale(moment(d.date).weekday()) + dayScale.bandwidth() / 1.75) - 15)+ ')'; }) .attr('total', function (d) { return d.total; }) .attr('date', function (d) { return d.date; }) .attr('offset', 0) .on('click', function (d) { if ( calendarHeatmap.in_transition ) { return; } // Don't transition if there is no data to show if ( d.total === 0 ) { return; } calendarHeatmap.in_transition = true; // Set selected date to the one clicked on calendarHeatmap.selected = d; // Hide tooltip calendarHeatmap.hideTooltip(); // Remove all week overview related items and labels calendarHeatmap.removeWeekOverview(); // Redraw the chart calendarHeatmap.overview = 'day'; calendarHeatmap.drawChart(); }); var item_width = (calendarHeatmap.settings.width - calendarHeatmap.settings.label_padding) / week_labels.length - calendarHeatmap.settings.gutter * 5; var itemScale = d3.scaleLinear() .rangeRound([0, item_width]); item_block.selectAll('.item-block-rect') .data(function (d) { return d.summary; }) .enter() .append('rect') .attr('class', 'item item-block-rect') .attr('x', function (d) { var total = parseInt(d3.select(this.parentNode).attr('total')); var offset = parseInt(d3.select(this.parentNode).attr('offset')); itemScale.domain([0, total]); d3.select(this.parentNode).attr('offset', offset + itemScale(d.value)); return offset; }) .attr('width', function (d) { var total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); return Math.max((itemScale(d.value) - calendarHeatmap.settings.item_gutter), 1) }) .attr('height', function () { return Math.min(dayScale.bandwidth(), calendarHeatmap.settings.max_block_height); }) .attr('fill', function (d) { var color = d3.scaleLinear() .range(['#ffffff', calendarHeatmap.color || '#ff4500']) .domain([-0.15 * max_value, max_value]); return color(d.value) || '#ff4500'; }) .style('opacity', 0) .on('mouseover', function(d) { if ( calendarHeatmap.in_transition ) { return; } // Get date from the parent node var date = new Date(d3.select(this.parentNode).attr('date')); // Construct tooltip var tooltip_html = ''; tooltip_html += '
'; tooltip_html += '

' + (d.value ? calendarHeatmap.formatTime(d.value) : 'No time') + ' tracked

'; tooltip_html += '

on ' + moment(date).format('dddd, MMM Do YYYY') + '

'; // Calculate tooltip position var total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); var x = parseInt(d3.select(this).attr('x')) + itemScale(d.value) / 4 + calendarHeatmap.settings.tooltip_width / 4; while ( calendarHeatmap.settings.width - x < (calendarHeatmap.settings.tooltip_width + calendarHeatmap.settings.tooltip_padding * 3) ) { x -= 10; } var y = dayScale(moment(date).weekday()) + calendarHeatmap.settings.tooltip_padding * 1.5; // Show tooltip calendarHeatmap.tooltip.html(tooltip_html) .style('left', x + 'px') .style('top', y + 'px') .transition() .duration(calendarHeatmap.settings.transition_duration / 2) .ease(d3.easeBackIn) .style('opacity', 1); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.hideTooltip(); }) .transition() .delay(function () { return (Math.cos(Math.PI * Math.random()) + 1) * calendarHeatmap.settings.transition_duration; }) .duration(function () { return calendarHeatmap.settings.transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 1) .call(function (transition, callback) { if ( transition.empty() ) { callback(); } var n = 0; transition .each(function() { ++n; }) .on('end', function() { if ( !--n ) { callback.apply(this, arguments); } }); }, function() { calendarHeatmap.in_transition = false; }); // Add week labels calendarHeatmap.labels.selectAll('.label-week').remove(); calendarHeatmap.labels.selectAll('.label-week') .data(week_labels) .enter() .append('text') .attr('class', 'label label-week') .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function (d) { return 'Week ' + d.week(); }) .attr('x', function (d) { return weekScale(d.week()); }) .attr('y', calendarHeatmap.settings.label_padding / 2) .on('mouseenter', function (weekday) { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block-week') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', function (d) { return ( moment(d.date).week() === weekday.week() ) ? 1 : 0.1; }); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block-week') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }); // Add day labels calendarHeatmap.labels.selectAll('.label-day').remove(); calendarHeatmap.labels.selectAll('.label-day') .data(day_labels) .enter() .append('text') .attr('class', 'label label-day') .attr('x', calendarHeatmap.settings.label_padding / 3) .attr('y', function (d, i) { return dayScale(i) + dayScale.bandwidth() / 1.75; }) .style('text-anchor', 'left') .attr('font-size', function () { return Math.floor(calendarHeatmap.settings.label_padding / 3) + 'px'; }) .text(function (d) { return moment(d).format('dddd')[0]; }) .on('mouseenter', function (d) { if ( calendarHeatmap.in_transition ) { return; } var selected_day = moment(d); calendarHeatmap.items.selectAll('.item-block-week') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', function (d) { return (moment(d.date).day() === selected_day.day()) ? 1 : 0.1; }); }) .on('mouseout', function () { if ( calendarHeatmap.in_transition ) { return; } calendarHeatmap.items.selectAll('.item-block-week') .transition() .duration(calendarHeatmap.settings.transition_duration) .ease(d3.easeBackIn) .style('opacity', 1); }); // Add button to switch back to year overview calendarHeatmap.drawButton(); }36:T73d,launchWithData = function () { //initialize random data var now = moment().endOf('day').toDate(); var eoy = moment().endOf('year').toDate(); var max_date = moment().add(moment(eoy).diff(now, 'days'),'d').toDate(); var time_ago = moment().startOf('day').subtract(10, 'year').toDate(); var example_data = d3.timeDays(time_ago, max_date).map(function (dateElement, index) { return { date: dateElement, details: Array.apply(null, new Array(Math.floor(Math.random() * 15))).map(function(e, i, arr) { return { 'name': 'Tasks Due ' + Math.ceil(Math.random() * 10), 'date': function () { var projectDate = new Date(dateElement.getTime()); projectDate.setHours(Math.floor(Math.random() * 24)); projectDate.setMinutes(Math.floor(Math.random() * 60)); return projectDate; }(), 'value': 3600 * ((arr.length - i) / 5) + Math.floor(Math.random() * 3600) * Math.round(Math.random() * (index / 365)) } }), init: function () { this.total = this.details.reduce(function (prev, e) { return prev + e.value; }, 0); return this; } }.init(); }); // Set the div target id var div_id = 'calendar'; // Set custom color for the calendar heatmap var color = '#cd2327'; // Set overview type (choices are year, month and day) var overview = 'year'; // Handler function var print = function (val) { console.log(val); }; // Initialize calendar heatmap calendarHeatmap.data = example_data; calendarHeatmap.removeAllCharts; calendarHeatmap.init(example_data, div_id, color, overview, print); };37:[] 2c:{"id":"414e08c73882e793","slug":"calendar-heatmap-too","title":"Activity Calendar Heatmap","thumbnail":"24bb2b37eb427a73966553964911581b0cffcbfc530eae68cf8d928c0b95b172","access_level":"public","create_time":"$D2019-09-17T17:58:45.948Z","update_time":"$D2019-09-21T19:57:47.220Z","view_time":null,"first_public_time":"$D2019-09-17T18:01:53.601Z","has_unpublished_edits":null,"fork":{"id":"8f38fad702309834","slug":"calendar-heatmap-with-drilldown","title":"Calendar Heatmap Too","owner":{"id":"424e4f5140943bfa","login":"kchalas","name":"Kumar Chalasani"}},"stars":6,"starred":false,"owner":{"type":"team","id":"424e4f5140943bfa","login":"kchalas","name":"Kumar Chalasani","avatar_url":"https://avatars-next.observableusercontent.com/c0064868cde6d94348ace29de02d5055f1a22fd1f0c5eb2dcf9a761f9bc84092","tier":"starter_2024"},"version":1099,"publish_version":1099,"role":null,"authored":false,"authors":[{"type":"individual","id":"5904621908e2781e","login":"kchalas","name":"Kumar Chalasani","avatar_url":"https://avatars-next.observableusercontent.com/c0064868cde6d94348ace29de02d5055f1a22fd1f0c5eb2dcf9a761f9bc84092","tier":null}],"members":[{"type":"individual","id":"5904621908e2781e","login":"kchalas","name":"Kumar Chalasani","avatar_url":"https://avatars-next.observableusercontent.com/c0064868cde6d94348ace29de02d5055f1a22fd1f0c5eb2dcf9a761f9bc84092","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":37,"collection":null,"type":"notebook","body":{"title":"Activity Calendar Heatmap","cells":[{"id":562,"value":"md`# Activity Calendar Heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"viewof dataSelector = select([\"My Usage\", \" My Tasks\", \"Team Tasks\", \"Articles Read\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"cal = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"html`

This notebook is based on the d3js calendar heatmap here, by \"gleb\"

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"removelements = calendarHeatmap.removeElements = function() {\n let svg = d3.select('svg');\n svg.selectAll('*')\n .transition()\n .duration(300).remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"drawchart = calendarHeatmap.drawChart = function () {\n if (calendarHeatmap.overview === 'global') {\n calendarHeatmap.drawGlobalOverview();\n } else if (calendarHeatmap.overview === 'year') {\n calendarHeatmap.drawYearOverview();\n } else if (calendarHeatmap.overview === 'month') {\n calendarHeatmap.drawMonthOverview();\n } else if (calendarHeatmap.overview === 'week') {\n calendarHeatmap.drawWeekOverview();\n } else if (calendarHeatmap.overview === 'day') {\n calendarHeatmap.drawDayOverview();\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"parsedata = calendarHeatmap.parseData = function () {\n if ( !calendarHeatmap.data ) { return; }\n\n // Get daily summary if that was not provided\n if ( !calendarHeatmap.data[0].summary ) {\n calendarHeatmap.data.map(function (d) {\n var summary = d.details.reduce( function(uniques, project) {\n if ( !uniques[project.name] ) {\n uniques[project.name] = {\n 'value': project.value\n };\n } else {\n uniques[project.name].value += project.value;\n }\n return uniques;\n }, {});\n var unsorted_summary = Object.keys(summary).map(function (key) {\n return {\n 'name': key,\n 'value': summary[key].value\n };\n });\n d.summary = unsorted_summary.sort(function (a, b) {\n return b.value - a.value;\n });\n return d;\n });\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"remyearview = calendarHeatmap.removeYearOverview = function () {\n calendarHeatmap.items.selectAll('.item-circle')\n .transition()\n .duration(calendarHeatmap.settings.transition_duration)\n .ease(d3.easeBackOut)\n .style('opacity', 0)\n .remove();\n calendarHeatmap.labels.selectAll('.label-day').remove();\n calendarHeatmap.labels.selectAll('.label-month').remove();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"remmultiyearview = calendarHeatmap.removeGlobalOverview = function() {\n calendarHeatmap.items.selectAll('.item-block-year')\n .transition()\n .duration(calendarHeatmap.settings.transition_duration)\n .ease(d3.easeLinear)\n .style('opacity', 0)\n .remove();\n calendarHeatmap.labels.selectAll('.label-year').remove();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"remmonthview = calendarHeatmap.removeMonthOverview = function () {\n calendarHeatmap.items.selectAll('.item-block-month').selectAll('.item-block-rect')\n .transition()\n .duration(calendarHeatmap.settings.transition_duration)\n .ease(d3.easeBackOut)\n .style('opacity', 0)\n .attr('x', function (d, i) {\n return ( i % 2 === 0) ? - calendarHeatmap.settings.width/3 : calendarHeatmap.settings.width/3;\n })\n .remove();\n calendarHeatmap.labels.selectAll('.label-day').remove();\n calendarHeatmap.labels.selectAll('.label-week').remove();\n calendarHeatmap.hideBackButton();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"remweekview = calendarHeatmap.removeWeekOverview = function removeWeekOverview () {\n calendarHeatmap.items.selectAll('.item-block-week').selectAll('.item-block-rect')\n .transition()\n .duration(calendarHeatmap.settings.transition_duration)\n .ease(d3.easeBackOut)\n .style('opacity', 0)\n .attr('x', function (d, i) {\n return ( i % 2 === 0) ? - calendarHeatmap.settings.width/3 : calendarHeatmap.settings.width/3;\n })\n .remove();\n calendarHeatmap.labels.selectAll('.label-day').remove();\n calendarHeatmap.labels.selectAll('.label-week').remove();\n calendarHeatmap.hideBackButton();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"removedayview = calendarHeatmap.removeDayOverview = function () {\n calendarHeatmap.items.selectAll('.item-block')\n .transition()\n .duration(calendarHeatmap.settings.transition_duration)\n .ease(d3.easeBackOut)\n .style('opacity', 0)\n .attr('x', function (d, i) {\n return ( i % 2 === 0) ? - calendarHeatmap.settings.width/3 : calendarHeatmap.settings.width/3;\n })\n .remove();\n calendarHeatmap.labels.selectAll('.label-time').remove();\n calendarHeatmap.labels.selectAll('.label-project').remove();\n calendarHeatmap.hideBackButton();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"hidetooltip = calendarHeatmap.hideTooltip = function() {\n calendarHeatmap.tooltip.transition()\n .duration(calendarHeatmap.settings.transition_duration / 2)\n .ease(d3.easeBackOut)\n .style('opacity', 0);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"hidebackbtn = calendarHeatmap.hideBackButton = function hideBackButton() {\n calendarHeatmap.buttons.selectAll('.button')\n .transition()\n .duration(calendarHeatmap.settings.transition_duration)\n .ease(d3.easeLinear)\n .style('opacity', 0)\n .remove();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"timeformatter = calendarHeatmap.formatTime = function(seconds) {\n var sec_num = parseInt(seconds, 10);\n var hours = Math.floor(sec_num / 3600);\n var minutes = Math.floor((sec_num - (hours * 3600)) / 60);\n var time = '';\n if ( hours > 0 ) {\n time += hours === 1 ? '1 hour ' : hours + ' hours ';\n }\n if ( minutes > 0 ) {\n time += minutes === 1 ? '1 minute' : minutes + ' minutes';\n }\n if ( hours === 0 && minutes === 0 ) {\n time = seconds + ' seconds';\n }\n return time;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"launcher = launchWithData.call(dataSelector);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"\ninit = calendarHeatmap.init = function (data, container, color, overview, handler) {\n // Set calendar data\n calendarHeatmap.data = data;\n\n // Set calendar container\n calendarHeatmap.container = container;\n\n // Set calendar color\n calendarHeatmap.color = color || '#ff4500';\n\n // Initialize current overview type and history\n calendarHeatmap.overview = overview || 'global';\n calendarHeatmap.history = ['global'];\n calendarHeatmap.selected = {};\n\n // Set handler function\n calendarHeatmap.handler = handler;\n\n // No transition to start with\n calendarHeatmap.in_transition = false;\n\n // Create html elementsfor the calendar\n calendarHeatmap.createElements();\n\n // Parse data for summary details\n calendarHeatmap.parseData();\n\n // Draw the chart\n calendarHeatmap.drawChart();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"\n settings = calendarHeatmap.settings = ({\n gutter: 0.05,\n item_gutter: 0.15,\n width: 1000,\n height: 200,\n item_size: 10,\n label_padding: 40,\n max_block_height: 20,\n transition_duration: 500,\n tooltip_width: 250,\n tooltip_padding: 15,\n futureColor:'#8c2d04',\n pastColor:'#005a32',\n todayColor:'#3182bd'\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"calendarHeatmap=({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"moment = require(\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2d:"$2c:body"