30:T113f,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height * years.length]) .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg.selectAll("g") .data(years) .join("g") .attr("transform", function(d,i){ if(type == "calendar"){ return `translate(40.5,${height * i + cellSize * 1.5})` } else { return `translate(40.5,${height * i + cellSize * 8})` } }) .attr("id",d => d[0]) year.append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data((weekday === "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((type === "calendar" ? formatDay : "")) year.append("g") .selectAll("rect") .data(weekday === "weekday" ? ([, values]) => values.filter(d => ![0, 6].includes(d.date.getUTCDay())) : ([, values]) => values) .enter().append("rect") .attr("width", function(d,i){ if(type == "calendar"){ return cellSize - 1 } else { return 1.7 } }) .attr("height", function(d){ if(type == "calendar"){ return cellSize - 1 } else { return d.value * (125/max) } }) .attr("x", function(d,i){ if(type == "calendar"){ return timeWeek.count(d3.utcYear(d.date), d.date) * cellSize + 0.5 } else { return i * 2.2 } }) .attr("y", function(d){ if(type == "calendar"){ return countDay(d.date) * cellSize + 0.5 } else { return d.value * -(125/max) } }) // .attr("fill", "#eee") .attr("fill", d => color(d.value)) .on("mouseover", d => getDays(d)) // .transition().duration(1000) // .attr("fill", d => color(d.value)) const month = year.append("g") .selectAll("g") .data(([, values]) => d3.utcMonths(d3.utcMonth(values[0].date), values[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.utcYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); const day_2018 = svg.append("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x",-100) .attr("stroke", "#000") .attr("stroke-width", 2) .attr("fill", "none") const day_2019 = svg.append("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x",-100) .attr("stroke", "#000") .attr("stroke-width", 2) .attr("fill", "none") const day_2020 = svg.append("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x",-100) .attr("stroke", "#000") .attr("stroke-width", 2) .attr("fill", "none") function getDays(d){ var date = d.date, value = d.value console.log(date,value) if(type === "calendar"){ day_2018.attr("x", 40.5+(timeWeek.count(d3.utcYear(date), date) * cellSize + 0.5)) day_2018.attr("y", (height * 2 + cellSize * 1.5)+countDay(date) * cellSize + 0.5) day_2019.attr("x", 40.5+(timeWeek.count(d3.utcYear(date), date) * cellSize + 0.5)) day_2019.attr("y", (height * 1 + cellSize * 1.5)+countDay(date) * cellSize + 0.5) day_2020.attr("x", 40.5+(timeWeek.count(d3.utcYear(date), date) * cellSize + 0.5)) day_2020.attr("y", (height * 0 + cellSize * 1.5)+countDay(date) * cellSize + 0.5) } else { day_2018.attr("x", -100) day_2019.attr("x", -100) day_2020.attr("x", -100) } } // function updateBar(){ // //Update all rects // //console.log("update") // svg.selectAll("rect") // .data(data) // .transition() // .duration(2000) // .attr("fill", d => color(d.value)) // } // updateBar() return svg.node(); }31:[{"id":"d8bf955fe1661813500988a0a0e604949c6a6e0a75cb72e2c3289ef52c8b7d7c58e37f115b42b6c4b1ae45888021950183658ff2f78fbfcfe6c36e5df71e843f","href":"https://static.observableusercontent.com/files/d8bf955fe1661813500988a0a0e604949c6a6e0a75cb72e2c3289ef52c8b7d7c58e37f115b42b6c4b1ae45888021950183658ff2f78fbfcfe6c36e5df71e843f","name":"duration.csv","type":"text/csv","lastModified":1587678404464.612,"size":30997}] 2e:{"title":"Calendar Heatmap","cells":[{"id":0,"value":"md`# Calendar Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof weekday = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"viewof type = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof metric = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"key = legend({color, title: metric, tickFormat: \".0f\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"color = {\n const max = d3.quantile(data.map(d => Math.abs(d.value)).sort(d3.ascending), 0.9975);\n const min = d3.min(data, d => d.value)\n //const max = d3.max(data, d => d.value)\n return d3.scaleSequential(d3.interpolateYlOrRd).domain([min, max]);\n //return d3.scaleQuantile().domain([min, max]).range([\"green\", \"white\", \"red\"])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"years = d3.groups(data, d => d.date.getUTCFullYear()).reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"cellSize = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"height = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"timeWeek = weekday === \"sunday\" ? d3.utcSunday : d3.utcMonday","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"countDay = weekday === \"sunday\" ? d => d.getUTCDay() : d => (d.getUTCDay() + 6) % 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"function pathMonth(t) {\n const n = weekday === \"weekday\" ? 5 : 7;\n const d = Math.max(0, Math.min(n, countDay(t)));\n const w = timeWeek.count(d3.utcYear(t), t);\n return `${d === 0 ? `M${w * cellSize},0`\n : d === n ? `M${(w + 1) * cellSize},0`\n : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"formatDate = d3.utcFormat(\"%x\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"formatDay = d => \"SMTWTFS\"[d.getUTCDay()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"formatMonth = d3.utcFormat(\"%b\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"formatValue = d3.format(\"+.2%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"allData = Object.assign(d3.csvParse(await FileAttachment(\"duration.csv\").text(), d3.autoType))","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"allData.columns","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"data = {\n var arr = []\n allData.forEach(function(d){ \n arr.push({date: d.date, value:d[metric]})\n })\n //chart.updateBar()\n return arr\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"max = d3.max(data, d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}