31:T4ee,colorScales =[ "#004a54,#015b65,#016c76,#047d88,#ad7b72,#ff594f", "#01666f,#01727c,#037d89,#178994,#ff594f", "#01666f,#01727c,#037d89,#178994,#25949f,#ff594f", "#003b44,#004a54,#015b65,#016c76,#047d88,#ad7b72,#ff594f", "#004a54,#015b65,#016c76,#047d88,#7e8382,#ff594f", "#003b44,#004a54,#015b65,#016c76,#047d88,#7e8382,#ff594f", "#003b44,#01666f,#01717b,#047e89,#168994,#ad7b72,#ff594f", "#01666f,#01717b,#047e89,#168994,#ad7b72,#ff594f", "#01666f,#01717b,#047e89,#168994,#B27C3B,#ff594f", "#01666f,#01727c,#037d89,#178994,#fca091,#ff594f", "#01666F,#027D89,#37A7B1,#58B7C0,#f4a582,#ff594f", "#027D89,#37A7B1,#58B7C0,#f4a582,#ff594f", "#027D89,#37A7B1,#58B7C0,#f4a582,#C3001E", "#027D89,#37A7B1,#f4a582,#C3001E", "#4DAEB8,#6CC9D4,#f4a582,#C3001E", "#4DAEB8,#6CC9D4,#CBF0F5,#f4a582,#C3001E", "#4DAEB8,#6CC9D4,#CBF0F5,#fd8d3c,#C3001E", "#BFCCD6,#f4a582,#ca0020", "#264D6B,#725785,#BC5A84,#F06A6A", "#163347,#5D476E,#AD537A,#F06A6A", "#163347,#4C4366,#8B4D77,#C75774,#F46F61", "#08519c,#3182bd,#6baed6,#fcae91,#fee5d9", "#eff3ff,#bdd7e7,#6baed6,#de2d26,#a50f15", "#b2e2e2,#66c2a4,#de2d26,#a50f15", "#08519c,#3182bd,#fb6a4a,#fcae91", "#4DAEB8,#6CC9D4,#CBF0F5,#E4586B,#C3001E", // current proposal ]32: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(); }33:[] 2f:{"title":"Data Availability Color Scale Playground","cells":[{"id":943,"value":"md`# Data Availability Color Scale Playground`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"{ var c=d3color.hcl('#01666f'); return c.darker().hex() }","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"viewof colorScalesSlider = \nradio({\n title: 'Color scale',\n options: colorScales.map(cols => ({ \n label: \n ''+\n cols.split(',').map(\n c => `

`\n ).join('')+\n '', \n value: cols\n })),\n value: colorScales[0]\n})\n/*html`${colorScales.map(\n cs => '

' + cs+'

'\n)})`*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"viewof dataLoss = html``","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 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":538,"value":"viewof qualityOpacity = {\n const el = html``;\n el.value = 1;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"qualityScale = d3scale.scaleQuantize()\n .domain([0, 1])\n .range(colors.slice().reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"quantizedSpectrum = {\n const div = html`

`;\n const s = 20;\n for (let c of qualityScale.range()) {\n div.appendChild(html`

`);\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"colors = colorScalesSlider.split(',')","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Data`","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 rnd = d3random.randomNormal(1-dataLoss,0.5*dataLoss)\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] = rnd();\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":35,"value":"$32","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":811,"value":"d3random=require('d3-random')","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"},{"id":893,"value":"import {slider, radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}