30:T72e,GlobalView = { let start = d3.timeYear(DATA[0].date), end = d3.timeSecond.offset( d3.timeYear.ceil(new Date(DATA[DATA.length - 1].date)), -1 ), year_labels = d3.timeYears(start, end).map(x => x.getFullYear()), data = yearly_data(start, end), max_value = d3.max(data, d => d.total), yearScale = d3 .scaleBand() .rangeRound([margin.left, width - margin.right]) .padding(0.1) .domain(year_labels), yearsColorScale = d3 .scaleSequential(d3.interpolateViridis) .domain(fullDataExtent(data)); items.selectAll('.item-block-year').remove(); const item_block = items .selectAll('.item-block-year') .data(data, d => +d.date) .join('rect') .attr('class', 'item item-block-year') .attr('width', yearScale.bandwidth()) .attr('height', height - margin.top - margin.bottom) .attr('x', d => yearScale(d.date.getFullYear())) .attr('y', d => margin.top) .attr('fill', d => yearsColorScale(d.total)) .attr('opacity', 0) .on('click', d => yearView(d)) .on('mouseover', function(d) { let tooltipContent = transcribeTime(d.total); let x = yearScale(d.date.getFullYear()) + yearScale.bandwidth() / 2; const [, y] = d3.mouse(this); tooltip .html( `Total time tracked:

${tooltipContent}

` ) .style('left', `${x}px`) .style('top', `${y}px`) .transition() .duration(transition_duration / 2) .ease(d3.easeLinear) .style('opacity', 1); }) .on('mouseout', hideTooltip) .transition() .delay((d, i) => (transition_duration * (i + 1)) / 10) .duration(() => transition_duration) .ease(d3.easeLinear) .style('opacity', 1) .call(transitionCallback); svg.call(GlobalAxis, yearScale); }31:T425,// Define array of years and total values yearly_data = (start, end) => d3.timeYears(start, end).map(d => { const date = d; return { date: date, total: DATA.reduce( (prev, current) => current.date.getFullYear() === date.getFullYear() ? (prev += current.total) : prev, 0 ), summary: Object.entries( DATA.reduce((summary, d) => { if (d.date.getFullYear() === date.getFullYear()) { for (let 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; }, {}) ) .map(([key, { value }]) => ({ name: key, value: value })) .sort((a, b) => { return b.value - a.value; }) }; })32:T2967,yearView = d => { mutable selected = d; // const [start_of_year, end_of_year] = getStartEndTimes(d, 'timeYear'); // const year_data = getFilteredData(start_of_year, end_of_year); // // Calculate max value of the year data // const max_value = d3.max(year_data, d => { // return d.total; // }); // ////////////////////////////////// // let color = colorScale(max_value), // colorPast = colorPastScale(max_value), // colorToday = colorTodayScale(max_value); // ////////////////////////////////// // let calcItemX = d => getItemX(d, start_of_year); // const calcItemY = d => getItemY(d); // const calcItemSize = d => (max_value <= 0 ? item_size : item_size * 0.95); // items.selectAll('.item-task').remove(); // items // .selectAll('.item-task') // .data(year_data) // .enter() // .append('rect') // .attr('class', 'item item-task') // .style('opacity', 0) // .attr('x', d => calcItemX(d) + (item_size - calcItemSize(d)) / 2) // .attr('y', d => calcItemY(d) + (item_size - calcItemSize(d)) / 2) // .attr('rx', d => calcItemSize(d)) // .attr('ry', d => calcItemSize(d)) // .attr('width', d => calcItemSize(d)) // .attr('height', d => calcItemSize(d)) // .attr('stroke', d => // +d3.timeDay(new Date()) === +d.date ? '#232323' : 'transparent' // ) // .attr('fill', d => { // let clr = '#996633'; // if (d.total <= 0) { // } else { // if (+d3.timeDay(new Date()) === +d.date) { // clr = colorToday(d.total); // } else { // const dat = +d.date; // if (dat < now) { // clr = colorPast(d.total); // } else { // clr = color(d.total); // } // } // } // return clr; // }) // .on('click', 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.removeYearView(); // // Redraw the chart // calendarHeatmap.overview = 'day'; // drawChart(); // }) // .on('mouseover', function(d) { // if (calendarHeatmap.in_transition) { // return; // } // // Pulsating animation // let circle = d3.select(this); // (function repeat() { // circle = circle // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .attr('x', d => { // return calcItemX(d) - (item_size * 1.1 - item_size) / 2; // }) // .attr('y', d => { // return calcItemY(d) - (item_size * 1.1 - item_size) / 2; // }) // .attr('width', item_size * 1.1) // .attr('height', item_size * 1.1) // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .attr('x', d => { // return calcItemX(d) + (item_size - calcItemSize(d)) / 2; // }) // .attr('y', d => { // return calcItemY(d) + (item_size - calcItemSize(d)) / 2; // }) // .attr('width', d => { // return calcItemSize(d); // }) // .attr('height', d => { // return calcItemSize(d); // }) // .on('end', repeat); // })(); // // Construct tooltip // let tooltip_html = ` // //

on ${d3.timeFormat('%A, %b %d %Y')(d.date)}

//
// ${d.summary.map( // each => ` //

// // // ${each.name} // // // // ${calendarHeatmap.formatTime(each.value)} // //

` // )}`; // // Calculate tooltip position // let x = +d3.select(this).attr('x') + item_size; // if (width - x < tooltip_width + tooltip_padding * 3) { // x -= tooltip_width + tooltip_padding * 2; // } // const y = +d3.select(this).attr('y') + item_size; // // Show tooltip // tooltip // .html(tooltip_html) // .style('left', `${x}px`) // .style('top', `${y}px`) // .transition() // .duration(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(transition_duration / 2) // .ease(d3.easeLinear) // .attr('x', d => { // return calcItemX(d) + (item_size - calcItemSize(d)) / 2; // }) // .attr('y', d => { // return calcItemY(d) + (item_size - calcItemSize(d)) / 2; // }) // .attr('width', d => { // return calcItemSize(d); // }) // .attr('height', d => { // return calcItemSize(d); // }); // // Hide tooltip // calendarHeatmap.hideTooltip(); // }) // .transition() // .delay(() => { // return (Math.cos(Math.PI * Math.random()) + 1) * transition_duration; // }) // .duration(() => { // return transition_duration; // }) // .ease(d3.easeLinear) // .style('opacity', 1) // .call(transitionCallback); // /////************************************************************ // /////************************************************************ // /////************************************************************ // /////************************************************************ // /////************************************************************ // // Add month labels // const month_labels = d3.timeMonths( // d3.timeYear(new Date()), // d3.timeYear.ceil(new Date()) // ); // const monthScale = d3 // .scaleLinear() // .range([0, width]) // .domain([0, month_labels.length]); // labels.selectAll('.label-month').remove(); // labels // .selectAll('.label-month') // .data(month_labels) // .join('text') // .attr('class', 'label label-month') // .attr('font-size', () => `${Math.floor(label_padding / 3)}px`) // .text(d => d3.timeFormat('%b')(d)) // .attr( // 'x', // (d, i) => monthScale(i) + (monthScale(i) - monthScale(i - 1)) / 2 // ) // .attr('y', label_padding / 2) // .on('mouseenter', d => { // if (calendarHeatmap.in_transition) { // return; // } // const selected_month = d; // items // .selectAll('.item-circle') // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .style('opacity', d => { // mutable temp = { selected_month, d }; // return +d3.timeMonth(selected_month) === +d3.timeMonth(d.date) // ? 1 // : 0.1; // }); // }) // .on('mouseout', () => // calendarHeatmap.in_transition // ? null // : items // .selectAll('.item-circle') // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .style('opacity', 1) // ) // .on('click', d => { // if (calendarHeatmap.in_transition) { // return; // } // // Check month data // const month_data = calendarHeatmap.data.filter(e => { // return ( // +d3.timeMonth(d) <= +e.date && // +e.date < +d3.timeSecond.offset(d3.timeMonth.offset(d, 1), -1) // ); // }); // // mutable temp = { monthData: month_data }; // // 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.removeYearView(); // // Redraw the chart // calendarHeatmap.overview = 'month'; // drawChart(); // }); // // Add day labels // labels.selectAll('.label-day').remove(); // labels // .selectAll('.label-day') // .data(day_labels) // .enter() // .append('text') // .attr('class', 'label label-day') // .attr('x', label_padding / 3) // .attr('y', (d, i) => { // return dayScale(i) + dayScale.bandwidth() / 1.75; // }) // .style('text-anchor', 'left') // .attr('font-size', () => `${Math.floor(label_padding / 3)}px`) // .text(d => d3.timeFormat('%A')(d)[0]) // .on('mouseenter', d => // calendarHeatmap.in_transition // ? null // : items // .selectAll('.item-circle') // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .style('opacity', item => // +d3.timeDay(item.date) === +d3.timeDay(d) ? 1 : 0.1 // ) // ) // .on('mouseout', () => // calendarHeatmap.in_transition // ? null // : items // .selectAll('.item-circle') // .transition() // .duration(transition_duration) // .ease(d3.easeLinear) // .style('opacity', 1) // ); // // Add button to switch back to previous overview // calendarHeatmap.drawButton(); }33:Tb9c,//pstuffa's calendarView = ( dataset, feature, calendarType, setWidth, setCellSize, color = false ) => { const timeWeek = calendarType === "sunday" ? d3.timeSunday : d3.timeMonday; const countDay = calendarType === "sunday" ? d => d.getDay() : d => (d.getDay() + 6) % 7; if (color == false) { color = d3 .scaleSequential(d3.interpolateSpectral) .domain(d3.extent(dataset, d => d[feature])); } function pathMonth(t) { const n = calendarType === "weekday" ? 5 : 7; const d = Math.max(0, Math.min(n, countDay(t))); const w = timeWeek.count(d3.timeYear(t), t); return `${ d === 0 ? `M${w * setCellSize},0` : d === n ? `M${(w + 1) * setCellSize},0` : `M${(w + 1) * setCellSize},0V${d * setCellSize}H${w * setCellSize}` }V${n * setCellSize}`; } const height = setCellSize * (calendarType === "weekday" ? 7 : 9); const years = d3 .nest() .key(d => d.date.getFullYear()) .entries(dataset) .reverse(); const svg = d3 .select(DOM.svg(setWidth, height * years.length)) .style("font", "10px sans-serif") .style("width", width) .style("height", height * years.length); const year = svg .selectAll("g") .data(years) .join("g") .attr( "transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})` ); year .append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(d => d.key); year .append("g") .attr("text-anchor", "end") .selectAll("text") .data( (calendarType === "weekday" ? d3.range(2, 7) : d3.range(7)).map( i => new Date(1995, 0, i) ) ) .join("text") .attr("x", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); year .append("g") .selectAll("rect") .data(d => d.values) .join("rect") .attr("width", setCellSize - 1) .attr("height", setCellSize - 1) .attr( "x", d => timeWeek.count(d3.timeYear(d.date), d.date) * setCellSize + 0.5 ) .attr("y", d => countDay(d.date) * setCellSize + 0.5) .attr("fill", d => color(d[feature])) .attr('stroke', d => color(d[feature])) .attr('stroke-width', 2) .append("title") .text(d => `${formatDate(d.date)}: ${format(d[feature])}`); const month = year .append("g") .selectAll("g") .data(d => d3.timeMonths( d3.timeMonth(d.values[0].date), d.values[d.values.length - 1].date ) ) .join("g"); month .filter((d, i) => i) .append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month .append("text") .attr( "x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * setCellSize + 2 ) .attr("y", -5) .text(formatMonth); return svg.node(); }34:T12f5,Month = MonthView.selectAll('.item-block-month') .data(selectedMonthInfo.data, d => +d.date) .join('g') .attr('class', 'item item-block-month') .attr('width', () => { return weekScale.bandwidth(); }) .attr('height', () => { return dayScale.bandwidth(); }) .attr('transform', d => { mutable weekDays = d; return `translate( ${weekScale(d3.timeWeek(d.date))}, ${dayScale(d3.timeFormat('%a')(d.date)) + dayScale.bandwidth() / 2} )`; }) .attr('total', d => d.total) .attr('date', d => d.date) .attr('offset', 0) .each(function(d) { d3.select(this) .selectAll('.item-block-rect') .data(d.summary) .enter() .append('rect') .attr('class', 'item item-block-rect') .attr('x', function(d) { const total = parseInt(d3.select(this.parentNode).attr('total')); const 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) { const total = parseInt(d3.select(this.parentNode).attr('total')); itemScale.domain([0, total]); return itemScale(d.value) - 1; // - weekScale.padding() * weekScale.bandwidth(); //Math.max(itemScale(d.value) - item_gutter, 1); }) .attr('height', () => { return dayScale.bandwidth(); }) .attr('fill', function(d) { return turboColorScheme[~~(Math.random() * turboColorScheme.length)]; // let clr = 'transparent'; // const colorFuture = d3 // .scaleLinear() // .range(['#ffffff', futureColor]) // .domain([-0.1 * max_value_month, max_value_month]); // const colorPast = d3 // .scaleLinear() // .range(['#ffffff', pastColor]) // .domain([-0.1 * max_value_month, max_value_month]); // const colorToday = d3 // .scaleLinear() // .range(['#ffffff', todayColor]) // .domain([-0.1 * max_value_month, max_value_month]); // const dated = +new Date(d3.select(this.parentNode).attr('date')); // if (now === dated) { // clr = colorToday(d.value); // } else { // if (dated < now) { // clr = colorPast(d.value); // } else if (dated > 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 // const date = new Date(d3.select(this.parentNode).attr('date')); // // Construct tooltip // let tooltip_html = `
//

// // ${ // d.value // ? calendarHeatmap.formatTime(d.value) // : 'No time' // } tracked // //

// on ${d3.timeFormat('%A, %b %-d %Y')(date)} //

// `; // // Calculate tooltip position // let x = weekScale(+d3.timeFormat('%U')(date)) + tooltip_padding; // while (width - x < tooltip_width + tooltip_padding * 3) { // x -= 10; // } // const y = dayScale(date.getDay()) + tooltip_padding * 2; // // Show tooltip // tooltip // .html(tooltip_html) // .style('left', `${x}px`) // .style('top', `${y}px`) // .transition() // .duration(transition_duration / 2) // .ease(d3.easeBackIn) // .style('opacity', 1); // }) // .on('mouseout', () => { // if (calendarHeatmap.in_transition) { // return; // } // calendarHeatmap.hideTooltip(); // }) .transition() .delay(() => { return (Math.cos(Math.PI * Math.random()) + 1) * transition_duration; }) .duration(() => { return transition_duration; }) .ease(d3.easeBackIn) .style('opacity', 1) .call(transitionCallback); })35:T599,GeneratedData = { //initialize random data var now = d3.timeSecond.offset(d3.timeDay.ceil(new Date()), -1); var eoy = d3.timeSecond.offset(d3.timeYear.ceil(new Date()), -1); var max_date = new Date(+eoy - (+d3.timeDay.ceil(new Date()) - +new Date())); var time_ago = d3.timeYear.offset(d3.timeDay(new Date()), -10); 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: Routes[Math.round(Math.random() * Routes.length) - 1], 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(); }); generateSummary(example_data); return example_data; }36:[] 2e:{"title":"Calendar Breakdown","cells":[{"id":0,"value":"md`# Calendar Breakdown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof calendarHeatmap = {\n RESET;\n let view = html`\n

\n \n

`;\n\n let data = GeneratedData,\n container = view.id,\n color =\n turboColorScheme[Math.round(Math.random() * turboColorScheme.length) - 1],\n overview = 'global',\n history = ['global'],\n selected = { date: new Date() },\n // Set handler function\n handler = () => {},\n // No transition to start with\n in_transition = false;\n\n view.value = {\n data,\n container,\n color,\n overview,\n history,\n selected,\n handler,\n in_transition\n };\n yield view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"viewof YearView = {\n RESET;\n\n let view = calendarView(\n DATA.filter(\n d =>\n +d3.timeYear(d.date) ===\n +d3.timeYear(selected ? new Date() : selected?.date)\n ),\n 'total',\n weekday,\n width,\n cellSize\n );\n\n let container = html`\n

\n \n

`;\n\n container.value = d3.select(view);\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"viewof MonthView = {\n RESET;\n\n let container = html`\n

\n \n

`;\n let svg = d3.select(container).select('svg');\n container.value = svg;\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof RESET = html`