2f:T562,vis = html`

%

Hr

Min

Secs

`30:T408,function render () { const sel = d3.select(vis) let now = new Date() // render time labels let hours = now.getHours() let minutes = now.getMinutes() let seconds = now.getSeconds() sel.select('.time-hour').text(hours + ' hrs') sel.select('.time-minutes').text(minutes + ' mins') sel.select('.time-seconds').text(seconds + ' secs') // render percent labels let hoursPercent = Math.floor((100 / 24) * hours) let minutesPercent = Math.floor((100 / 60) * minutes) let secondsPercent = Math.floor((100 / 60) * seconds) sel.select('.percent-hour').text(hoursPercent + ' %') sel.select('.percent-minutes').text(minutesPercent + ' %') sel.select('.percent-seconds').text(secondsPercent + ' %') // render charts waffle(hoursPercent, { bind: sel.select('.chart-hours'), squareCol: '#a6d40d' }) waffle(minutesPercent, { bind: sel.select('.chart-minutes'), squareCol: '#a6d40d' }) waffle(secondsPercent, { bind: sel.select('.chart-seconds'), squareCol: '#ff5ec4' }) } 31:T565,function waffle (value = 90, { bind = null, // pass in a d3 selection i.e d3.select('class/div') squareCol = '#008cbc', squareBgd = '#e5e7de', strokeCol = '#666666', squareSize = 20, strokeWidth = 0, margin = { top: 5, right: 30, bottom: 30, left: 5, } } = {}) { const size = (squareSize + (strokeWidth * 2)) * 10 // append the svg if first render if (bind.select('svg').empty()) { bind .append('svg') .attr('width', size + margin.left + margin.right) .attr('height', size + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) .call(grid10by10) } function grid10by10 (sel) { const scale = d3.scaleLinear() .domain([0, 9]) .range([0, squareSize * 10]) const join = sel.selectAll('rect') .data(d3.range(100)) .join('rect') .attr('x', (d, i) => { const n = i % 10 return scale(n) }) .attr('y', (d, i) => { const n = Math.floor(i / 10) return scale(n) }) .attr('width', squareSize) .attr('height', squareSize) .attr('stroke-width', strokeWidth) .attr('stroke', strokeCol) // note < not <= as counting from 0 .attr('fill', (d, i) => (i < value) ? squareCol : squareBgd) } return bind.select('svg g').call(grid10by10) }32:[] 2d:{"title":"waffle time","cells":[{"id":0,"value":"# waffle time\nusing a waffle chart to show time in percentage. Updating every second and squares/percentage is rounded down to the nearest integer ","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"// start with render\nrender()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"d3.interval(function () {\n render()\n}, 1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"---------\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}