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() }