31:T494,md`In the fourth edition of The Anatomy of Hit Songs, we will make an exception and analyze data which spans almost 4 years (01.2017 - 09.2020) with a focus on examining the impact of the COVID-19 pandemic on our listening habits. Along the way we will also learn how these preferences evolved over the years, to gain a broader perspective.

⚠️ Please be aware that there were many factors that had an impact on the trends presented in this notebook, such as Spotify's entry to the Indian market in 2019Q1.

*"...the [user base] growth was driven by success in the Indian market which outperformed expectations, thanks to some key marketing campaigns delivering the results" ~ Inc42*

`32:T4f5,md`It seems like we are listening more and more, but when we compare this growth with the growth of the user base, it turns out that the number of streams per capita is significantly decreasing. The World Health Organization has declared a COVID-19 pandemic in March 2020 – a lot of people have spent the following weeks at their homes, having more time for indoor activities. It seems reasonable to expect an increase in the number of total streams during that period – however there was a significant drop in 2020Q2. Maybe we didn't want to listen to the biggest hits as much as we did before? Whatever the reason was, this number again went up in the following quarter. The next interesting topic to explore is **the evolution of the average songs' characteristics** (details about the metrics can be found there). Let's take a look at several line charts to check if 2020 was different. For every month, I have calculated the average value of a given metric. There is the same X axis for every variable (January - December), so all of the years overlap to be able to more effectively compare them.`33:T4e2,md`In some areas the current year seems to be different than the three previous ones; however, these changes often aren't very visible and could be impacted by factors other than the pandemic itself. Nevertheless, we listened to shorter, happier and less energetic hit tracks (on average). It kind of makes sense, as an online party is not a party... almost at all. --- ## Low-level trends *Aka 'the musical keyboard chart'.* To understand more about our listening habits, it's crucial to look at the numbers from a more detailed point of view. The chart below presents almost 4 years of daily streaming data – one circle for each day. They can be either pink (default color) or green (for the most "popular day" during a given week). On the left side you can see a bar chart – I intentionally didn't provide any precise numbers or a scale there, as it's purpose is just to highlight how popular a given week was compared to the neighboring weeks. On the right side you'll find some notable events which took place during a given week. You can also hover over a particular circle for several seconds to show a tooltip with detailed information about that day.`34:T127a,keyboardChart = { const m = keyboardMargin, dims = keyboardDims, rmax = rowHeight * 0.75; const svg = d3.create('svg') .attr('viewBox', [0, 0, w, dims.height + m.top + m.bottom]) .attr('id', 'keyboardChart'); svg.append('text') .attr('id', 'chartTitle') .attr('x', w * 0.5) .attr('y', 55) .text('How do we listen to music?'); svg.append('text') .attr('id', 'chartSubtitle') .attr('x', w * 0.5) .attr('y', 88) .text('Hint: mostly on Friday.'); svg.append('circle') .attr('cx', w * 0.5) .attr('cy', 130) .attr('r', 5) .attr('fill', '#5EED8E'); svg.append('text') .attr('id', 'chartSubtitle') .attr('x', w * 0.5) .attr('y', 155) .style('font-size', '12px') .style('font-style', 'normal') .style('text-anchor', 'middle') .text('Day with the most streams in a given week.'); svg.append('g') .call(addWeekdaysLegend, m.left + colWidth * 0.5, m.top + rowHeight * 0.3); svg.append('rect') .attr('transform', `translate(${m.left - 15}, ${m.top + rowHeight * 0.6})`) .attr('width', dims.width + 30) .attr('height', dims.height + rowHeight * 0.6) .attr('rx', 15) .style('fill', keyboardColor.background); const mostCommonDays = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0 }; const circles = svg.append('g') .attr('transform', `translate(${m.left + colWidth * 0.5}, ${m.top + 7.5})`) .selectAll() .data(dailyData) .join('circle') .attr('cx', d => d.weekday * colWidth) .attr('cy', d => d.weeknum * rowHeight) .attr('r', d => r(d.streams - minDailyStreams) * rmax) .style('fill', d => { const max = d3.max(dailyData.filter(e => e.weeknum == d.weeknum), d => d.streams); if (d.streams == max) { mostCommonDays[d.weekday] += 1; return keyboardColor.highlighted; } else { return keyboardColor.default; }; }) .append('title') .text(d => { return `${d3.timeFormat('%A, %d %B %Y')(d.date)}\n+${Math.round(10 * (d.streams - minDailyStreams) / 1e6) / 10}M streams compared to 02 Jan 2017\n(${Math.round(10 * d.streams / 1e6) / 10}M streams in total)`; }); svg.append('g') .attr('transform', `translate(${m.left - 15}, ${m.top})`) .selectAll() .data(groupedDailyData) .join('rect') .attr('x', d => -barWidth(d[1])) .attr('width', d => barWidth(d[1])) .attr('y', d => d[0] * rowHeight - 7.5) .attr('height', rowHeight - 2) .style('fill', keyboardColor.background); const dates = svg.append('g') .attr('transform', `translate(${m.left}, ${m.top + 12.5})`) .selectAll() .data(dailyData.filter( d => d.date.getDate() == 2 && d.date.getMonth() == 0 && d.date.getFullYear() == 2017 || d.date.getDate() == 1 && d3.ticks(0, 11, 10).includes(d.date.getMonth()) )) .join('text') .attr('class', 'dateLabel') .attr('x', d => -barWidth(groupedDailyData.find(e => e[0] == d.weeknum)[1]) - 22.5) .attr('y', d => d.weeknum * rowHeight) .text(function(d) { if (d.date.getMonth() == 0) { d3.select(this).classed('year', true); return d.date.getFullYear(); } else { d3.select(this).classed('quarter', true); return d3.timeFormat('%b')(d.date); } }); const comments = svg.append('g') .attr('transform', `translate(${w - m.right}, ${m.top + 12.5})`) .selectAll() .data(dailyDataComments) .join('text') .attr('class', 'comment') .attr('x', 25) .attr('y', d => d.weeknum * rowHeight) .text(d => d.type) .append('tspan') .attr('dy', 18) .attr('x', 25) .text(d => d.comment) .append('tspan') .attr('dy', 18) .attr('x', 25) .text(d => d.subcomment); svg.append('g') .call(addWeekdaysLegend, m.left + colWidth * 0.5, m.top + rowHeight + rowHeight * groupedDailyData.length); const mostCommonDayLegend = svg.append('g') .attr('id', 'mostCommonDayLegend') .attr('transform', `translate(${m.left + colWidth * 0.5}, ${m.top + rowHeight * 1.5 + rowHeight * groupedDailyData.length})`); mostCommonDayLegend.append('circle') .attr('cx', -32.5) .attr('cy', -rmax * 0.15) .attr('r', rmax * 0.2) .style('fill', keyboardColor.highlighted); mostCommonDayLegend.append('text') .attr('x', -47.6) .attr('y', -rmax * 0.05) .attr('r', rmax * 0.25) .text('∑'); mostCommonDayLegend.selectAll() .data(d3.ticks(0, 6, 6)) .join('text') .attr('dx', (d, i) => i * colWidth) .text(d => mostCommonDays[d]); return svg.node(); }35:T152d,makeZoomableBarChart = (data, x, xAxis, config = {}) => { let zoomed = false; const get = { x: d => d[config.x], y: d => d[config.y] }; const yRange = [max.y, min.y]; const y0 = d3.scaleLinear() .domain([0, d3.max(data, d => get.y(d))]) .range(yRange) .nice(); const y = d3.scaleLinear() .domain(d3.extent(data, d => get.y(d))) .range(yRange); const svg = d3.create('svg') .attr('viewBox', [0, 0, w, h]); svg.append('text') .attr('id', 'chartTitle') .attr('x', m.left) .attr('y', 55) .text(config.header.title) .append('tspan') .attr('dx', 5) .style('fill', config.color.highlighted) .text(config.header.highlight); svg.append('text') .attr('id', 'chartSubtitle') .attr('x', m.left) .attr('y', 82) .text(config.header.subtitle); const colorCutoff = 0.001 + (max.y - y0(d3.min(data, d => get.y(d)))) / chartDims.height; const gradient = DOM.uid(); svg.append('linearGradient') .attr('id', `gradient${config.y}`) .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 0) .attr('y1', max.y) .attr('x2', 0) .attr('y2', min.y) .selectAll('stop') .data(d3.ticks(0, 1, 500)) .join('stop') .attr('offset', d => d) .attr('stop-color', d => d <= colorCutoff ? config.color.default : config.color.highlighted); const gbars = svg.append('g') .attr('class', 'bars'); const bars = gbars.selectAll('rect') .data(data) .join('rect') .attr('x', d => x(get.x(d))) .attr('y', d => y0(get.y(d))) .attr('width', x.bandwidth()) .attr('height', d => max.y - y0(get.y(d))) .style('fill', `url(#gradient${config.y})`); const glabels = gbars.selectAll('.label') .data(data) .join('g') .attr('class', 'label') .attr('transform', d => `translate(${x(get.x(d)) + x.bandwidth() * 0.5}, ${y0(get.y(d)) - 7.5})`); const labels = glabels.selectAll('text') .data(d => [d]) .join('text') .text(d => config.labelFormat(get.y(d))); const zoomButton = svg.append('g') .attr('id', 'zoom') .attr('transform', `translate(${w - (80 + m.right)}, 35)`); zoomButton.append('rect') .attr('width', 80) .attr('height', 25) .on('click', zoom); zoomButton.append('text') .attr('x', 40) .attr('y', 16) .text('ZOOM IN'); const minStreamsBoundary = svg.append('rect') .attr('id', 'minStreamsBoundary') .attr('x', min.x - 0.5) .attr('y', max.y - 0.5) .attr('width', chartDims.width + 1) .attr('height', 0); const xAxisHolder = svg.append('g'); xAxisHolder.call(xAxis); function zoom() { // Change the zoom state. zoomed = !zoomed; // Update button's text. zoomButton.select('text') .text(zoomed ? 'ZOOM OUT' : 'ZOOM IN'); svg.select('linearGradient') .transition() .duration(zoomDuration) .delay(zoomed ? 0 : zoomDuration * 0.5) .attr('y2', zoomed ? max.y - 0.1 : min.y); // If there is a zoomed-in -> zoomed-out switch, // then hide the axis and immediately after send // it to the bottom of the page, to make it come // with bars. if (!zoomed) { xAxisHolder.transition() .duration(zoomDuration * 0.35) .style('opacity', 0) .on('end', function() { d3.select(this) .attr('transform', `translate(0, ${max.y + h * (y.domain()[1] / y0.domain()[1])})`); }); }; // Animate x axis. xAxisHolder.transition() .duration(zoomDuration) .delay(zoomed ? 0 : zoomDuration * 0.5) .attr('transform', zoomed ? `translate(0, ${max.y + h * (y.domain()[1] / y0.domain()[1])})` : `translate(0, ${max.y})`) .style('opacity', zoomed ? 0 : 1) .on('end', function() { if (zoomed) { d3.select(this) .attr('transform', `translate(0, ${max.y})`) .transition() .duration(zoomDuration * 0.35) .style('opacity', 1); } }); // Animate bars. bars.transition() .duration(zoomDuration) .delay(zoomed ? 0 : zoomDuration * 0.5) .attr('y', d => zoomed ? y(get.y(d)) : y0(get.y(d))) .attr('height', d => zoomed ? max.y - y(get.y(d)) + h * (y.domain()[1] / y0.domain()[1]) : max.y - y0(get.y(d))); // Animate labels. glabels.transition() .duration(zoomDuration) .delay(zoomed ? 0 : zoomDuration * 0.5) .attr('transform', d => `translate(${x(get.x(d)) + x.bandwidth() * 0.5}, ${(zoomed ? y(get.y(d)) : y0(get.y(d))) - 7.5})`); labels.transition() .duration(zoomDuration) .delay(zoomed ? 0 : zoomDuration * 0.5) .tween('text', function(d) { const index = data[0][config.y] > data[data.length - 1][config.y] ? data.length - 1 : 0; const i = d3.interpolate( get.y(d) - (zoomed ? 0 : data[index][config.y]), get.y(d) - (zoomed ? data[index][config.y] : 0) ); return function(t) { d3.select(this).text( '+'.repeat(zoomed).repeat(get.y(d) - data[index][config.y] != 0) + config.labelFormat(i(t)) ); }; }); // Animate the streams boundary. minStreamsBoundary.transition() .duration(zoomDuration * 0.5) .delay(zoomed ? zoomDuration : 0) .attr('height', zoomed ? m.bottom + 1 : 0); } return svg.node(); }36:T913,makeLineChart = (variable, comment) => { const data = average(variable), h = 350, m = { top: 125, right: 100, bottom: 20, left: 50 }; const svg = d3.create('svg') .attr('viewBox', [0, 0, w, h]) .attr('class', 'lineChart'); svg.append('text') .attr('id', 'chartTitle') .attr('x', m.left) .attr('y', 55) .style('fill', '#18DC5A') .text(variable.toUpperCase()); svg.append('text') .attr('id', 'chartSubtitle') .attr('x', m.left) .attr('y', 82) .text(comment); const x = d3.scaleLinear() .domain([0, 11]) .range([m.left + 37.5, w - m.right]); const y = d3.scaleLinear() .domain(d3.extent(data, d => d[1])) .range([h - m.bottom, m.top]); const line = d3.line() .x((d, i) => x(i)) .y(d => y(d[1])) .curve(d3.curveMonotoneX); const positions = []; for (let j = 0; j < Math.ceil(data.length / 12); j++) { const yearlyData = data.filter((d, i) => i >= (j * 12) && i < ((j + 1) * 12)); svg.append('path') .datum(yearlyData) .attr('d', line) .style('stroke', j == Math.ceil(data.length / 12) - 1 ? '#18DC5A' : keyboardColor.default) .style('stroke-width', j == Math.ceil(data.length / 12) - 1 ? 2.5 : 2) .style('fill', 'none') .style('opacity', j == Math.ceil(data.length / 12) - 1 ? 1 : 0.5); svg.append('text') .attr('x', x(0) - 5) .attr('y', checkOverlapping(positions, y(yearlyData[0][1]) + 4)) .style('fill', j == Math.ceil(data.length / 12) - 1 ? '#18DC5A' : keyboardColor.default) .style('font-size', '12px') .style('font-weight', j == Math.ceil(data.length / 12) - 1 ? 'bold' : 'default') .style('text-anchor', 'end') .text(yearlyData[0][0].split('-')[0]); positions.push(y(yearlyData[0][1]) + 4); }; // A very simple first-level collision detection. // Works well enough for the presented charts. function checkOverlapping(positions, y) { for (const position of positions) { if (Math.abs(position - y) < 10) { if (position > y) { return checkOverlapping(positions, y - 1); } else { return checkOverlapping(positions, y + 1); }; }; }; return y; } return svg.node(); }37:T4e9,data = { const data = [ { year: 2017, quarter: 1, streams: 17879715331, users: 132e6 }, { year: 2017, quarter: 2, streams: 19051788406, users: 138e6 }, { year: 2017, quarter: 3, streams: 18990787874, users: 149e6 }, { year: 2017, quarter: 4, streams: 19357733059, users: 160e6 }, { year: 2018, quarter: 1, streams: 19600363629, users: 157e6 }, { year: 2018, quarter: 2, streams: 21143431069, users: 180e6 }, { year: 2018, quarter: 3, streams: 21275636211, users: 191e6 }, { year: 2018, quarter: 4, streams: 21851636264, users: 207e6 }, { year: 2019, quarter: 1, streams: 21942609475, users: 217e6 }, { year: 2019, quarter: 2, streams: 22026375401, users: 232e6 }, { year: 2019, quarter: 3, streams: 22380110213, users: 248e6 }, { year: 2019, quarter: 4, streams: 22895438248, users: 271e6 }, { year: 2020, quarter: 1, streams: 24598565271, users: 286e6 }, { year: 2020, quarter: 2, streams: 21998702891, users: 299e6 }, { year: 2020, quarter: 3, streams: 23216260141, users: 320e6 } ]; data.forEach((d, i) => { d.streamsPerCapita = d.streams / d.users; d.songs = (30 + 30 * (i / (data.length - 1))) * 1e6; d.date = new Date(d.year, (d.quarter - 1) * 3, 1); }); return data; }38:Tde9,dailyDataComments = [ { weeknum: 9, type: '← [studio album release]', comment: '÷ by Ed Sheeran' }, { weeknum: 11, type: '← [mixtape release]', comment: 'More Life by Drake' }, { weeknum: 15, type: '← [studio album release]', comment: 'Damn by Kendrick Lamar' }, { weeknum: 29, type: '← [death of an artist]', comment: 'Chester Bennington has passed away' }, { weeknum: 34, type: '← [single release]', comment: 'Look What You Made Me Do', subcomment: 'by Taylor Swift' }, { weeknum: 51, type: '← [Christmas]', comment: '' }, { weeknum: 68, type: '← [studio album release]', comment: 'KOD by J. Cole' }, { weeknum: 69, type: '← [studio album release]', comment: 'Beerbongs & Bentleys by Post Malone' }, { weeknum: 77, type: '← [death of an artist]', comment: 'XXXTentacion has passed away' }, { weeknum: 78, type: '← [studio album release]', comment: 'Scorpion by Drake' }, { weeknum: 83, type: '← [studio album release]', comment: 'Astroworld by Travis Scott' }, { weeknum: 85, type: '← [studio album release]', comment: 'Sweetener by Ariana Grande' }, { weeknum: 87, type: '← [studio album release]', comment: 'Kamikaze by Eminem' }, { weeknum: 91, type: '← [studio album release]', comment: 'Tha Carter V by Lil Wayne' }, { weeknum: 97, type: '← [studio album release]', comment: 'Origins by Imagine Dragons' }, { weeknum: 100, type: '← [studio album release]', comment: 'Dummy Boy by 6ix9ine' }, { weeknum: 104, type: '← [Christmas]', comment: '' }, { weeknum: 110, type: '← [studio album release]', comment: 'Thank U, Next by Ariana Grande' }, { weeknum: 117, type: '← [studio album release]', comment: 'When We All Fall Asleep, Where Do', subcomment: 'We Go? by Billie Eilish' }, { weeknum: 124, type: '← [studio album release]', comment: 'Igor by Tyler, the Creator' }, { weeknum: 132, type: '← [studio album release]', comment: 'No.6 Collaborations Project', subcomment: 'by Ed Sheeran' }, { weeknum: 138, type: '← [studio album release]', comment: 'Lover by Taylor Swift' }, { weeknum: 140, type: '← [studio album release]', comment: "Hollywood's Bleeding by Post Malone" }, { weeknum: 147, type: '← [studio album release]', comment: 'Jesus Is King by Kanye West' }, { weeknum: 156, type: '← [Christmas]', comment: '' }, { weeknum: 158, type: '← [studio album release]', comment: 'Rare by Selena Gomez' }, { weeknum: 159, type: '← [studio album release]', comment: 'Music to Be Murdered By', subcomment: 'by Eminem' }, { weeknum: 163, type: '← [single release]', comment: 'No Time to Die by Billie Eilish' }, { weeknum: 165, type: '← [studio album release]', comment: 'YHLQMDLG by Bad Bunny' }, { weeknum: 166, type: '← [studio album release]', comment: 'Eternal Atake by Lil Uzi Vert' }, { weeknum: 168, type: '← [studio album release]', comment: 'After Hours by The Weeknd' }, { weeknum: 174, type: '← [mixtape release]', comment: 'Dark Lane Demo Tapes by Drake' }, { weeknum: 178, type: '← [studio album release]', comment: 'Chromatica by Lady Gaga' }, { weeknum: 184, type: '← [studio album release]', comment: 'Legends Never Die by Juice Wrld' }, { weeknum: 186, type: '← [studio album release]', comment: 'Folklore by Taylor Swift' }, { weeknum: 191, type: '← [single release]', comment: 'Ice Cream by BLACKPINK' }, { weeknum: 196, type: '← [studio album release]', comment: 'The Album by BLACKPINK' }, { weeknum: 200, type: '← [studio album release]', comment: 'Positions by Ariana Grande' } ]39:T6f1,styles = html` `3a:[{"id":"7dcaf477050335f2953227512900f721d8f94c02508a5b184a422257a2c60e193ce7eaccfa41790c8b3d6ba50bb770c6c7b17e9ead5bdfc6b6f606f8335ba6f0","href":"https://static.observableusercontent.com/files/7dcaf477050335f2953227512900f721d8f94c02508a5b184a422257a2c60e193ce7eaccfa41790c8b3d6ba50bb770c6c7b17e9ead5bdfc6b6f606f8335ba6f0","name":"daily_data@1.csv","type":"text/csv","lastModified":1605736395690.273,"size":117686}] 2f:{"title":"Has the pandemic affected our listening habits?","cells":[{"id":0,"value":"md`# Has the pandemic affected our listening habits?\n\n🎶 + 🦠 = ... 🎶`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"md`---\n## Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"md`---\n## High-level trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"md`As always in this series of posts, we are looking at the biggest music hits, according to Spotify\\\\*. Let's start with a simple question: **are we listening more?**\n\nYou can zoom in the charts by clicking a button in the right top corner of each one of them, to focus on the numbers in comparison to either 1st quarter of 2017 or 3rd quarter of 2020.\n\n*The data for Monthly Active Users (MAU) comes from Statista. For information about the Spotify's data, please head to the previous posts in this collection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"chart = html`\n

\n ${[configStreams, configMonthlyActiveUsers, configStreamsPerCapita].map(config => makeZoomableBarChart(data, x, xAxis, config))}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2875,"value":"lineCharts = html`\n

\n ${[\n { variable: 'valence', comment: '2020 seems to be the happiest year overall.' },\n { variable: 'energy', comment: 'Generally, in 2020 we listened to less energetic songs than in previous years.' },\n { variable: 'tempo', comment: 'Quite similar to previous years.' },\n { variable: 'duration', comment: 'Recently we seem to be listening to shorter and shorter songs.' },\n { variable: 'speechiness', comment: 'Quite similar to previous years.' }\n ].map(d => makeLineChart(d.variable, d.comment))}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2647,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"md`Surprise, surprise! The day we most often listen to the biggest music hits (by far!) was Friday. It's also interesting to see how particular events are impacting the number of streams (Christmas, I'm looking at you!).\n\nHonestly, I really expected a change of the pattern in the second quarter of 2020, after the pandemic began, but it didn't have a lot of impact on our listening habits.\n\nIt seems like Friday will always remain Friday.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"md`### Zoomable bar charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"w = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"h = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"m = ({top: 130, right: 50, bottom: 65, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"chartDims = ({width: w - m.right - m.left, height: h - m.top - m.bottom})","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"min = ({x: x.range()[0], y: m.top})","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"max = ({x: x.range()[1], y: h - m.bottom})","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"zoomDuration = 1150","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"xname = 'date'","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"month = d => d3.timeFormat('%m')(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"quarter = d => Math.floor((month(d) - 1) / 3) + 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"year = d => d3.timeFormat('%Y')(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"x = d3.scaleBand()\n .domain(data.map(d => d[xname]))\n .range([m.left, w - m.right])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"xAxis = g => g.attr('transform', `translate(0, ${max.y})`)\n .attr('class', 'x axis')\n .call(\n d3.axisBottom(x)\n .tickFormat(d => quarter(d) == 1 ? `${year(d)}Q${quarter(d)}` : `Q${quarter(d)}`)\n )\n .call(g => g.select('.domain').remove())\n .call(g => g.selectAll('.tick > line').remove())\n .call(\n g => g.selectAll('.tick')\n .style('font-weight', function() {\n return d3.select(this)\n .text()\n .indexOf('Q') > 0 ? 'bold' : 'normal';\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`---\n#### Number of streams`","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"configStreams = ({\n header: {\n title: 'Generally, the total number of streams is',\n highlight: 'increasing...',\n subtitle: '17.9B in 2017Q1 → 23.2B in 2020Q3 (+30%)'\n },\n color: {\n default: 'lightgray',\n highlighted: '#5EED8E'\n },\n labelFormat: d => Math.round(10 * d / 1e9) / 10 + 'B',\n x: xname,\n y: 'streams'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"md`---\n#### Number of monthly active users`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"configMonthlyActiveUsers = ({\n header: {\n title: '...but so is the number of monthly active users.',\n highlight: '',\n subtitle: '132M in 2017Q1 → 320M in 2020Q3 (+142%)'\n },\n color: {\n default: 'lightgray',\n highlighted: '#5EED8E'\n },\n labelFormat: d => Math.round(d / 1e6) + 'M',\n x: xname,\n y: 'users'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"md`---\n#### Number of streams *per capita*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"configStreamsPerCapita = ({\n header: {\n title: 'As a result, streams per capita are',\n highlight: 'decreasing.',\n subtitle: '135 in 2017Q1 → 73 in 2020Q3 (-46%)'\n },\n color: {\n default: 'lightgray',\n highlighted: '#FF4D88'\n },\n labelFormat: d => Math.round(d),\n x: xname,\n y: 'streamsPerCapita'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1860,"value":"md`---\n### Keyboard chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"rowHeight = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":2019,"value":"colWidth = keyboardDims.width / 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1870,"value":"keyboardDims = ({\n width: w - keyboardMargin.left - keyboardMargin.right,\n height: rowHeight * d3.max(dailyData, d => d.weeknum)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2041,"value":"marginRatio = 0.35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"keyboardMargin = ({top: 200, right: w * marginRatio, bottom: 125, left: w * marginRatio})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"r = d3.scaleLinear()\n // .domain(d3.extent(dailyData, d => d.streams))\n .domain(d3.extent(dailyData, d => d.streams).map(d => d - minDailyStreams))\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2494,"value":"minDailyStreams = d3.min(dailyData, d => d.streams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"barWidth = d3.scaleLinear()\n .domain(d3.extent(groupedDailyData, d => d[1]))\n .range([0, marginRatio * w * 0.4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2548,"value":"keyboardColor = ({\n background: 'rgba(255, 255, 255, 0.1)',\n default: 'rgba(255, 77, 136, 0.8)',\n highlighted: 'rgba(94, 237, 142, 0.8)'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2581,"value":"addWeekdaysLegend = (g, left, top) => g.append('g')\n .attr('id', 'weekdaysLegend')\n .attr('transform', `translate(${left}, ${top})`)\n .selectAll()\n .data(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])\n .join('text')\n .attr('dx', (d, i) => i * colWidth)\n .text(d => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2974,"value":"md`---\n### Line charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2735,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"dailyData = d3.csvParse(await FileAttachment('daily_data@1.csv').text(), (d, i) => {\n return {\n date: d3.timeParse('%d/%m/%Y')(d.date),\n weekday: d.weekday == 'Monday' ? 0\n : d.weekday == 'Tuesday' ? 1\n : d.weekday == 'Wednesday' ? 2\n : d.weekday == 'Thursday' ? 3\n : d.weekday == 'Friday' ? 4\n : d.weekday == 'Saturday' ? 5\n : d.weekday == 'Sunday' ? 6\n : -999,\n weeknum: +d.weeknum,\n streams: +d.streams,\n danceability: +d.danceability,\n energy: +d.energy,\n valence: +d.valence,\n tempo: +d.tempo,\n duration: +d.duration,\n loudness: +d.loudness,\n speechiness: +d.speechiness,\n acousticness: +d.acousticness\n }\n}).filter((d, i) => i > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2707,"value":"average = valueKey => {\n return d3.rollups(\n dailyData,\n v => d3.mean(v, v => v[valueKey]),\n k => d3.timeFormat('%Y-%m-01')(k.date)\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2356,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2100,"value":"groupedDailyData = {\n const data = d3.rollups(dailyData, v => d3.sum(v, d => d.streams), d => d.weeknum);\n data.push([data.length + 1, d3.min(data, d => d[1])]);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"// YEAR - SONGS - SOURCE\n// ---- - ----- - ------\n// 2017 - 30M - https://www.ft.com/content/cd99b95e-d8ba-11e6-944b-e7eb37a6aa8e\n// 2018 - 40M - https://newsroom.spotify.com/company-info/ (Web Archive)\n// 2019 - 50M - https://newsroom.spotify.com/company-info/ (Web Archive)\n// 2020 - 60M - https://newsroom.spotify.com/company-info/ (access: 15.11.2020)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1597,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"md`---\n### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}