31:T924,chart = { const svg = d3.select(html``) // Y axis: Playlist // const yAxisG = svg.append("g").attr('class', 'y-axis').call(yAxis) // X axis // const xAxisG = svg.append("g").attr('class', 'x-axis').call(xAxis) // Series // const seriesG = svg.append("g").attr('class', 'chart') .selectAll("g").data(data.series) .join("g").attr('class', 'series') .attr("transform", d => `translate(0, ${y(d.name)})`); seriesG.append("path").attr('class', 'area') .attr("d", d => area(d.values)) seriesG.append("path").attr('class', 'line') .attr("d", d => line(d.values)) // Peak label // svg.append('text').attr('class', 'label') .attr('x', x(new Date('2020-05-01T22:00'))) .attr('y', y(data.series[0].name) + z(d3.max(data.series[0].values))) .attr('dx', 8) .attr('dy', 8) .attr('dominant-baseline', 'hanging') .text('← Peaks caused by Yoga Calendar followers') // Playlist label // svg.append('text').attr('class', 'label label-playlist') .attr('x', width - margin.right + 4) .attr('y', margin.top) .attr('dy', -18) .text('Playlist') // Letter label // svg.append('g').attr('class', 'letter-label') .attr('transform', `translate(${width - margin.right + 4}, ${height - margin.bottom + 21})`) .append('foreignObject') .attr('width', margin.right) .attr('height', 50) .style('overflow', 'visible') .style('font-size', '10px') .style('font-family', 'PT Sans') .style('color', fgColor) .html('

← Adriene’s weekly letter
See its effect on the chart!

') // Bot users // const solver = (self, d) => solve(d3.select(self.parentNode).select('.line').node())(x(d.date)) const getUsers = d => botUsers.filter(u => u.day === d.day && u.part === (d.part||0)) seriesG.selectAll('circle').data(getUsers) .join('circle').attr('class', 'mark-user') .classed('mark-yogi', d => d.user === yogi) .attr('cx', d => x(d.date)) .attr('cy', function(d) { return solver(this, d) }) .each(function(d) { if (d.user === yogi) { this.parentNode.appendChild(this); } }) return svg.node() }32:Tb91,legend = { const values = data.series[38].values const sampleLength = Math.round(30 / N) const sample = values.slice(0, sampleLength) const sampleWidth = (x.range()[1] - x.range()[0]) / values.length * sampleLength const sampleHeight = Math.abs(z(d3.max(sample))) const lineHeight = 12 const labelPadding = 10 const itemHeight = sampleHeight + lineHeight * 2 const svg = d3.select(html``) // 1. Views // let offset = 6 + sampleHeight legendItem({ offset, html: [ `Views per minute (based on YouTube views)`, `The highest spike was ${peak.views} views per minute on Day ${peak.name}` ]}) // 2. Users // offset += itemHeight const totalUsers = uniqUsers.length const emoji = [...'😅😅', ...'🙃🙃🙃🙃', ...'😌😌😌😌', '🤪', '😬'] const uni = '🦄' const uniPos = Math.round(Math.random() * (totalUsers - 1)) const yogis = d3.range(totalUsers) .map(i => i === uniPos ? uni : _.sample(emoji)) // unicorn should be only one .map(yogi => `${yogi}`).join('') legendItem({ offset, mark: 'user', html: [ `Visitors of Yoga With Adriene Bot`, `${totalUsers} brave souls practiced regularly this month ` + ( yogi ? `

${yogis}

` : `👏👏👏

${yogis}

` ) ]}) .select('.yogis').on('mouseleave', () => highlightUser(-1)) .selectAll('.yogi').on('mouseover', (d, i) => highlightUser(i)) // 3. You // if (yogi) { offset += itemHeight legendItem({ offset, mark: 'yogi', html: [ 'You 👏', `You checked in ${botUsers.filter(u => u.user === yogi).length} times this month. Keep showing up!` ] }) } function legendItem({ offset, mark, html }) { return svg.append('g') .attr('transform', `translate(${0}, ${offset})`) .call(g => g.append('path').attr('class', 'area').attr("d", area(sample))) .call(g => g.append('path').attr('class', 'line').attr("d", line(sample))) .call(g => mark && g.append('circle').attr('class', `mark-${mark} hl`) .attr('cx', x(data.dates[0]) + sampleWidth / 2) .attr('cy', -5) ) .call(g => g.append('foreignObject').attr('class', 'legend-label') .attr('transform', `translate(${margin.left + sampleWidth + labelPadding}, ${-lineHeight + 1})`) .attr('width', width) .attr('height', 80) .html(`

` + html.join('
') + `

`) ) } return svg.node() }33:T595,xAxis = g => g .attr("transform", `translate(${xAxisHourWidth * 18}, ${height - margin.bottom + 8})`) .call(d3.axisBottom(x) .ticks(d3.timeDay) .tickFormat(d => d.getMonth() === 4 ? d3.timeFormat(d.getDate() === 1 ? 'May' : '%d')(d) : '') .tickSize(0) ) .call(g => g.select('.domain').remove()) // Vertical day highlight .call(g => g.selectAll('.highlightbox').data(daysInMay) .join('rect').attr('class', 'highlightbox') .attr('x', d => x(d) - xAxisHourWidth * (12 + 6)) .attr('width', xAxisHourWidth * (24 + 12)) .attr('y', -height) .attr('height', height + margin.bottom) ) // Weekly letter ticks .call(g => g.selectAll('.tick').each(function (d) { if (d.getDay() === 0) { d3.select(this).append('text').attr('class', 'letter') .attr('fill', 'currentColor') .attr('opacity', 0.8) .attr('y', `2.3em`) .text('💌') } })) // Mouse hover target box .call(g => g.selectAll('.hoverbox').data(daysInMay) .join('rect').attr('class', 'hoverbox') .attr('x', d => x(d) - xAxisHourWidth * 12) .attr('width', xAxisHourWidth * 24) .attr('y', -2) .attr('height', `3em`) ) // Yogi days highlight .call(g => { const yogiDays = botUsers.filter(u => u.user === yogi).map(u => ({ day: u.day, part: u.part })) g.selectAll('.tick') .classed('hl-yogi', (d, i) => !!yogiDays.find(d => d.day === i + 1)) })34:T614,style = html``35:T280f,dataDatesString = `["2020-04-30T22:00:00.000Z","2020-05-01T00:00:00.000Z","2020-05-01T02:00:00.000Z","2020-05-01T04:00:00.000Z","2020-05-01T06:00:00.000Z","2020-05-01T08:00:00.000Z","2020-05-01T10:00:00.000Z","2020-05-01T12:00:00.000Z","2020-05-01T14:00:00.000Z","2020-05-01T16:00:00.000Z","2020-05-01T18:00:00.000Z","2020-05-01T20:00:00.000Z","2020-05-01T22:00:00.000Z","2020-05-02T00:00:00.000Z","2020-05-02T02:00:00.000Z","2020-05-02T04:00:00.000Z","2020-05-02T06:00:00.000Z","2020-05-02T08:00:00.000Z","2020-05-02T10:00:00.000Z","2020-05-02T12:00:00.000Z","2020-05-02T14:00:00.000Z","2020-05-02T16:00:00.000Z","2020-05-02T18:00:00.000Z","2020-05-02T20:00:00.000Z","2020-05-02T22:00:00.000Z","2020-05-03T00:00:00.000Z","2020-05-03T02:00:00.000Z","2020-05-03T04:00:00.000Z","2020-05-03T06:00:00.000Z","2020-05-03T08:00:00.000Z","2020-05-03T10:00:00.000Z","2020-05-03T12:00:00.000Z","2020-05-03T14:00:00.000Z","2020-05-03T16:00:00.000Z","2020-05-03T18:00:00.000Z","2020-05-03T20:00:00.000Z","2020-05-03T22:00:00.000Z","2020-05-04T00:00:00.000Z","2020-05-04T02:00:00.000Z","2020-05-04T04:00:00.000Z","2020-05-04T06:00:00.000Z","2020-05-04T08:00:00.000Z","2020-05-04T10:00:00.000Z","2020-05-04T12:00:00.000Z","2020-05-04T14:00:00.000Z","2020-05-04T16:00:00.000Z","2020-05-04T18:00:00.000Z","2020-05-04T20:00:00.000Z","2020-05-04T22:00:00.000Z","2020-05-05T00:00:00.000Z","2020-05-05T02:00:00.000Z","2020-05-05T04:00:00.000Z","2020-05-05T06:00:00.000Z","2020-05-05T08:00:00.000Z","2020-05-05T10:00:00.000Z","2020-05-05T12:00:00.000Z","2020-05-05T14:00:00.000Z","2020-05-05T16:00:00.000Z","2020-05-05T18:00:00.000Z","2020-05-05T20:00:00.000Z","2020-05-05T22:00:00.000Z","2020-05-06T00:00:00.000Z","2020-05-06T02:00:00.000Z","2020-05-06T04:00:00.000Z","2020-05-06T06:00:00.000Z","2020-05-06T08:00:00.000Z","2020-05-06T10:00:00.000Z","2020-05-06T12:00:00.000Z","2020-05-06T14:00:00.000Z","2020-05-06T16:00:00.000Z","2020-05-06T18:00:00.000Z","2020-05-06T20:00:00.000Z","2020-05-06T22:00:00.000Z","2020-05-07T00:00:00.000Z","2020-05-07T02:00:00.000Z","2020-05-07T04:00:00.000Z","2020-05-07T06:00:00.000Z","2020-05-07T08:00:00.000Z","2020-05-07T10:00:00.000Z","2020-05-07T12:00:00.000Z","2020-05-07T14:00:00.000Z","2020-05-07T16:00:00.000Z","2020-05-07T18:00:00.000Z","2020-05-07T20:00:00.000Z","2020-05-07T22:00:00.000Z","2020-05-08T00:00:00.000Z","2020-05-08T02:00:00.000Z","2020-05-08T04:00:00.000Z","2020-05-08T06:00:00.000Z","2020-05-08T08:00:00.000Z","2020-05-08T10:00:00.000Z","2020-05-08T12:00:00.000Z","2020-05-08T14:00:00.000Z","2020-05-08T16:00:00.000Z","2020-05-08T18:00:00.000Z","2020-05-08T20:00:00.000Z","2020-05-08T22:00:00.000Z","2020-05-09T00:00:00.000Z","2020-05-09T02:00:00.000Z","2020-05-09T04:00:00.000Z","2020-05-09T06:00:00.000Z","2020-05-09T08:00:00.000Z","2020-05-09T10:00:00.000Z","2020-05-09T12:00:00.000Z","2020-05-09T14:00:00.000Z","2020-05-09T16:00:00.000Z","2020-05-09T18:00:00.000Z","2020-05-09T20:00:00.000Z","2020-05-09T22:00:00.000Z","2020-05-10T00:00:00.000Z","2020-05-10T02:00:00.000Z","2020-05-10T04:00:00.000Z","2020-05-10T06:00:00.000Z","2020-05-10T08:00:00.000Z","2020-05-10T10:00:00.000Z","2020-05-10T12:00:00.000Z","2020-05-10T14:00:00.000Z","2020-05-10T16:00:00.000Z","2020-05-10T18:00:00.000Z","2020-05-10T20:00:00.000Z","2020-05-10T22:00:00.000Z","2020-05-11T00:00:00.000Z","2020-05-11T02:00:00.000Z","2020-05-11T04:00:00.000Z","2020-05-11T06:00:00.000Z","2020-05-11T08:00:00.000Z","2020-05-11T10:00:00.000Z","2020-05-11T12:00:00.000Z","2020-05-11T14:00:00.000Z","2020-05-11T16:00:00.000Z","2020-05-11T18:00:00.000Z","2020-05-11T20:00:00.000Z","2020-05-11T22:00:00.000Z","2020-05-12T00:00:00.000Z","2020-05-12T02:00:00.000Z","2020-05-12T04:00:00.000Z","2020-05-12T06:00:00.000Z","2020-05-12T08:00:00.000Z","2020-05-12T10:00:00.000Z","2020-05-12T12:00:00.000Z","2020-05-12T14:00:00.000Z","2020-05-12T16:00:00.000Z","2020-05-12T18:00:00.000Z","2020-05-12T20:00:00.000Z","2020-05-12T22:00:00.000Z","2020-05-13T00:00:00.000Z","2020-05-13T02:00:00.000Z","2020-05-13T04:00:00.000Z","2020-05-13T06:00:00.000Z","2020-05-13T08:00:00.000Z","2020-05-13T10:00:00.000Z","2020-05-13T12:00:00.000Z","2020-05-13T14:00:00.000Z","2020-05-13T16:00:00.000Z","2020-05-13T18:00:00.000Z","2020-05-13T20:00:00.000Z","2020-05-13T22:00:00.000Z","2020-05-14T00:00:00.000Z","2020-05-14T02:00:00.000Z","2020-05-14T04:00:00.000Z","2020-05-14T06:00:00.000Z","2020-05-14T08:00:00.000Z","2020-05-14T10:00:00.000Z","2020-05-14T12:00:00.000Z","2020-05-14T14:00:00.000Z","2020-05-14T16:00:00.000Z","2020-05-14T18:00:00.000Z","2020-05-14T20:00:00.000Z","2020-05-14T22:00:00.000Z","2020-05-15T00:00:00.000Z","2020-05-15T02:00:00.000Z","2020-05-15T04:00:00.000Z","2020-05-15T06:00:00.000Z","2020-05-15T08:00:00.000Z","2020-05-15T10:00:00.000Z","2020-05-15T12:00:00.000Z","2020-05-15T14:00:00.000Z","2020-05-15T16:00:00.000Z","2020-05-15T18:00:00.000Z","2020-05-15T20:00:00.000Z","2020-05-15T22:00:00.000Z","2020-05-16T00:00:00.000Z","2020-05-16T02:00:00.000Z","2020-05-16T04:00:00.000Z","2020-05-16T06:00:00.000Z","2020-05-16T08:00:00.000Z","2020-05-16T10:00:00.000Z","2020-05-16T12:00:00.000Z","2020-05-16T14:00:00.000Z","2020-05-16T16:00:00.000Z","2020-05-16T18:00:00.000Z","2020-05-16T20:00:00.000Z","2020-05-16T22:00:00.000Z","2020-05-17T00:00:00.000Z","2020-05-17T02:00:00.000Z","2020-05-17T04:00:00.000Z","2020-05-17T06:00:00.000Z","2020-05-17T08:00:00.000Z","2020-05-17T10:00:00.000Z","2020-05-17T12:00:00.000Z","2020-05-17T14:00:00.000Z","2020-05-17T16:00:00.000Z","2020-05-17T18:00:00.000Z","2020-05-17T20:00:00.000Z","2020-05-17T22:00:00.000Z","2020-05-18T00:00:00.000Z","2020-05-18T02:00:00.000Z","2020-05-18T04:00:00.000Z","2020-05-18T06:00:00.000Z","2020-05-18T08:00:00.000Z","2020-05-18T10:00:00.000Z","2020-05-18T12:00:00.000Z","2020-05-18T14:00:00.000Z","2020-05-18T16:00:00.000Z","2020-05-18T18:00:00.000Z","2020-05-18T20:00:00.000Z","2020-05-18T22:00:00.000Z","2020-05-19T00:00:00.000Z","2020-05-19T02:00:00.000Z","2020-05-19T04:00:00.000Z","2020-05-19T06:00:00.000Z","2020-05-19T08:00:00.000Z","2020-05-19T10:00:00.000Z","2020-05-19T12:00:00.000Z","2020-05-19T14:00:00.000Z","2020-05-19T16:00:00.000Z","2020-05-19T18:00:00.000Z","2020-05-19T20:00:00.000Z","2020-05-19T22:00:00.000Z","2020-05-20T00:00:00.000Z","2020-05-20T02:00:00.000Z","2020-05-20T04:00:00.000Z","2020-05-20T06:00:00.000Z","2020-05-20T08:00:00.000Z","2020-05-20T10:00:00.000Z","2020-05-20T12:00:00.000Z","2020-05-20T14:00:00.000Z","2020-05-20T16:00:00.000Z","2020-05-20T18:00:00.000Z","2020-05-20T20:00:00.000Z","2020-05-20T22:00:00.000Z","2020-05-21T00:00:00.000Z","2020-05-21T02:00:00.000Z","2020-05-21T04:00:00.000Z","2020-05-21T06:00:00.000Z","2020-05-21T08:00:00.000Z","2020-05-21T10:00:00.000Z","2020-05-21T12:00:00.000Z","2020-05-21T14:00:00.000Z","2020-05-21T16:00:00.000Z","2020-05-21T18:00:00.000Z","2020-05-21T20:00:00.000Z","2020-05-21T22:00:00.000Z","2020-05-22T00:00:00.000Z","2020-05-22T02:00:00.000Z","2020-05-22T04:00:00.000Z","2020-05-22T06:00:00.000Z","2020-05-22T08:00:00.000Z","2020-05-22T10:00:00.000Z","2020-05-22T12:00:00.000Z","2020-05-22T14:00:00.000Z","2020-05-22T16:00:00.000Z","2020-05-22T18:00:00.000Z","2020-05-22T20:00:00.000Z","2020-05-22T22:00:00.000Z","2020-05-23T00:00:00.000Z","2020-05-23T02:00:00.000Z","2020-05-23T04:00:00.000Z","2020-05-23T06:00:00.000Z","2020-05-23T08:00:00.000Z","2020-05-23T10:00:00.000Z","2020-05-23T12:00:00.000Z","2020-05-23T14:00:00.000Z","2020-05-23T16:00:00.000Z","2020-05-23T18:00:00.000Z","2020-05-23T20:00:00.000Z","2020-05-23T22:00:00.000Z","2020-05-24T00:00:00.000Z","2020-05-24T02:00:00.000Z","2020-05-24T04:00:00.000Z","2020-05-24T06:00:00.000Z","2020-05-24T08:00:00.000Z","2020-05-24T10:00:00.000Z","2020-05-24T12:00:00.000Z","2020-05-24T14:00:00.000Z","2020-05-24T16:00:00.000Z","2020-05-24T18:00:00.000Z","2020-05-24T20:00:00.000Z","2020-05-24T22:00:00.000Z","2020-05-25T00:00:00.000Z","2020-05-25T02:00:00.000Z","2020-05-25T04:00:00.000Z","2020-05-25T06:00:00.000Z","2020-05-25T08:00:00.000Z","2020-05-25T10:00:00.000Z","2020-05-25T12:00:00.000Z","2020-05-25T14:00:00.000Z","2020-05-25T16:00:00.000Z","2020-05-25T18:00:00.000Z","2020-05-25T20:00:00.000Z","2020-05-25T22:00:00.000Z","2020-05-26T00:00:00.000Z","2020-05-26T02:00:00.000Z","2020-05-26T04:00:00.000Z","2020-05-26T06:00:00.000Z","2020-05-26T08:00:00.000Z","2020-05-26T10:00:00.000Z","2020-05-26T12:00:00.000Z","2020-05-26T14:00:00.000Z","2020-05-26T16:00:00.000Z","2020-05-26T18:00:00.000Z","2020-05-26T20:00:00.000Z","2020-05-26T22:00:00.000Z","2020-05-27T00:00:00.000Z","2020-05-27T02:00:00.000Z","2020-05-27T04:00:00.000Z","2020-05-27T06:00:00.000Z","2020-05-27T08:00:00.000Z","2020-05-27T10:00:00.000Z","2020-05-27T12:00:00.000Z","2020-05-27T14:00:00.000Z","2020-05-27T16:00:00.000Z","2020-05-27T18:00:00.000Z","2020-05-27T20:00:00.000Z","2020-05-27T22:00:00.000Z","2020-05-28T00:00:00.000Z","2020-05-28T02:00:00.000Z","2020-05-28T04:00:00.000Z","2020-05-28T06:00:00.000Z","2020-05-28T08:00:00.000Z","2020-05-28T10:00:00.000Z","2020-05-28T12:00:00.000Z","2020-05-28T14:00:00.000Z","2020-05-28T16:00:00.000Z","2020-05-28T18:00:00.000Z","2020-05-28T20:00:00.000Z","2020-05-28T22:00:00.000Z","2020-05-29T00:00:00.000Z","2020-05-29T02:00:00.000Z","2020-05-29T04:00:00.000Z","2020-05-29T06:00:00.000Z","2020-05-29T08:00:00.000Z","2020-05-29T10:00:00.000Z","2020-05-29T12:00:00.000Z","2020-05-29T14:00:00.000Z","2020-05-29T16:00:00.000Z","2020-05-29T18:00:00.000Z","2020-05-29T20:00:00.000Z","2020-05-29T22:00:00.000Z","2020-05-30T00:00:00.000Z","2020-05-30T02:00:00.000Z","2020-05-30T04:00:00.000Z","2020-05-30T06:00:00.000Z","2020-05-30T08:00:00.000Z","2020-05-30T10:00:00.000Z","2020-05-30T12:00:00.000Z","2020-05-30T14:00:00.000Z","2020-05-30T16:00:00.000Z","2020-05-30T18:00:00.000Z","2020-05-30T20:00:00.000Z","2020-05-30T22:00:00.000Z","2020-05-31T00:00:00.000Z","2020-05-31T02:00:00.000Z","2020-05-31T04:00:00.000Z","2020-05-31T06:00:00.000Z","2020-05-31T08:00:00.000Z","2020-05-31T10:00:00.000Z","2020-05-31T12:00:00.000Z","2020-05-31T14:00:00.000Z","2020-05-31T16:00:00.000Z","2020-05-31T18:00:00.000Z","2020-05-31T20:00:00.000Z","2020-05-31T22:00:00.000Z","2020-06-01T00:00:00.000Z","2020-06-01T02:00:00.000Z","2020-06-01T04:00:00.000Z","2020-06-01T06:00:00.000Z","2020-06-01T08:00:00.000Z", "2020-06-01T10:00:00.000Z"]`36:[{"id":"ae39f19bf6fbfb0bcf43f19b15ff95b0f64f5831f8e97fa673368a2d4777dfe2494b7f00ebd9931f5da50d185982d816b0bc87031d7d86185263c4bc7043c17f","href":"https://static.observableusercontent.com/files/ae39f19bf6fbfb0bcf43f19b15ff95b0f64f5831f8e97fa673368a2d4777dfe2494b7f00ebd9931f5da50d185982d816b0bc87031d7d86185263c4bc7043c17f","name":"dataSeries.json","type":"application/json","lastModified":1591424754678.824,"size":60980},{"id":"dddc0ec8b26f0b8cc0ef875caaab4b8b7bb63f6d8b70bec901ee365a9f41495e38b438392a79fd745f0f7b85e0d793072bce1edb389dd5a2568eaa6aea56af11","href":"https://static.observableusercontent.com/files/dddc0ec8b26f0b8cc0ef875caaab4b8b7bb63f6d8b70bec901ee365a9f41495e38b438392a79fd745f0f7b85e0d793072bce1edb389dd5a2568eaa6aea56af11","name":"botUsers@1.json","type":"application/json","lastModified":1591424753388.926,"size":10529}] 2f:{"title":"Yoga Calendar Effect","cells":[{"id":0,"value":"md`# Yoga Calendar Effect`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4151,"value":"md`This chart depicts the popularity of videos on [Yoga With Adriene](https://www.youtube.com/user/yogawithadriene) YouTube channel. In May 2020.\n\nUnusual spikes are caused by the *Yoga Calendar Effect*: folks all over the world are practicing the same video literally in sync!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2657,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4169,"value":"md`I [gathered](https://medium.com/@oluckyman/serverless-youtube-stats-tracker-for-a-bot-3b2c49a9e725) this data for my [bot](https://t.me/YogaWithAdrieneBot), which shows how many people have started a yoga video at the same time. \n\nWhen I saw the *Yoga Calendar Effect*, I decided to share it with the [yoga community](https://www.fwfgkula.com/). \nI embedded this notebook into the [Yoga Calendar Effect site](https://yoga-calendar-effect.now.sh/) built with Gatsby.\n\nThis type of chart is called _Joy Plot_, referring to a Joy Division's album artwork. Here is the entrance into the [rabbit hole](https://bl.ocks.org/borgar/31c1e476b8e92a11d7e9). See also [Ridgeline Plot](https://observablehq.com/@observablehq/plot-ridgeline).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3909,"value":"__CODE__ = md`---\n## Code\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2094,"value":"yogi = new URLSearchParams(html``.search).get('yogi')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3714,"value":"peak = {\n const max = _.maxBy(data.series.map((s, i) => ({\n ...s,\n index: i,\n views: Math.round(d3.max(s.values) / (N * 60)),\n })), s => s.views)\n return {\n ...max,\n date: _.find(data.dates, (date, i) => Math.round(data.series[max.index].values[i] / (N*60)) === max.views)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3924,"value":"md`### Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3048,"value":"bindHighlightRow = {\n d3.select(chart).select('.y-axis').selectAll('.hoverbox')\n .on('mouseleave', () => highlightRow(-1))\n .on('mouseenter', (d, i) => highlightRow(i))\n return /code block/\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2909,"value":"highlightRow = {\n const yAxisTicks = d3.select(chart).select('.y-axis').selectAll('.tick')\n const chartG = d3.select(chart).select('.chart')\n const series = chartG.selectAll('.series')\n const opacity = (row, i) => {\n const delta = Math.abs(row - i)\n const maxDelta = 4\n const minOpac = 0.4\n const normDelta = minOpac + (1 - minOpac) - Math.min(delta, maxDelta) / maxDelta * minOpac // [0..1]\n const eased = d3.easeCircleIn(normDelta)\n return Math.max(minOpac, eased)\n }\n return row => {\n yAxisTicks.attr('opacity', (d, i) => row === -1 ? 1 : opacity(row, i))\n chartG.classed('hl', row !== -1)\n series.classed('hl', (d, i) => i === row)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"bindHighlightDay = {\n d3.select(chart).select('.x-axis').selectAll('.hoverbox')\n .on('mouseleave', () => highlightDay(-1))\n .on('mouseenter', (d, i) => highlightDay(i))\n return /code block/\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2940,"value":"highlightDay = {\n const xAxisG = d3.select(chart).select('.x-axis')\n const xAxisBoxes = xAxisG.selectAll('.highlightbox')\n const xAxisTicks = xAxisG.selectAll('.tick')\n const yAxisTicks = d3.select(chart).select('.y-axis').selectAll('.tick')\n\n return day => {\n xAxisBoxes.classed('hl', (d, i) => i === day)\n xAxisTicks.classed('hl', (d, i) => i === day)\n yAxisTicks.classed('hl', (d, i) => data.series[i].day === day + 1)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2877,"value":"highlightUser = {\n const svg = d3.select(chart)\n const xAxisG = svg.select('.x-axis')\n const xAxisTicks = xAxisG.selectAll('.tick')\n const yAxisG = svg.select('.y-axis')\n const yAxisTicks = yAxisG.selectAll('.tick')\n return i => {\n svg.selectAll('.mark-user').classed('hl', d => d.user === uniqUsers[i])\n svg.selectAll('.mark-user.hl').raise()\n svg.classed('hl', i !== -1)\n if (i === -1) {\n svg.selectAll('.mark-yogi').raise()\n }\n \n const userDays = botUsers.filter(u => u.user === uniqUsers[i]).map(u => ({ day: u.day, part: u.part }))\n xAxisG.classed('hl', i !== -1)\n yAxisG.classed('hl', i !== -1)\n xAxisTicks.classed('hl-user', (d, i) => !!userDays.find(d => d.day === i + 1))\n yAxisTicks.classed('hl-user', (d, i) =>\n !!userDays.find(d => d.day === data.series[i].day && d.part === (data.series[i].part || 0)))\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3927,"value":"md`### Charting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"x = d3.scaleTime()\n .domain(datesDomain)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1490,"value":"y = d3.scalePoint()\n .domain(data.series.map(d => d.name))\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"z = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.values))])\n .range([0, -overlap * y.step()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${width - margin.right}, 0)`)\n .attr('color', fgColor).style('font-family', '\"PT Sans\"').style('cursor', 'default')\n .call(d3.axisRight(y).tickSize(0).tickPadding(4))\n .call(g => g.select(\".domain\").remove())\n // Mouse hover target box\n .call(g => g.selectAll('.hoverbox').data(data.series)\n .join('rect').attr('class', 'hoverbox')\n .attr('y', d => y(d.name) - rowHeight / 2)\n .attr('width', margin.right)\n .attr('height', rowHeight)\n )\n // Yogi videos highlight\n .call(g => {\n const yogiDays = botUsers.filter(u => u.user === yogi).map(u => ({ day: u.day, part: u.part }))\n g.selectAll('.tick')\n .classed('hl-yogi', (v, i) => !!yogiDays.find(d => d.day === data.series[i].day && d.part === (data.series[i].part || 0)))\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .x((d, i) => x(data.dates[i]))\n .y0(0)\n .y1(d => z(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"line = area.lineY1().defined(d => d !== null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2391,"value":"rowHeight = (y.range()[1] - y.range()[0]) / (data.series.length - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2450,"value":"xAxisHourWidth = (x.range()[1] - x.range()[0]) / d3.timeHours(...x.domain()).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":3320,"value":"__STYLES__ = md`---\n## Styles\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"overlap = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"fgColor = '#4990b8' //'#cbe3ef'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2026,"value":"bgColor = '#fff' //['#356885', '#32647F', '#4D829E'][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3170,"value":"userColor = '#ffa600' // '#ffea4b'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3171,"value":"userColorAlt = bgColor //'#e38720'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2072,"value":"yogiColor = '#D92525'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4211,"value":"tickHlColor = '#022930' // 'white'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4217,"value":"hlBoxColor = fgColor // 'white'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"height = data.series.length * 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"margin = ({top: 60, right: 290, bottom: 60, left: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4263,"value":"gradientId.toString()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2832,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2812,"value":"linearGradient = `\n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3665,"value":"gradientId = DOM.uid()","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"__DATA__ = md`---\n## Data\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3241,"value":"N = 2 // hours betwen two data points","pinned":false,"hidden":false,"mode":"ojs"},{"id":2935,"value":"daysInMay = d3.timeDays(...datesDomain).filter(d => d.getMonth() === 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"datesDomain = [ new Date('2020-04-30T20:00:00'), new Date('2020-06-01T12:00:00')]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"data = ({\n dates: JSON.parse(dataDatesString).map(d => new Date(d)),\n series: dataSeriesJson,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"botUsers = botUsersJson.map(u => ({...u, date: new Date(u.date) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3090,"value":"uniqUsers = _.map(_.groupBy(botUsers, 'user'), (sessions, user) => [sessions.length, user])\n .sort((a, b) => b[0] - a[0])\n .map(u => u[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3269,"value":"INLINE_DATA = md`---\n### Inline data\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3458,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3813,"value":"dataSeriesJson = FileAttachment(\"dataSeries.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2990,"value":"botUsersJson = FileAttachment(\"botUsers@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"LIBS = md`---\n## Libs\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3612,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2044,"value":"import { solve } from '@oluckyman/point-on-a-path-detection'","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}