31:Tf5b,chartRadial = { 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 II', 'subtitle'); svg.append('g') .call(addDescription, description); svg.call(addLegend); const g = svg.append('g') .selectAll('g') .data(dataGrouped) .join('g') .attr('transform', (d, i) => positionRadialSong(i)); const lines = g.selectAll('path') .data(d => [d]) .join('path') .attr('class', 'line-bar') .attr('d', lineRadial) .attr('stroke', 'orange') .attr('stroke-width', 0) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('stroke-dasharray', setStrokeDasharray); const transformButton = svg.append('g') .style('cursor', 'pointer') .style('pointer-events', 'none') .style('opacity', 0) .call(addTransformButton, transformLines); svg.append('g') .style('cursor', 'pointer') .call(addPlayButton, animateLines); function animateLines() { d3.select(this).transition().duration(500).style('opacity', 0).remove(); transformButton.call(animateTransformButton); lines .interrupt() .transition() .duration(d => d.length * weekDuration) .delay(d => timeDelay(d[0].first_appearance)) .ease('radial') .attr('stroke-dashoffset', 0) .on('start', function(d) { d3.select(this).attr('stroke-width', 4); addRadialLabels(this.parentNode, d, d => d.length * weekDuration, 0); }) .on('end', function(d) { const dateToFilterBy = new Date(2019, 11, 30); if (d3.max(d, d => d.date) < dateToFilterBy.setDate(dateToFilterBy.getDate() - 7)) { d3.select(this).attr('stroke', 'lightgray'); }; }); } function transformLines() { transformButton.call(alterTransformButtonToTransformLines, backToLines); let j = 0; lines.interrupt() .each(function(d) { d3.select(this) .attr('stroke-dasharray', 0) .attr('stroke-dashoffset', 0) .transition() .duration(transformDuration) .attrTween('d', pathTween(lineWeekPercSmall(d), 4)) .attr('stroke-width', 6.5) .attr('stroke-linecap', 'butt'); d3.select(this.parentNode) .transition() .duration(transformDuration) .attr('transform', `translate(0, ${yj(j)})`); d3.select(this.parentNode) .selectAll('text, a') .transition() .duration(250) .style('opacity', 0) .on('end', (d, i) => { if (i == 0) addBarChartLabels(this.parentNode, d); }) .remove(); j += 1; }); svg.call(addBarChartColumnHeaders); } function backToLines() { transformButton.call(alterTransformButtonToBackToLines, transformLines, svg); lines .interrupt() .each(function(d) { d3.select(this.parentNode) .selectAll('text, a') .transition() .duration(transformDuration * 0.2) .style('opacity', 0) .remove(); d3.select(this) .transition() .duration(transformDuration) .attrTween('d', pathTween(lineRadial(d), 4)) .attr('stroke-width', 4) .on('end', function() { d3.select(this).attr('stroke-linecap', 'round'); addRadialLabels(this.parentNode, d, () => transformDuration * 0.4, 15); }); g .transition() .duration(transformDuration) .attr('transform', (d, i) => positionRadialSong(i)); }); } return svg.node(); }32:Te32,chart = { const svg = d3.create('svg') .attr('id', 'chart') .attr('viewBox', [0, 0, w, hAlternative]); const title = svg.append('g'); title.append('g') .call(addTitle, 'Spotify Charts'); title.append('g') .call(addTitle, 'The Anatomy of Hit Songs: Chapter II', 'subtitle'); svg.append('g') .call(addDescription, description); const axis = svg.append('g').style('opacity', 0); axis.call(xAxis); const yAxis = svg.append('g').style('opacity', 0); yAxis.call(yAxisPercAlternative); svg.call(addLineLegend); const gradient = DOM.uid(); svg.append('linearGradient') .attr('id', gradient.id) .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 0) .attr('y1', hAlternative - m.bottom) .attr('x2', 0) .attr('y2', m.top) .selectAll('stop') .data(d3.ticks(0, 1, 10)) .join('stop') .attr('offset', d => d) .attr('stop-color', color.interpolator()); const g = svg.append('g') .selectAll('g') .data(dataGrouped) .join('g'); const lines = g.selectAll('path') .data(d => [d]) .join('path') .attr('class', 'line-bar') .attr('d', lineWeekPercAlternative) .attr('stroke', gradient) .attr('stroke-width', 4) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('stroke-dasharray', function() { const l = d3.select(this).node().getTotalLength(); d3.select(this).attr('stroke-dashoffset', l); return `${l} ${l}`; }); svg.append('g') .style('cursor', 'pointer') .call(addPlayButton, animateLines); // svg.append('g') // .style('cursor', 'pointer') // .call(addTransformButton, transformLines); // svg.append('g') // .style('cursor', 'pointer') // .call(addBackToLinesButton, backToLines); function animateLines() { axis.transition().duration(1000).style('opacity', 1); yAxis.transition().duration(1000).style('opacity', 1); d3.select(this).transition().duration(500).style('opacity', 0).remove(); lines .interrupt() .transition() .duration(d => d.length * weekDuration) .delay(d => timeDelay(d[0].first_appearance)) .ease(d3.easeLinear) .attr('stroke-dashoffset', 0) .attr('stroke-width', 1.5) .style('opacity', 0.6); } function transformLines() { // custom iterator let j = 0; lines.interrupt() .each(function(d) { d3.select(this) .transition() .duration(transformDuration) .attr('d', lineWeekPercSmall) .attr('stroke-width', 6.5) .attr('stroke-linecap', 'butt'); d3.select(this.parentNode) .transition() .duration(transformDuration) .attr('transform', `translate(0, ${yj(j)})`); j += 1; }); axis.transition() .duration(transformDuration) .call(xAxisBar); } function backToLines() { lines .interrupt() .each(function(d) { d3.select(this) .transition() .duration(transformDuration) .attr('d', lineWeekPerc) .attr('stroke-width', 2) .on('end', function() { d3.select(this).attr('stroke-linecap', 'round'); }); d3.select(this.parentNode) .transition() .duration(transformDuration) .attr('transform', 'translate(0, 0)'); }); axis.transition() .duration(transformDuration) .call(xAxis); } return svg.node(); }33:T1568,chartRadialColored = { 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 II', 'subtitle'); // svg.append('g') // .call(addDescription, description); const g = svg.append('g') .selectAll('g') .data(dataGrouped) .join('g') .attr('transform', (d, i) => positionRadialSong(i)); svg.call(addLineLegend); const lines = g.selectAll('path') .data(d => [d]) .join('path') .attr('class', 'line-bar') .attr('d', lineRadial) .attr('stroke', 'orange') .attr('stroke-width', 0) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('stroke-dasharray', function() { const l = d3.select(this).node().getTotalLength(); d3.select(this).attr('stroke-dashoffset', l); return `${l} ${l}`; }) .attr('data-artist', d => d[0].artist) .attr('data-song', d => d[0].name) .attr('data-weeks', d => d.length) .attr('data-first-appearance', d => d[0].first_appearance); svg.append('g') .style('cursor', 'pointer') .call(addPlayButton, animateLines); function animateLines() { d3.select(this).transition().duration(500).style('opacity', 0).remove(); lines.each(function(d) { d3.select(this) .transition() .duration(0) //.delay(timeDelay(d[0].first_appearance)) .on('start', function(d) { //addRadialLabels(this.parentNode, d, () => weekDuration * d.length, 0); addRadialLabels(this.parentNode, d, () => 500, 15) }); }); let iii = 0; const c = d3.interpolate(positiveColor, negativeColor); for (const path of svg.selectAll('path').nodes()) { const artist = path.getAttribute('data-artist'); const song = path.getAttribute('data-song'); const weeks = path.getAttribute('data-weeks'); const firstAppearance = new Date(path.getAttribute('data-first-appearance')); const dataQuads = quads(samples(path, 1)); const dataFiltered = data.filter(d => d.artist == artist & d.name == song); let j = 0, fd; svg.selectAll() .data(dataQuads) .enter().append('g') .attr('transform', () => positionRadialSong(iii)) .append('path') .style('stroke', function(d, i) { fd = dataFiltered[Math.floor(j / dataQuads.length * dataFiltered.length)]; j += 1; return color(fd.perc); }) .style('fill', function(d) { return d3.select(this).style('stroke'); }) // .transition() // .duration(250) // .delay((d, i) => 0.025 * (i * (weeks / dataQuads.length) * weekDuration + timeDelay(firstAppearance))) // .duration((d, i) => weekDuration * weeks / d.length) // .delay((d, i) => i * (weeks / dataQuads.length) * weekDuration + timeDelay(firstAppearance)) .attr('d', function(d) { return lineJoin(d[0], d[1], d[2], d[3], 4); }) .style('opacity', 0) .transition() .duration(2500) .style('opacity', 1); iii += 1; }; } // Sample the SVG path uniformly with the specified precision. function samples(path, precision) { var n = path.getTotalLength(), t = [0], i = 0, dt = precision; while ((i += dt) < n) t.push(i); t.push(n); return t.map(function(t) { var p = path.getPointAtLength(t), a = [p.x, p.y]; a.t = t / n; return a; }); } // Compute quads of adjacent points [p0, p1, p2, p3]. function quads(points) { return d3.range(points.length - 1).map(function(i) { var a = [points[i - 1], points[i], points[i + 1], points[i + 2]]; a.t = (points[i].t + points[i + 1].t) / 2; return a; }); } // Compute stroke outline for segment p12. function lineJoin(p0, p1, p2, p3, width) { var u12 = perp(p1, p2), r = width / 2, a = [p1[0] + u12[0] * r, p1[1] + u12[1] * r], b = [p2[0] + u12[0] * r, p2[1] + u12[1] * r], c = [p2[0] - u12[0] * r, p2[1] - u12[1] * r], d = [p1[0] - u12[0] * r, p1[1] - u12[1] * r]; if (p0) { // clip ad and dc using average of u01 and u12 var u01 = perp(p0, p1), e = [p1[0] + u01[0] + u12[0], p1[1] + u01[1] + u12[1]]; a = lineIntersect(p1, e, a, b); d = lineIntersect(p1, e, d, c); } if (p3) { // clip ab and dc using average of u12 and u23 var u23 = perp(p2, p3), e = [p2[0] + u23[0] + u12[0], p2[1] + u23[1] + u12[1]]; b = lineIntersect(p2, e, a, b); c = lineIntersect(p2, e, d, c); } return "M" + a + "L" + b + " " + c + " " + d + "Z"; } // Compute intersection of two infinite lines ab and cd. function lineIntersect(a, b, c, d) { var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3, y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3, ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21); return [x1 + ua * x21, y1 + ua * y21]; } // Compute unit vector perpendicular to p01. function perp(p0, p1) { var u01x = p0[1] - p1[1], u01y = p1[0] - p0[0], u01d = Math.sqrt(u01x * u01x + u01y * u01y); return [u01x / u01d, u01y / u01d]; } return svg.node(); }34:Td29,spotifyHrefs = ({ 'Shape of You': 'https://open.spotify.com/album/7oJa8bPFKVbq4c7NswXHw8', 'HUMBLE.': 'https://open.spotify.com/album/745wm87LGZxRYeyGM0z96J', 'Despacito - Remix': 'https://open.spotify.com/track/5CtI0qwDJkDQGwXD1H1cLb', 'Despacito (Featuring Daddy Yankee)': 'https://open.spotify.com/track/4aWmUDTfIPGksMNLV2rQP2', 'Mi Gente': 'https://open.spotify.com/album/1ZJtkYBzRb7drznu3UYb3k', 'Look What You Made Me Do': 'https://open.spotify.com/album/6zOWPakelVDXWeGAiOJXb2', 'Too Good At Goodbyes - Edit': 'https://open.spotify.com/playlist/3NVi2UFscbdC9r5G3czffO', 'rockstar': 'https://open.spotify.com/album/4AabsQ6plH3OmdE6BWI04j', 'Havana (feat. Young Thug)': 'https://open.spotify.com/track/0ofbQMrRDsUaVKq2mGLEAb', "God's Plan": 'https://open.spotify.com/track/61T2H6w0ggQdhCvVegLl99', 'Call Out My Name': 'https://open.spotify.com/track/09mEdoA6zrmBPgTEN5qXmN', 'Nice For What': 'https://open.spotify.com/album/1ZGxGu4fMROqmZsFSoepeE', 'Psycho (feat. Ty Dolla $ign)': 'https://open.spotify.com/album/1Val8NiAXyp2yTBiwZ53Ju', 'Better Now': 'https://open.spotify.com/track/7dt6x5M1jzdTEt8oCbisTK', 'This Is America': 'https://open.spotify.com/album/7arx9qPJexCsDz67El4qvk', 'One Kiss (with Dua Lipa)': 'https://open.spotify.com/album/7GEzhoTiqcPYkOprWQu581', 'All Mine': 'https://open.spotify.com/track/3U21A07gAloCc4P7J8rxcn', 'SAD!': 'https://open.spotify.com/album/06cVDouWVOcPYAW6w7KOWO', 'Nonstop': 'https://open.spotify.com/track/4pQiWe7SzoQdGF6z8ZoZ9v', "Don’t Matter To Me": 'https://open.spotify.com/track/6G8kHiVZ1jW7vHMPVRNZU0', 'In My Feelings': 'https://open.spotify.com/track/2G7V7zsVDxg1yRsu7Ew9RJ', 'The Ringer': 'https://open.spotify.com/track/2jt2WxXMCD4zjACthkJQVE', 'Lucky You (feat. Joyner Lucas)': 'https://open.spotify.com/track/60SdxE8apGAxMiRrpbmLY0', 'I Love It (& Lil Pump)': 'https://open.spotify.com/track/4S8d14HvHb70ImctNgVzQQ', 'Mona Lisa (feat. Kendrick Lamar)': 'https://open.spotify.com/track/0dbTQYW3Ad1FTzIA9t90E8', 'Taki Taki (with Selena Gomez, Ozuna & Cardi B)': 'https://open.spotify.com/album/0ZHyvPke0EcVt6rYA8Ins3', 'MIA (feat. Drake)': 'https://open.spotify.com/album/0p0W4RXcnc59jgatcdZozO', 'thank u, next': 'https://open.spotify.com/track/3e9HZxeyfWwjeyPAMmWSSQ?si=AxaxfefJTByt0Yog9xV93A', 'Wow.': 'https://open.spotify.com/album/5RyUSKWzBY0aTZd9WX9MXQ', 'Sunflower - Spider-Man: Into the Spider-Verse': 'https://open.spotify.com/album/47LpgGVshd0tbFSbm9tTLb', '7 rings': 'https://open.spotify.com/album/03D36t8ODrA8ATvoTStU9P', 'Con Calma': 'https://open.spotify.com/album/1otwHKoQ5KPaiekpYk4tWh', 'bad guy': 'https://open.spotify.com/track/2Fxmhks0bxGSBdJ92vM42m', 'ME! (feat. Brendon Urie of Panic! At The Disco)': 'https://open.spotify.com/album/6tHLalOVUNJYJlNYkRlNjC', "I Don't Care (with Justin Bieber)": 'https://open.spotify.com/album/5Nux7ozBJ5KJ02QYWwrneR', 'Señorita': 'https://open.spotify.com/album/2ZaX1FdZCwchXl1QZiD4O4', 'Circles': 'https://open.spotify.com/album/75n7rjlC1fxezRtoMQmtL5', 'HIGHEST IN THE ROOM': 'https://open.spotify.com/album/2uDTi1PlpSpvAv7IRAoAEU', 'Dance Monkey': 'https://open.spotify.com/album/5i6CS5XcLZGLgaNCKlJvc2', 'Lose You To Love Me': 'https://open.spotify.com/album/3tBkjgxDqAwss76O1YHsSY', 'everything i wanted': 'https://open.spotify.com/album/4i3rAwPw7Ln2YrKDusaWyT' })35:T55b,addBarChartLabels = function(that, d) { const label = d3.select(that).append('a') .attr('href', spotifyHrefs[d[0].name]) .attr('target', '_blank') .append('text') .attr('class', 'label-artist') .attr('x', w * 0.17) .attr('y', 3.5) .attr('text-anchor', 'start') .style('opacity', 0) .text(d[0].artist); label.transition() .duration(transformDuration - 250 - transformDuration * 0.25) .delay(transformDuration * 0.75) .style('opacity', 1); label.append('tspan') .attr('class', 'label-song') .text(' – ' + cleanName(d[0].name)); d3.select(that).append('text') .attr('class', 'label-song') .attr('x', w * 0.45 - 5) .attr('y', 3.5) .attr('text-anchor', 'end') .style('opacity', 0) .text(d.length) .transition() .duration(transformDuration - 250 - transformDuration * 0.25) .delay(transformDuration * 0.75) .style('opacity', 1); d3.select(that).append('text') .attr('class', 'label-song') .attr('x', w * 0.16 - 5) .attr('y', 3.5) .attr('text-anchor', 'end') .style('opacity', 0) .text(d3.timeFormat('%Y-%m-%d')(d[0].first_appearance)) .transition() .duration(transformDuration - 250 - transformDuration * 0.25) .delay(transformDuration * 0.75) .style('opacity', 1); }36:T5e3,addBarChartColumnHeaders = function(svg) { svg.selectAll('text.first-appearance-holder') .data([dataGrouped]) .join('text') .attr('class', 'label-song first-appearance-holder') .attr('x', w * 0.16 - 5) .attr('y', m.top - 17.5) .attr('text-anchor', 'end') .style('opacity', 0) .text('FIRST PLACE ON') .transition() .duration(transformDuration - 250 - transformDuration * 0.25) .delay(transformDuration * 0.75) .style('opacity', 1); const artistSongHolder = svg.selectAll('text.artist-song-holder') .data([dataGrouped]) .join('text') .attr('class', 'label-song artist-song-holder') .attr('x', w * 0.17) .attr('y', m.top - 17.5) .style('opacity', 0) .text('ARTIST'); artistSongHolder.append('tspan').attr('class', 'label-song').text(' – SONG') artistSongHolder.transition() .duration(transformDuration - 250 - transformDuration * 0.25) .delay(transformDuration * 0.75) .style('opacity', 1); svg.selectAll('text.weeks-holder') .data([dataGrouped]) .join('text') .attr('class', 'label-song weeks-holder') .attr('x', w * 0.45 - 23.5) .attr('y', m.top - 15) .style('opacity', 0) .text('WEEKS ON THE LIST') .transition() .duration(transformDuration - 250 - transformDuration * 0.25) .delay(transformDuration * 0.75) .style('opacity', 1); }37:Tb35,addLegend = svg => { const dataGray = d3.range(0, 53 * 0.6, 1).map(i => {return {week: i}}); const dataOrange = d3.range(0, 53 * 0.6, 1).map(i => {return {week: i}}); const legend = svg.selectAll('g.legend') .data([dataGray]) .join('g') .attr('transform', `translate(${w * 0.8 - 55}, ${h * 0.08})`) .attr('class', 'legend'); legend.selectAll('path.legend-gray') .data([dataGray]) .join('g') .attr('class', 'legend-gray') .call( g => g.selectAll('path') .data(d => [d]) .join('path') .datum(d => d) .attr('class', 'legend-gray') .attr('d', lineRadial) .attr('stroke', 'lightgray') .attr('stroke-width', 4) .attr('stroke-linecap', 'round') .style('fill', 'none') ) .call( g => g.selectAll('.weeks') .data(d => [d]) .join('text') .attr('class', 'label-song weeks') .attr('text-anchor', 'end') .attr('x', 12.5) .attr('y', -1.5) .style('font-size', '7px') .text('CONSECUTIVE WEEKS') .append('tspan') .attr('x', 12.5) .attr('dy', 10) .text('ON THE LIST') ) .call( g => g.selectAll('text:not(.weeks)') .data(d => [d]) .join('text') .attr('class', 'label-artist') .attr('text-anchor', 'middle') .attr('x', 0) .attr('y', -42.5) .text('DROPPED OUT') .append('tspan') .attr('x', 0) .attr('dy', 12.5) .text('OF THE LIST') ) .call( g => g.selectAll('text.date') .data(d => [d]) .join('text') .attr('class', 'label-song date') .attr('text-anchor', 'middle') .attr('x', 0) .attr('y', 40) .style('font-size', '8px') .text('DATE WHEN A SONG') .append('tspan') .attr('x', 0) .attr('dy', 11) .text('REACHED THE 1ST PLACE') ); legend.selectAll('g.legend-orange') .data([dataOrange]) .join('g') .attr('transform', `translate(125)`) .attr('class', 'legend-orange') .call( g => g.selectAll('path') .data(d => [d]) .join('path') .datum(d => d) .attr('class', 'legend-orange') .attr('d', lineRadial) .attr('stroke', 'orange') .attr('stroke-width', 4) .attr('stroke-linecap', 'round') .style('fill', 'none') ) .call( g => g.selectAll('text:not(.weeks)') .data(d => [d]) .join('text') .attr('class', 'label-artist') .attr('text-anchor', 'middle') .attr('x', 0) .attr('y', -42.5) .text('STILL ON') .append('tspan') .attr('x', 0) .attr('dy', 12.5) .text('THE LIST') ); }38:T826,addLineLegend = svg => { const dataGray = d3.range(0, 8, 1).map(d => { return {perc: 100, week: d}; }); const dataOrange = d3.range(0, 8, 1).map(d => { return {perc: 100, week: d}; }); const legend = svg.selectAll('g.legend') .data([dataGray]) .join('g') .attr('transform', `translate(${w * 0.8 - 100}, ${-h * 0.145})`) .attr('class', 'legend'); legend.selectAll('path.legend-gray') .data([dataGray]) .join('g') .attr('class', 'legend-gray') .call( g => g.selectAll('path') .data(d => [d]) .join('path') .datum(d => d) .attr('class', 'legend-gray') .attr('d', lineWeekPercAlternative) .attr('stroke', positiveColor) .attr('stroke-width', 4) .attr('stroke-linecap', 'round') .style('fill', 'none') ) .call( g => g.selectAll('text:not(.weeks)') .data(d => [d]) .join('text') .attr('class', 'label-song') .attr('text-anchor', 'middle') .attr('x', 80) .attr('y', 230) .text('100% OF INITIAL') .append('tspan') .attr('x', 80) .attr('dy', 12.5) .text('POPULARITY') ); legend.selectAll('g.legend-orange') .data([dataOrange]) .join('g') .attr('transform', `translate(100)`) .attr('class', 'legend-orange') .call( g => g.selectAll('path') .data(d => [d]) .join('path') .datum(d => d) .attr('class', 'legend-orange') .attr('d', lineWeekPercAlternative) .attr('stroke', 'orange') .attr('stroke-width', 4) .attr('stroke-linecap', 'round') .style('fill', 'none') ) .call( g => g.selectAll('text:not(.weeks)') .data(d => [d]) .join('text') .attr('class', 'label-song') .attr('text-anchor', 'middle') .attr('x', 80) .attr('y', 230) .text('0% OF INITIAL') .append('tspan') .attr('x', 80) .attr('dy', 12.5) .text('POPULARITY') ); }39:T411,alterTransformButtonToTransformLines = function(transformButton, callback) { transformButton .on('click', callback) .selectAll('text') .data(['TRANSFORM', 'INTO', 'RADIAL CHART']) .transition() .duration(transformDuration * 0.5) .style('opacity', 0) .transition() .duration(transformDuration * 0.5) .delay(transformDuration * 0.5) .style('opacity', 1) .on('start', function() { d3.select(this).text(d => d); }); transformButton.selectAll('rect') .transition() .duration(transformDuration * 0.5) .style('opacity', 0) .remove(); transformButton.append('path') .datum(d3.range(0, 53, 1).map(i => {return {week: i}})) // 52 weeks in a year .attr('d', lineRadial) .attr('stroke', 'orange') .attr('stroke-width', 4) .style('fill', '#333333') .style('opacity', 0) .transition() .duration(transformDuration * 0.5) .delay(transformDuration) .style('opacity', 1); }3a:T4df,alterTransformButtonToBackToLines = function(transformButton, callback, svg) { transformButton .on('click', callback) .selectAll('text') .data(['TRANSFORM', 'INTO', 'BAR CHART']) .transition() .duration(transformDuration * 0.5) .style('opacity', 0) .transition() .duration(transformDuration * 0.5) .delay(transformDuration * 0.5) .style('opacity', 1) .on('start', function() { d3.select(this).text(d => d); }); transformButton .select('path') .transition() .duration(transformDuration * 0.5) .style('opacity', 0) .remove(); transformButton .selectAll('rect') .data([15, 45, 30]) .join('rect') .attr('width', 10) .attr('height', d => d) .attr('x', (d, i) => -17.5 + i * 12.5) .attr('y', d => 25 + 5 - d) .style('fill', 'lightgray') .style('opacity', 0) .transition() .duration(transformDuration * 0.5) .delay(transformDuration) .style('opacity', 1); svg.selectAll('.weeks-holder, .artist-song-holder, .first-appearance-holder') .transition() .duration(transformDuration * 0.2).style('opacity', 0).remove(); }3b:T4f0,html`