Original = { // Layout const content = this || html`

«Schotter» by d3.js,

` // Schotter const g = d3.select(content).select('g') .attr('transform', `translate(${width / 4 - (size * cols) / 2}, ${margin.top})`) const angle = d => { const magnitude = 1 + d.row * 5 const random = Math.random() - 0.5 return random * magnitude; } const x = d => { const pos = xScale(d.col) const magnitude = 1 + d.row * 1 const random = Math.random() - 0.5 return pos + random * magnitude } const y = d => { const pos = yScale(d.row) const magnitude = 1 + d.row * 1.2 const random = Math.random() - 0.5 return pos + random * magnitude } const squares = g.selectAll('.square').data(data) squares.enter() .append('rect') .attr('class', 'square') .attr('fill', 'none') .attr('stroke', '#333') .attr('stroke-width', 0.9) .attr('width', size) .attr('height', size) .attr('transform-origin', d => `${size/2} ${size/2}`) .attr('transform', d => `translate(${x(d)}, ${y(d)}) rotate(${angle(d)})`) // Bonus: update "Created At" every minute while (true) { if (!content.createdAt) { content.createdAt = now } d3.select(content).select('.createdAt').html(dayjs(content.createdAt).fromNow()) yield content await Promises.delay(1000 * 60) } }