31:Tecf,chart = { const svg = d3.create('svg') .attr('id', 'chart') .attr('viewBox', [0, 0, w, h]); const title = svg.append('g'); title.append('g') .call(addTitle, 'Spotify Charts'); title.append('g') .call(addTitle, 'The Anatomy of Hit Songs: Chapter I', 'subtitle'); svg.append('g') .call(xAxisTop); svg.append('g') .call(xAxisBottom); // songs svg.append('g') .selectAll() .data(data.filter(d => d.howManyDays > 0)) .join('line') .attr('x1', d => x(d.premiere) + 3.5) .attr('x2', d => x(d.date) + 3.5) .attr('y1', d => y(d.premiere)) .attr('y2', d => y(d.premiere)) .attr('stroke', d => color(d.howManyDays)) .attr('stroke-width', 3.5) .attr('stroke-linecap', 'round') .style('opacity', 0.75) .append('title') .text(d => `${d.artist} - ${d.name}: ${d.howManyDays} days`); const month = d3.timeFormat('%b'), year = d3.timeFormat('%y'); // diagonal labels (months) svg.append('g') .selectAll() .data(instantHits) .join('text') .attr('class', 'tick') .attr('transform', d => `translate(${x(d.date)}, ${y(d.date) + 12.5})`) .attr('text-anchor', 'end') .style('font-weight', d => month(d.date) == 'Jan' ? 'bold' : 'normal') .text(d => `${month(d.date) == 'Jan' ? "Jan '" + year(d.date) + ': ' : ''} ${Math.round(d.perc * 100)}%`); // legend svg.append('g') .selectAll() .data([30, 180, 360]) .join('g') .attr('transform', (d, i) => `translate(${(i + 6.5) * w * 0.1}, ${m.top * 0.415})`) .call(g => g.append('line') .attr('x1', (-w * 0.075 + 15) * 0.5) .attr('x2', (w * 0.075 - 15) * 0.5) .attr('y1', 0) .attr('y2', 0) .attr('stroke', d => color(d)) .attr('stroke-width', 3.5) .attr('stroke-linecap', 'round') ) .call(g => g.append('text') .attr('class', 'tick') .attr('text-anchor', 'middle') .attr('y', 15) .text(d => `${d < 360 ? 'up to' : ''} ${d} days ${d == 360 ? 'or more' : ''}`) ); svg.append('text') .attr('class', 'tick') .attr('transform', `translate(${7.5 * w * 0.1}, ${m.top * 0.34 - 15})`) .attr('text-anchor', 'middle') .style('font-weight', 400) .style('font-size', '14px') .text('Time from premiere to first'); svg.append('text') .attr('class', 'tick') .attr('transform', `translate(${7.5 * w * 0.1}, ${m.top * 0.34})`) .attr('text-anchor', 'middle') .style('font-weight', 400) .style('font-size', '14px') .text('appearance on Spotify Charts'); // diagonal svg.append('line') .attr('x1', x.range()[0] - 40 * w / h) .attr('x2', x.range()[1]) .attr('y1', y.range()[0] - 40 * h / w) .attr('y2', y.range()[1]) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); svg.append('line') .attr('x1', x.range()[0] - 40 * w / h) .attr('x2', x.range()[0] - 40 * w / h) .attr('y1', y.range()[0] - 40 * h / w) .attr('y2', y.range()[0] - 40 * h / w - 60) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); svg.append('g') .selectAll() .data(diagDesc) .join('text') .each(function(d, i) { d3.select(this).call(describeDiagonal, d, i); }); // percentages in left bottom corner svg.append('g') .selectAll() .data(percDesc) .join('g') .each(function(d, i) { d3.select(this).call(describePercentages, d, i); }); // songs' annotations const songAnnotations = svg.append('g'); for (const song of songsToAnnotate) { songAnnotations.append('g') .call(annotateSong, song); }; return svg.node(); }32:T22f2,alternativeChart = { const svg = d3.create('svg') .attr('id', 'alternativeChart') .attr('viewBox', [0, 0, w, h]); const title = svg.append('g'); title.append('g') .call(addTitle, 'Spotify Charts'); title.append('g') .call(addTitle, 'The Anatomy of Hit Songs: Chapter I', 'subtitle'); svg.append('g') .call(xAxisTopAlternative); // tooltip const tooltip = svg.append('g') .attr('class', 'tooltip') .call( g => g.append('text') .attr('class', 'artist') .attr('x', 15) ) .call( g => g.append('text') .attr('class', 'song') .attr('x', 15) .attr('y', 15) ) .call( g => g.append('text') .attr('class', 'days') .attr('x', 15) .attr('y', 30) ); const songs = svg.append('g'); const month = d3.timeFormat('%b'), year = d3.timeFormat('%y'); // diagonal labels (months) const labels = svg.append('g'); // legend svg.append('g') .selectAll() .data([30, 180, 360]) .join('g') .attr('transform', (d, i) => `translate(${(i + 6.5) * w * 0.1}, ${m.top * 0.415})`) .call(g => g.append('line') .attr('x1', (-w * 0.075 + 15) * 0.5) .attr('x2', (w * 0.075 - 15) * 0.5) .attr('y1', 0) .attr('y2', 0) .attr('stroke', d => color(d)) .attr('stroke-width', 3.5) .attr('stroke-linecap', 'round') ) .call(g => g.append('text') .attr('class', 'tick') .attr('text-anchor', 'middle') .attr('y', 15) .text(d => `${d < 360 ? 'up to' : ''} ${d} days ${d == 360 ? 'or more' : ''}`) ); svg.append('text') .attr('class', 'tick') .attr('transform', `translate(${7.5 * w * 0.1}, ${m.top * 0.34 - 15})`) .attr('text-anchor', 'middle') .style('font-weight', 400) .style('font-size', '14px') .text('Time from premiere to first'); svg.append('text') .attr('class', 'tick') .attr('transform', `translate(${7.5 * w * 0.1}, ${m.top * 0.34})`) .attr('text-anchor', 'middle') .style('font-weight', 400) .style('font-size', '14px') .text('appearance on Spotify Charts'); // diagonal svg.append('line') .attr('x1', x.range()[0] - 40 * w / h) .attr('x2', x.range()[1]) .attr('y1', y.range()[0] - 40 * h / w) .attr('y2', y.range()[1]) .attr('stroke', 'white') .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); svg.append('line') .attr('x1', x.range()[0] - 40 * w / h) .attr('x2', x.range()[0] - 40 * w / h) .attr('y1', y.range()[0] - 40 * h / w) .attr('y2', y.range()[0] - 40 * h / w - 60) .attr('stroke', 'white') .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); // 1 month svg.append('line') .attr('x1', x(new Date(x.domain()[0].setMonth(x.domain()[0].getMonth() + 1))) + 1) .attr('x2', x.range()[1] + 1) .attr('y1', y.range()[0] + 1) .attr('y2', y(new Date(x.domain()[1].setMonth(x.domain()[1].getMonth() - 1))) + 1) .attr('stroke', color.range()[0]) .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); // 6 months svg.append('line') .attr('x1', x(new Date(2017, 6, 1)) + 1) .attr('x2', x.range()[1] + 1) .attr('y1', y.range()[0] + 1) .attr('y2', y(new Date(2019, 6, 1)) + 1) .attr('stroke', color.range()[1]) .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); // 12 months svg.append('line') .attr('x1', x(new Date(2017, 12, 1)) + 1) .attr('x2', x.range()[1] + 1) .attr('y1', y.range()[0] + 1) .attr('y2', y(new Date(2018, 12, 1)) + 1) .attr('stroke', color.range()[2]) .attr('stroke-width', 2) .attr('stroke-linecap', 'round'); svg.append('g') .selectAll() .data(diagDesc) .join('text') .each(function(d, i) { d3.select(this).call(describeDiagonal, d, i); }); // percentages in left bottom corner svg.append('g') .selectAll() .data(percDesc) .join('g') .each(function(d, i) { d3.select(this).call(describePercentages, d, i, 'alternative'); }); tooltip.raise(); function update(date) { let dataSongs, dataLabels; if (date == 'ALL') { dataSongs = data.slice(); dataLabels = instantHits.slice(); } else { dataSongs = data.filter(s => s.premiere.getYear() == new Date(date).getYear() & s.premiere.getMonth() == new Date(date).getMonth()); dataLabels = instantHits.filter(l => l.date.getYear() == new Date(date).getYear() & l.date.getMonth() == new Date(date).getMonth()); }; xDynamic.domain([d3.min(dataSongs, d => d.premiere), d3.max(dataSongs, d => d.premiere)]); yDynamic.domain([d3.min(dataSongs, d => d.premiere), d3.max(dataSongs, d => d.premiere)]); songs .selectAll('g') .data(dataSongs.filter(d => d.howManyDays > 0), d => d.artist + d.name) .join('g') .style('cursor', 'pointer') .call( g => g.selectAll('line') .data(d => [d]) .join( enter => enter.append('line') .attr('x1', d => xDynamic(d.premiere) + 3.5) .attr('x2', d => xDynamic(d.premiere) + x(d.date) - x(d.premiere) + 3.5) .attr('y1', d => yDynamic(d.premiere)) .attr('y2', d => yDynamic(d.premiere)) .attr('stroke', 'white') .attr('stroke-width', 0.5) .attr('stroke-linecap', 'round') .style('pointer-events', 'none') .style('opacity', 0) .call(enter => enter.transition().duration(1250).delay(250).style('opacity', 0.5)), update => update.transition() .duration(1500) .attr('x1', d => xDynamic(d.premiere) + 3.5) .attr('x2', d => xDynamic(d.premiere) + x(d.date) - x(d.premiere) + 3.5) .attr('y1', d => yDynamic(d.premiere)) .attr('y2', d => yDynamic(d.premiere)), exit => exit.remove() ) ) .call( g => g.selectAll('circle.song') .data(d => [d]) .join( enter => enter.append('circle') .attr('class', 'song') .attr('transform', d => `translate(${xDynamic(d.premiere) + x(d.date) - x(d.premiere) + 3.5}, ${yDynamic(d.premiere)})`) .attr('r', 2) .attr('stroke', 'black') .attr('stroke-width', 0.15) .style('fill', d => color(d.howManyDays)) .style('opacity', 0) .call(enter => enter.transition().duration(1250).delay(250).style('opacity', 1)), update => update.transition() .duration(1500) .attr('transform', d => `translate(${xDynamic(d.premiere) + x(d.date) - x(d.premiere) + 3.5}, ${yDynamic(d.premiere)})`), exit => exit.remove()) ) .call( g => g.selectAll('circle.invisible') .data(d => [d]) .join( enter => enter.append('circle') .attr('class', 'invisible') .attr('transform', d => `translate(${xDynamic(d.premiere) + x(d.date) - x(d.premiere) + 3.5}, ${yDynamic(d.premiere)})`) .attr('r', 9) .style('opacity', 0), update => update.transition() .duration(1500) .attr('transform', d => `translate(${xDynamic(d.premiere) + x(d.date) - x(d.premiere) + 3.5}, ${yDynamic(d.premiere)})`), exit => exit.remove() ) ) .on('mouseover', function(d) { d3.select(this).select('circle').attr('r', 5); d3.select(this).select('line').attr('stroke-width', 1); tooltip.interrupt() .attr('transform', d3.select(this).select('circle').attr('transform')) .call(g => g.select('.artist').text(d.artist)) .call(g => g.select('.song').text(d.name)) .call(g => g.select('.days').text(d.howManyDays + ' days')) .transition() .duration(250) .style('opacity', 1); }) .on('mouseout', function(d) { d3.select(this).select('circle').attr('r', 2); d3.select(this).select('line').attr('stroke-width', 0.5); tooltip.interrupt() .transition() .duration(250) .style('opacity', 0); }); labels.selectAll('text') .data(dataLabels) .join('text') .attr('class', 'tick') .attr('transform', d => `translate(${x(d.date)}, ${y(d.date) + 12.5})`) .attr('text-anchor', 'end') .style('font-weight', d => month(d.date) == 'Jan' ? 'bold' : 'normal') .text(d => `${month(d.date) + (month(d.date) == 'Jan' ? ' ' + year(d.date) : '')}: ${Math.round(d.perc * 100)}%`); }; update('ALL'); // I tried to make this chart adjust to selected month - and the following code works, but when there is a song that became a hit after let's say 360 days and it appeared at the end of the month, it goes of out the chart window. If you made it to this point, you can check it by finding the undefined cell down below and changing update's argument to e.g. new Date(2017, 5, 1). return Object.assign(svg.node(), { update }); }33:T5e8,songsToAnnotate = [ {artist: 'Billie Eilish', name: 'bellyache', displayName: 'bellyache', comment: '', dx: 0, dy: 0}, {artist: 'XXXTENTACION', name: 'Slipknot', displayName: '5 songs from the Revenge album', comment: 'the day after his death', dx: 0, dy: -6}, {artist: 'XXXTENTACION', name: 'What in XXXTarnation', displayName: 'What in XXXTarnation', comment: 'the day after his death', dx: 0, dy: -6}, {artist: 'Billie Eilish', name: 'my boy', displayName: 'lovely and my boy', comment: '', dx: 0, dy: 0}, {artist: 'H.E.R.', name: 'Best Part (feat. Daniel Caesar)', displayName: 'Best Part (feat. Daniel Caesar)', comment: '6 days after being nominated for Grammy', dx: 0, dy: -6}, {artist: 'Nipsey Hussle', name: 'Dedication (feat. Kendrick Lamar)', displayName: '4 songs from the Victory Lap album', comment: 'the day after his death', dx: 0, dy: -6}, {artist: 'Doja Cat', name: 'Candy', displayName: 'Candy', comment: 'the day after she released a new album', dx: -90, dy: 12.5}, {artist: 'Kina', name: 'Can We Kiss Forever?', displayName: 'Can We Kiss Forever?', comment: '', dx: -145, dy: -10}, {artist: 'Trevor Daniel', name: 'Falling', displayName: 'Falling', comment: 'after going viral on TikTok', dx: 0, dy: -13.5}, {artist: 'Brett Eldredge', name: 'A Holly Jolly Christmas', displayName: '', comment: '2 Christmas songs on 25 Dec', dx: 0, dy: 0}, {artist: 'Juice WRLD', name: 'Black & White', displayName: 'B&W and Hide', comment: 'the day after his death', dx: 0, dy: 1.5}, ]34:T602,html` `35:[{"id":"5b0e911de75c7b177aee4d884b2a77147c9ca3617b2a4188061ccfb5ccb7edbffa482fc8f37fc716f3cf026c83cde68a772b0972dc5d4fc52d9f7a01b71d0fa9","href":"https://static.observableusercontent.com/files/5b0e911de75c7b177aee4d884b2a77147c9ca3617b2a4188061ccfb5ccb7edbffa482fc8f37fc716f3cf026c83cde68a772b0972dc5d4fc52d9f7a01b71d0fa9","name":"instantHits@1.csv","type":"text/csv","lastModified":1586782600313.585,"size":2715},{"id":"4cd4c6f05ae2dd3bd8602d2743256d99d6b5fae75182570ec958f40826d00642e87d01795efa0cf7b28cdd4261ff69df058f24bffc64930c52dc603203660ce2","href":"https://static.observableusercontent.com/files/4cd4c6f05ae2dd3bd8602d2743256d99d6b5fae75182570ec958f40826d00642e87d01795efa0cf7b28cdd4261ff69df058f24bffc64930c52dc603203660ce2","name":"howLongSpotifyCharts@1.csv","type":"text/csv","lastModified":1586782613450.625,"size":192328}] 2f:{"title":"How long does it take to appear on Spotify Charts?","cells":[{"id":0,"value":"md`# How long does it take to appear on Spotify Charts?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"md`*I only like songs I've heard before... I discover new music every day!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"md`---\nThe rise of digital streaming platforms has transformed the music market extensively. One of the things it enabled is a possibility to gather data on listening habits of millions of people — analysis of such data can provide interesting insights on how we listen to music.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"md`Spotify — one of the key players in the audio streaming industry today — [publishes daily data](https://spotifycharts.com/regional) on the two hundred most streamed songs in a given day. When we merge it with the data acquired through Spotify API we can — for example — study the lifecycle of hit songs; one such approach is presented below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"md`There are almost 3800 tracks that appeared on the list over the last three years (including more than 3200 that had premiere in 2017 or later — they are shown on the chart below) — generally, majority of hit songs become popular instantly; most probably they come from mega-stars who use social media to promote new releases. But there are some examples of songs that became hits long after they were published; the chart below presents an overview of first appearances of hit songs on Spotify Charts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"md`---\nUpdate
14.04.2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"md`After some consideration I've decided to modify chart's appearance in order to make it easier to compare values over time — alternative version is presented below. Now you can also hover over particular circles to reveal information about songs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"w = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"h = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"m = ({top: 225, right: 175, bottom: 60, left: 125})","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"md`---\n### Scales & Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"// Fixed domain to ensure the axes show the full range of dates, including January 2017.\nx = d3.scaleTime()\n //.domain([d3.min(data, d => d.premiere), d3.max(data, d => d.premiere)])\n .domain([new Date(2016, 12, 1), new Date(2019, 12, 1)])\n .range([m.left * 0.85, w - m.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"xDynamic = d3.scaleTime()\n .domain([d3.min(data, d => d.premiere), d3.max(data, d => d.premiere)])\n //.domain([new Date(2016, 12, 1), new Date(2019, 12, 1)])\n .range([m.left * 0.85, w - m.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"xAxisTop = g => g.attr('transform', `translate(0, ${m.top})`)\n .call(\n d3.axisTop(x)\n .tickSizeOuter(0)\n .tickValues(x.ticks().slice(1))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"xAxisTopAlternative = g => g.attr('transform', `translate(0, ${m.top})`)\n .call(\n d3.axisTop(x)\n .tickSizeOuter(0)\n .tickValues([new Date(2017, 1, 1), new Date(2017, 6, 1), new Date(2017, 12, 1)])\n .tickFormat((d, i) => i == 0 ? '30' : i == 1 ? '180' : i == 2 ? '360 days after premiere' : '')\n )\n .call(\n g => g.selectAll('.tick > text').attr('y', -12.5)\n )\n .call(\n g => g.selectAll('.tick > line')\n .data([0, 1, 2])\n .join('line')\n .attr('class', 'dontChange')\n .attr('stroke-width', 2)\n .attr('stroke', d => color.range()[d])\n .attr('stroke-linecap', 'round')\n )\n .call(g => g.select('.domain').remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"xAxisBottom = g => g.attr('transform', `translate(0, ${h - m.bottom})`)\n .call(\n d3.axisBottom(x)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"y = d3.scaleTime()\n //.domain([d3.min(data, d => d.premiere), d3.max(data, d => d.premiere)])\n .domain([new Date(2016, 12, 1), new Date(2019, 12, 1)])\n .range([m.top, h - m.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"yDynamic = d3.scaleTime()\n .domain([d3.min(data, d => d.premiere), d3.max(data, d => d.premiere)])\n //.domain([new Date(2016, 12, 1), new Date(2019, 12, 1)])\n .range([m.top, h - m.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"color = d3.scaleLinear()\n .domain([0, 180, 360])\n .range(['#28CC5F', '#F29D48', '#FF3232'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"//alternativeChart.update('ALL')","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"md`---\n### Annotations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"addTitle = (g, title, type = 'title') => g\n .attr('transform', `translate(${m.left * 0.5}, ${h * 0.075 + (type == 'subtitle' ? 25 : 0)})`)\n .append('text')\n .attr('class', type)\n .text(title)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"diagDesc = [\n \"This line symbolizes three years of songs' premieres.\",\n \"For every month, there is a number on its left side, e.g. 64% for January 2017 —\",\n \"it means that 64% of songs that premiered in that month, appeared on the list instantly, in the day of their premiere.\",\n \"Lines on the right symbolize remaining 36% of songs; precisely, how long it took a given song to enter the list for the first time.\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"describeDiagonal = (text, d, i) => {\n text.attr('class', 'tick')\n .attr('transform', `translate(${x.range()[0] + 7.5 - 40 * w / h}, ${y.range()[0] - (50 - i * 15) - 40 * h / w})`)\n .style('font-weight', i == 0 ? 700 : 400)\n .style('font-size', '12px')\n .text(d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"percDesc = [\n ['67% of hit songs', 'entered Spotify Charts instantly'],\n ['25%', 'up to 30 days after premiere'],\n ['6.3%', 'up to 180 days after premiere'],\n ['1%', 'up to 360 days after premiere'],\n ['0.7%', 'more than 360 days after premiere']\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"describePercentages = (g, d, i, type = 'normal') => {\n const title = g.append('text')\n .attr('transform', `translate(${x.range()[0]}, ${h * (0.66 + i * 0.06)})`)\n .attr('class', 'title')\n .style('font-size', '22px')\n .text(d[0]);\n \n if (type == 'alternative') {\n title.style('fill', i == 0 ? 'white' : i == 4 ? color.range()[2] : color.range()[i - 1]);\n };\n\n g.append('text')\n .attr('transform', `translate(${x.range()[0]}, ${h * (0.66 + i * 0.06) + 25})`)\n .attr('class', 'subtitle')\n .style('font-size', '15px')\n .text(d[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"annotateSong = (g, settings) => {\n const d = data.filter(d => d.artist == settings.artist & d.name == settings.name)[0];\n const holder = g.append('g')\n .attr('class', 'tick')\n .attr('transform', `translate(${x(d.date) + 10 + settings.dx}, ${y(d.premiere) + 2.5 + settings.dy})`);\n \n holder\n .append('text')\n .style('font-weight', 700)\n .text(d.artist)\n .append('tspan')\n .style('font-weight', 400)\n .text(' - ' + settings.displayName);\n\n holder\n .append('text')\n .attr('dy', 12.5)\n .style('font-style', 'italic')\n .text(settings.comment);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = d3.csvParse(await FileAttachment('howLongSpotifyCharts@1.csv').text(), d3.autoType).sort((a, b) => b.premiere - a.premiere)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"dataDynamic = data.slice(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"instantHits = d3.csvParse(await FileAttachment('instantHits@1.csv').text(), d3.autoType).map(d => {\n return {\n date: d3.timeParse('%d-%m-%Y')(d.date),\n mean: d.mean,\n perc: d.perc\n }\n}).filter(d => d.mean == 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"md`---\n### Imports & Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}