2f:T8ef,dashboard = html`

${heatmapChart()}

${chartLegend()}

Activity — 365 Days Ago

${sBarChart(width-48)}

${chartLegend()}

Focus — 365 Days Ago

${normalizedSBarChart(width-48)}

${chartLegend()}

Balance — 365 Days Ago

${donutChart(150, 150)}

${donut_legend()}

`30:T401,//Find the percentage of each work TYPE workTypePercentValues = { // Calculate the total amount of each work TYPE let workTypeValues = d3.rollup(mainData, v => d3.sum(v, d => d.DURATION), d => d.TYPE); //To deal with any TYPE with no data const objData = Object.fromEntries(workTypeValues); const objDefault = { "Skills": 0, "Media": 0, "Admin": 0, "Network": 0}; const objFinal = Object.assign(objDefault, objData); let sum = 0; let percentVal = 0; let percentValArr = []; let totalTypeVal = Array.from(workTypeValues.entries()).map(function(d){ sum += d[1]; }); //let percentTypeVal = Array.from(workTypeValues.entries()).map(function(d){ let percentValObj = {}; let percentTypeVal = (Object.entries(objFinal)).map(function(d){ console.log(d); percentVal = (d[1] / sum); percentVal = d3.format(".2%")(percentVal); percentValObj[d[0]] = percentVal; percentValArr.push({[d[0]] : percentVal}); }); //return percentValArr; return percentValObj; }31:T672,function discreteLegend({ labels, nColumns=1, colWidth=170, keySize=20, margin=5, textLeft=35, fontFamily="roboto,noto,rial,sans-serif", fontSize=16, legendWidth=width } = {}) { let keySpace = keySize/2; let maxKeysPerCol = Math.ceil((labels.length+1)/nColumns) let height = maxKeysPerCol * (keySize+keySpace+margin) let textTop = (keySize + keySpace)/2 const svg = d3.create("svg") .attr("width", legendWidth) .attr("height", height) .attr("viewBox", [0, 0, legendWidth, height]) .style("overflow", "visible") .style("display", "block"); svg.append("g") .selectAll("rect") .data(labels) .join("rect") .attr("x", (d, i) => Math.floor(i/maxKeysPerCol) * (colWidth)) .attr("y", (d, i) => (i%maxKeysPerCol) * (keySize+keySpace)) .attr("rx", 3) .attr("width", keySize) .attr("height", keySize) //.attr("fill", d => d.primary); .attr("fill", d => colorMap[d['key']]); const text = svg.append("g") .selectAll("text") .data(labels) .join("text") .attr("x", (d, i) => Math.floor(i/maxKeysPerCol) * (colWidth) + textLeft) .attr("y", (d, i) => ((i%maxKeysPerCol) * (keySize+keySpace)) + textTop) .attr("font-family",fontFamily) .attr("font-size",fontSize) .attr("fill","black"); text.append("tspan") .attr("font-weight",700) .text(function(d,i){ return d['key'] + ' '; }); text.append("tspan") .text(function(d,i){ return workTypePercentValuesOrdered[i][d['key']]; }); return svg.node(); } 32:T694,sBarChart = (barWidth = width) => { const sBarWidth = barWidth - sBarMargin.left - sBarMargin.right; const svg = d3.select(DOM.svg(sBarWidth, sBarHeight)) .attr("viewBox", [sBarMargin.left, sBarMargin.top, sBarWidth, sBarHeight]); const x1 = d3.scaleBand().rangeRound([sBarMargin.left, sBarWidth]).domain(graph2FinalData.map((d,i)=>i)).paddingInner(padding.x); let bars = svg.append("g").attr("transform", "translate(0, 0)"); let categories = bars.selectAll(".bar") .data(stackedData) .enter() .append("g") .attr("class", "day") .attr("fill", function(d){ return colorMap[d['key']]; }); categories .selectAll("rect") .data(function(d) { return d; }) .enter() .append("rect") .attr("x", (d, i) => x1(i)) .attr("y", d => { return d[1] !== d[0] ? y1(d[1]) : 0; }) .attr("rx", "3") .attr("ry", "3") .attr("width", x1.bandwidth()) .attr("height", d => { return d[1] !== d[0] ? y1(d[0]) - y1(d[1]) : 0; }) .on('mouseover', function (event, d) { const tHTML = `

Week ${d.data['Week']}: ${d.data['Skills']}h Skills, ${d.data['Network']}h Network, ${d.data['Media']}h Media, ${d.data['Admin']}h Admin

Week ${d.data['Week']}: ${percentWorkArr[0]} Skills, ${percentWorkArr[1]} Network, ${percentWorkArr[2]} Media, ${percentWorkArr[3]} Admin

${d.data['Category']} : ${d.data['TotalValue']}h

`; tooltip.html(tHTML) .style('visibility', 'visible'); const isPosLeft = event.pageX > width/2, tWidth = tooltip.node().getBoundingClientRect().width, tx = isPosLeft ? event.pageX - tWidth - 10 : event.pageX + 10; tooltip.style('top', event.pageY - 10 + 'px') .style('left', `${tx}px`); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); }); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs); return svg .node(); }35:[{"id":"c77779f1d1fb7edc87a56e4a658368f5cf88c1a398022fd4ce6f44856d6a5806269567d22601c5ee35cd1e099541b2fd8784da9f4744e420754515a10b52a085","href":"https://static.observableusercontent.com/files/c77779f1d1fb7edc87a56e4a658368f5cf88c1a398022fd4ce6f44856d6a5806269567d22601c5ee35cd1e099541b2fd8784da9f4744e420754515a10b52a085","name":"data@1.csv","type":"text/csv","lastModified":1608199643798.911,"size":10984}] 2d:{"title":"Activity Tracking Dashboard","cells":[{"id":0,"value":"md`# Activity Tracking Dashboard`","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`\n### 4 Graphs to represent daily and weekly activity tracking\n 1. Calendar Heatmap - Daily maximum work type\n 2. Stacked Bar Chart - Weekly all work types\n 3. Normalized Stacked Bar Chart - Weekly all work types\n 4. Donut Chart - All categories total hours\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`---\n\n### Raw data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"mainData = d3.csvParse(await FileAttachment(\"data@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"//Convert DURATION to an integer\nmainData.map(function(d){\n d.DURATION = +d.DURATION \n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`---\n\n### Work Type Total Percent Values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"workTypePercentValuesOrdered = {\n const sortedKeys = ['Skills', 'Network', 'Media', 'Admin'];\n \n return sortedKeys.map(function(d){\n return {[d]: workTypePercentValues[d]}\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`---\n\n### Color Palette`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"//Object - Colors for each work type\ncolorMap = ({\"Skills\": \"#30595F\", \"Network\": \"#50A5A5\", \"Media\": \"#5FFCF1\", \"Admin\": \"#C1C2C3\", \"NA\": \"#333333\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`---\n\n### Date code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"tParser = d3.timeParse(\"%d-%m-%y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"formatWeek = d3.timeFormat(\"%W\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"parseTime = d3.timeParse(\"%d-%m-%y\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`---\n\n### The legend\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"chartLegend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"chartLegend = () => discreteLegend( {labels:stackedData ,nColumns:8, legendWidth:100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"md`---\n\n# Graph 1 - Calendar Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`---\n\n### Data for Graph 1 - Calendar Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"//Modify data for Graph1 - Group the data by date\ngraph1DataGroupByDate = {\n const mapByDate = d3.group(mainData, d => d.DATE);\n \n const year = tParser(mainData[0].DATE).getFullYear();\n const JAN01TS = (new Date(`${year}-01-01`)).getTime();\n const oneDayInMS = 24 * 60 * 60 * 1000;\n const dateFormat = d3.timeFormat('%d-%m-%y');\n \n const emptyDateDataset = d3.range(0, iNumDaysInYear).map(i => {\n const dt = dateFormat(new Date(i * oneDayInMS + JAN01TS));\n const dataTuple = mapByDate.has(dt) ? mapByDate.get(dt) : [{\n DATE: dt,\n CATEGORY: 'NA',\n DURATION: 0,\n TYPE: 'NA'\n }];\n \n return [dt, dataTuple];\n });\n \n return new Map(emptyDateDataset);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"//Find the TYPE that has maximum total duration (added for all CATEGORIES of each TYPE) for that day\nmaxType = function(arr){\n return d3.least(d3.rollup(arr, v => d3.sum(v, d => d.DURATION), d => d.TYPE), ([, sum]) => -sum);\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"//Prepare data for final use - with the maximum TYPE (name and value) \n//and color for each data point based on the max TYPE\ngraph1IntermediateData = Array.from(graph1DataGroupByDate.entries()).map(function(d){\n const obj1 = Object.assign({}, d);\n obj1.maxType = maxType(d[1]);\n obj1.color = colorMap[obj1.maxType[0]];\n return {\n \"Date\": parseTime(d[0]), \n \"activities\":d[1], \n \"maxTypeName\": obj1.maxType[0], \n \"maxTypeValue\": obj1.maxType[1], \n \"color\": obj1.color\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"graph1FinalData = d3.groups(graph1IntermediateData , d => d.Date.getFullYear())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"iNumDaysInYear = {\n const year = tParser(mainData[0].DATE).getFullYear();\n const isLeapYear = year % 4 === 0 || (year % 1 !== 0 && year % 4 === 0);\n return isLeapYear ? 366 : 365;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"md`---\n\n### The chart for Graph 1 - Calendar Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"heatmapChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"heatmapChart = () => {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, heatmapHeight])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10);\n\n const year = svg.selectAll(\"g\")\n .data(graph1FinalData)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${heatmapHeight * i + cellSize * 1.5})`);\n\n year.append(\"g\")\n .selectAll(\"rect\")\n .data(([, values]) => values)\n .join(\"rect\")\n .attr(\"width\", cellSize - 1)\n .attr(\"height\", cellSize - 1)\n .attr(\"x\", d => timeWeek.count(d3.timeYear(d.Date), d.Date) * cellSize + 0.5)\n .attr(\"y\", d => countDay(d.Date.getDay()) * cellSize + 0.5)\n .attr(\"rx\", 4)\n .attr(\"fill\", d => d.color);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"cellSize = Math.floor(width / 53); // one extra for 1px gap for every week","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"heatmapHeight = cellSize * (9)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"//countDay = weekday === \"sunday\" ? i => i : i => (i + 6) % 7\ncountDay = i => (i + 6) % 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"//timeWeek = weekday === \"sunday\" ? d3.utcSunday : d3.utcMonday\ntimeWeek = d3.timeMonday","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"md`---\n\n# Graph 2 - Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`---\n\n### Data for Graph 2 - Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"//Modify data for Graph2 - Add week number\ngraph2DataWithWeekNum = mainData.map(function(d){\n const obj2 = Object.assign({}, d);\n obj2.WEEK = formatWeek(tParser(d.DATE));\n obj2.WEEK = +obj2.WEEK;\n return obj2;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"graph2DataGroupedByWeek = d3.group(graph2DataWithWeekNum, d => d.WEEK);","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"//Find the total duration of each TYPE week wise\ntotalWeekTypeVal = function(arr){\n return d3.rollup(arr, v => d3.sum(v, d => d.DURATION), d => d.TYPE);\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"//Final Data for Graph2 Stacked bar\ngraph2FinalData = Array.from(graph2DataGroupedByWeek.entries()).map(function(d){\n d.totalWeekTypeVals = totalWeekTypeVal(d[1]);\n \n const obj = Object.fromEntries(d.totalWeekTypeVals);\n obj.Week = d[1][0].WEEK;\n \n const target = { \"Skills\": 0, \"Network\": 0, \"Media\": 0, \"Admin\": 0, \"Week\": 0 };\n const returnedTarget = Object.assign(target, obj);\n \n return returnedTarget;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"//Modify Data for Stacking\nstackedData = d3.stack().keys((Object.keys(graph2FinalData[0])).splice(0,4))(graph2FinalData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"md`---\n\n### The Chart for Graph 2 - Stacked Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"sBarChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"y1 = d3.scaleLinear()\n .domain([0,d3.max(graph2FinalData, d => {\n let keys = Object.keys(d).filter(k => k != 'Week');\n let maximum = 0;\n keys.forEach(k => { maximum += d[k]; })\n return maximum\n })]).rangeRound([sBarHeight, sBarMargin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`---\n\n# Graph 3 - Normalized Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`---\n\n### Data for Graph 3 - Normalized Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"//The data is the same as Graph2 data\ngraph3FinalData = graph2FinalData.map(function(d){\n const obj3 = Object.assign({}, d);\n return obj3;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"//Modify data for stacking\nnormalizedStackedData = d3.stack()\n .keys((Object.keys(graph2FinalData[0])).splice(0,4))\n .offset(d3.stackOffsetExpand)\n (graph3FinalData)\n .map(d => (d.forEach(v => v.key = d.key), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`---\n\n### The Chart for Graph 3 - Normalized Stacked Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"normalizedSBarChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"y2 = d3.scaleLinear()\n .rangeRound([sBarHeight, sBarMargin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`---\n\n### Graph 2 and 3 - Stacked and Normalized Bar Charts - Common elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"padding = ({x:0.1, y:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"sBarMargin = ({\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"sBarHeight = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":" tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .style('pointer-events', 'none')\n .text('');\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`---\n\n# Graph 4 - Donut Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"md`---\n\n### Data for Graph 4 - Donut Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"graph4DataCategoryWise = d3.group(mainData, d => d.CATEGORY)","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"//Total values of each category\ncategoryTotalValues = function(arr){\n return d3.rollup(arr, v => d3.sum(v, d => d.DURATION), d => d.CATEGORY)\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"//Prepare data for final use - with the Categories, their values and colors based on TYPE of the CATEGORY \ngraph4FinalData = Array.from(graph4DataCategoryWise.entries()).map(function(d){\n const obj4 = {};\n obj4.catValsTemp = categoryTotalValues(d[1]);\n obj4.catVals = Array.from(obj4.catValsTemp.entries());\n obj4.color = colorMap[d[1][0].TYPE];\n return {\"Category\": d[0], \"TotalValue\": obj4.catVals[0][1], \"Type\": d[1][0].TYPE, \"color\": obj4.color};\n}).sort((a, b) => {\n return b.TotalValue - a.TotalValue;\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`---\n\n### The Chart for Graph 4 - Donut Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"donutChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"donut_legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"donut_legend = () => {\n return html`\n\n

\n
${d.Category}
\n
${d.TotalValue}h
\n

\n\n\n\n`}","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"// Height of the pie chart\ndonutSize = Math.min(width, 300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"// The pie function \npie = d3.pie()\n .padAngle(0.005)\n .sort(null)\n .value(d => d.TotalValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}