31:Te52,drawYear = (ctx, year, {highlightDate, metric}) => { const pad = 10; // relative coord helpers const s = daySize; const {originX, originY, monthCorners, dateToRC} = yearHelpers(year); // translate to this year's origin ctx.save(); ctx.translate(originX, originY); // draw year on left ctx.font = "10px sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = labelColor; ctx.fillText(year, -60, daySize*7/2); // draw day names on left const dayNames = "SMTWTFS".split(""); ctx.fillStyle = labelColor; for (let d=0; d<7; d++) { ctx.fillText(dayNames[d], -20, (d+0.5)*daySize); } // draw days for (let m=0; m<12; m++) { for (let d=1; d<=numDaysInMonth(year,m); d++) { const date = new Date(year,m,d); const {row, col} = dateToRC(date); ctx.beginPath(); ctx.rect(col*s, row*s, s, s); const value = dataLookup[date.getTime()]; ctx.fillStyle = value && metric ? rgba(qualityScale(value[metric]), qualityOpacity) : cellFillColor; ctx.fill(); ctx.strokeStyle = cellStrokeColor; ctx.stroke(); } } // draw frame { const {topLeftCol, bottomLeftCol} = monthCorners(0); const {topRightCol, bottomRightCol} = monthCorners(11); ctx.beginPath(); ctx.moveTo(topLeftCol*s, 0); ctx.lineTo(topRightCol*s, 0); ctx.moveTo(bottomLeftCol*s, 7*s); ctx.lineTo(bottomRightCol*s, 7*s); ctx.lineWidth = 2; ctx.lineCap = "round"; ctx.strokeStyle = borderColor; ctx.stroke(); } // draw months ctx.textAlign = "center"; ctx.textBaseline = "bottom"; const monthName = d3timeformat.timeFormat("%b"); for (let m=0; m<13; m++) { const date = new Date(year, m, 1); const {row, col} = dateToRC(date); // draw dividers ctx.beginPath(); const tick = 3; if (row === 0) { ctx.moveTo(col*s, 0*s-tick); ctx.lineTo(col*s, 7*s+tick); } else { ctx.moveTo((col+1)*s, 0*s-tick); ctx.lineTo((col+1)*s, row*s); ctx.lineTo(col*s, row*s); ctx.lineTo(col*s, 7*s+tick); } ctx.strokeStyle = dividerColor; ctx.lineWidth = dividerWidth; ctx.lineCap = ctx.lineJoin = "round"; ctx.stroke(); if (getYear(date) === year) { // draw month label const {topLeftCol, topRightCol} = monthCorners(m); ctx.fillStyle = labelColor; ctx.fillText(monthName(date), (topLeftCol+topRightCol)/2*s, -pad); } } // draw highlighted date { const date = highlightDate; const value = date ? dataLookup[date.getTime()] : null; ctx.save(); if (date && getYear(date) === year) { // draw cell const {row,col} = dateToRC(date); ctx.beginPath(); ctx.rect(col*s, row*s, s, s); const t = 1; ctx.lineWidth = t*2; ctx.strokeStyle = "#fff"; ctx.stroke(); // draw day label const dateText = d3timeformat.timeFormat("%b %-d")(date); const percentStr = p => (p*100).toFixed(2)+"%"; const text = value ? `${dateText}: ${percentStr(value[metric])}` : dateText; const textWidth = ctx.measureText(text).width; ctx.strokeStyle = ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.rect((col+1)*s,row*s,textWidth+pad,s); ctx.fill(); ctx.stroke(); ctx.lineWidth = t; ctx.strokeStyle = borderColor; ctx.strokeRect(col*s-t, row*s-t, textWidth+pad+s+t*2, s+t*2); ctx.textBaseline = "middle"; ctx.textAlign = "left"; ctx.fillStyle = labelColor; ctx.fillText(text, (col+1)*s+pad/2, (row+0.5)*s); } ctx.restore(); } ctx.restore(); }32:[] 2f:{"title":"Data Quality Calendar","cells":[{"id":0,"value":"md`# Data Quality Calendar\n\n_Requirements:_ Given a dataset containing 4 data quality metrics per day, show a calendar overview where each day is colored by some function of those metrics.\n\n_Assumptions:_ We can determine the color functions later, and assume that we only want to see one metric at a time.\n\n_Data Format:_ A list of \\`{timestamp, metricA, metricB, metricC}\\` tuples. One tuple per day.\n\n_References_: Our previous [calendar demo](https://pingthings.slack.com/files/U027ES364/F97QNKVK6/predictivegrid_-_predictivegrid.jpg) is based on [this d3 calendar example](https://bl.ocks.org/mbostock/4063318).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof qualityScale = {\n const width = 400;\n const height = 32;\n const data = [\n {p:0, color: \"#2096f3\"}, // #2096f3\n {p:0.1, color: \"#2ecc71\"}, // #63c911\n {p:0.2, color: \"#f1c40f\"}, // #FEEF00\n {p:0.3, color: \"#e74c3c\"}, // #cf692a\n {p:1, color: \"#c0392b\"}, // #8B0000\n ];\n const scale = d3scale.scaleLinear()\n \t.domain(data.map(d => d.p)) // we add the second p-value to shift the threshold \n \t.range(data.map(d => d.color));\n const cssGradPoint = ({p,color}) => `${color} ${Math.floor(p*100)}%`;\n const gradient = prefix => `background-image: ${prefix}linear-gradient(left, ${data.map(cssGradPoint).join(\",\")})`;\n const gradients = [\"\",\"-moz-\",\"-webkit-\"].map(gradient).join(\"; \");\n const el = html`

`;\n el.value = scale;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"canvas = {\n const state = {metric: \"metricA\"};\n const ctx = DOM.context2d(width, height);\n const canvas = ctx.canvas;\n const draw = () => {\n ctx.clearRect(0, 0, width, height);\n for (let year=startYear; year {\n const x = e.layerX;\n const y = e.layerY;\n const date = xyToDate({x,y});\n const metric = xyToMetric({x,y});\n if (metric && metric != state.metric) {\n state.metric = metric;\n draw();\n }\n if (date+\"\" != state.highlightDate+\"\") {\n state.highlightDate = date;\n draw();\n }\n });\n draw();\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"quantizedSpectrum = {\n const div = html`

`;\n const s = 7;\n for (let i of d3array.range(0, 1, 0.02)) {\n div.appendChild(html`

`);\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"viewof qualityOpacity = {\n const el = html``;\n el.value = 0.87;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"seedrandom = require('seedrandom@2.4.3/seedrandom.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"metrics = [\"metricA\", \"metricB\", \"metricC\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"// temporary random data\nmockData = {\n const random = seedrandom('hello');\n const randomMetric = () => random()**3;\n return d3time.timeDay.range(new Date(2015, 5, 11), new Date).map(date => {\n const obj = {date};\n for (let m of metrics) obj[m] = randomMetric();\n return obj;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"data = mockData","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"dataLookup = {\n const lookup = {};\n for (let d of data) lookup[d.date.getTime()] = d;\n return lookup;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"startYear = getYear(data[0].date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"endYear = getYear(data[data.length-1].date)+1","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"numYears = endYear - startYear","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`## Drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`### Sizing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"daySize = 14","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"startX = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"startY = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"yearOffset = daySize * 7 + startY","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"height = startY + numYears*yearOffset + 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"metricX = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"metricY = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"metricW = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"metricH = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"metricMargin = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`### Coordinates\n\nYRC is year/row/column. XY is pixels.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"dateToYRC = date => ({\n year: getYear(date),\n col: getWeekOfYear(date),\n row: getDayOfWeek(date),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"yrcToDate = ({year,row,col}) => {\n const validRow = 0 <= row && row < 7;\n if (!validRow) return;\n const start = new Date(year,0,1);\n\n const dayOfYear = col*7 + row - getDayOfWeek(start);\n const validDay = 0 <= dayOfYear && dayOfYear < numDaysInYear(year);\n if (!validDay) return;\n \n return d3time.timeDay.offset(start, dayOfYear);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"yrcToXY = ({year,col,row}) => ({\n x: startX + col * daySize,\n y: startY + (year-startYear)*yearOffset + row * daySize,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"xyToYRC = ({x,y}) => {\n const year = Math.floor((y - startY) / yearOffset) + startYear;\n const col = Math.floor((x - startX) / daySize);\n const row = Math.floor((y - yrcToXY({year,row:0,col:0}).y) / daySize);\n return {year, col, row};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"xyToDate = ({x,y}) => yrcToDate(xyToYRC({x,y}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"// relative coordinate positions for the given year\nyearHelpers = year => {\n const originX = startX;\n const originY = startY + (year-startYear)*yearOffset;\n const dateToRC = date => ({\n row: getDayOfWeek(date),\n col: d3time.timeWeek.count(new Date(year, 0, 1), date),\n });\n const monthCorners = m => {\n const a = dateToRC(new Date(year, m, 1));\n const b = dateToRC(new Date(year, m+1, 0));\n return {\n topLeftCol: a.row===0 ? a.col : a.col+1,\n bottomLeftCol: a.col,\n topRightCol: b.col+1,\n bottomRightCol: b.row===6 ? b.col+1 : b.col,\n };\n };\n return {originX, originY, monthCorners, dateToRC};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"xyToMetric = ({x,y}) => {\n const offset = metricW + metricMargin;\n for (let i=0; i {\n const c = d3color.color(color);\n c.opacity = alpha;\n return c+\"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`### Main`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"drawData = (ctx, metric) => {\n const s = daySize;\n for (let d of data) {\n const {x,y} = yrcToXY(dateToYRC(d.date));\n ctx.fillStyle = qualityScale(d[metric]);\n ctx.fillRect(x,y,s,s);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"drawMetrics = (ctx, {metric}) => {\n ctx.save();\n const s = daySize;\n ctx.translate(metricX, metricY);\n ctx.textBaseline = \"middle\";\n ctx.textAlign = \"right\";\n ctx.fillStyle = labelColor;\n ctx.fillText(\"metrics\", -metricMargin, metricH/2);\n\n ctx.textAlign=\"center\";\n for (let m of metrics) {\n ctx.fillText(m, metricW/2, metricH/2);\n const pad = 10;\n \n ctx.strokeStyle = borderColor;\n ctx.beginPath();\n if (m === metric) {\n ctx.strokeRect(0, 0, metricW, metricH);\n } else {\n ctx.moveTo(0, metricH);\n ctx.lineTo(metricW, metricH);\n }\n ctx.stroke();\n ctx.translate(metricW + metricMargin, 0);\n }\n ctx.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`## Time functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"getYear = date => date.getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"getMonth = date => date.getMonth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"getDayOfMonth = date => date.getDate()","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"getDayOfWeek = date => date.getDay()","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"getWeekOfYear = date => d3time.timeWeek.count(d3time.timeYear(date), date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"numDaysInMonth = (y, m) => d3time.timeDay.count(new Date(y, m, 1), new Date(y, m+1, 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"numDaysInYear = y => d3time.timeDay.count(new Date(y, 0, 1), new Date(y+1, 0, 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3time = require('d3-time')","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"d3timeformat = require('d3-time-format')","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"d3scale = require('d3-scale')","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"d3color = require('d3-color')","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"d3array = require('d3-array')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}