28:null 29:["$","title",null,{"children":"🎵 TikTok on the $pot 🟢 | Columbia Data Viz Sp21 | Observable"}] 2f:T47c0,chart = { var svg = d3.create("svg") .attr("width", width) .attr("height", height) /* Brush & Zoom area chart block to work with mulit-line charts. Combining d3-brush and d3-zoom to implement Focus + Context. b The focus chart is the main larger one where the zooming occurs. The context chart is the smaller one below where the brush is used to specify a focused area. */ // sets margins for both charts var focusChartMargin = { top: 20, right: 20, bottom: 170, left: 60 }; var contextChartMargin = { top: 360, right: 20, bottom: 90, left: 60 }; // width of both charts var chartWidth = width - focusChartMargin.left - focusChartMargin.right; // height of either chart var focusChartHeight = height - focusChartMargin.top - focusChartMargin.bottom; var contextChartHeight = height - contextChartMargin.top - contextChartMargin.bottom; // bootstraps the d3 parent selection svg .append("svg") .attr("width", chartWidth + focusChartMargin.left + focusChartMargin.right) .attr("height", focusChartHeight + focusChartMargin.top + focusChartMargin.bottom) .append("g") .attr("transform", "translate(" + focusChartMargin.left + "," + focusChartMargin.top + ")") .attr("overflow", "visible"); // function to parse date field var parseTime = d3.timeParse("%0m/%0d/%y"); var fixOutOfBounds = d3.scaleLinear() .domain([0, 820]) .range([0, 730]); var otherFormatTime = d3.timeFormat("%-m/%-d/%y"); //group all dates to get range for x axis later var dates = []; for (var q = 0; q < date_strings.length; q++) { dates.push(parseTime(date_strings[q])); } // set the width of both x axis var xFocus = d3.scaleTime().range([0, chartWidth]); var xContext = d3.scaleTime().range([0, chartWidth]); // set the height of both y axis var yFocus = d3.scaleLinear().range([focusChartHeight, 0]); var yContext = d3.scaleLinear().range([contextChartHeight, 0]); // create both x axis to be rendered var xAxisFocus = d3 .axisBottom(xFocus) .ticks(10) .tickFormat(d3.timeFormat("%b %Y")); var xAxisContext = d3 .axisBottom(xContext) .ticks(24) .tickFormat(d3.timeFormat("%-m/%y")); // create the one y axis to be rendered var yAxisFocus = d3.axisLeft(yFocus).tickFormat(d => d/1000000 + " M"); // build brush var brush = d3 .brushX() .extent([ [0, -10], [chartWidth, contextChartHeight], ]) .on("brush end", brushed); // build zoom for the focus chart // as specified in "filter" - zooming in/out can be done by pinching on the trackpad while mouse is over focus chart // zooming in can also be done by double clicking while mouse is over focus chart var zoom = d3 .zoom() .scaleExtent([1, Infinity]) .translateExtent([ [0, 0], [chartWidth, focusChartHeight], ]) .extent([ [0, 0], [chartWidth, focusChartHeight], ]) .on("zoom", zoomed) // .filter(() => d3.event.ctrlKey || d3.event.type === "mousedown"); .filter(() => d3.event.ctrlKey || d3.event.type === "dblclick" || d3.event.type === "mousedown"); // create a line for focus chart var lineFocus = d3 .line() .defined(function (d) { return d[1] !== null; }) // .defined(function(d) { return d[1]; }) // .x(d => xFocus(parseTime(d.date))) .x(d => xFocus(parseTime(d[0]))) .y(d => yFocus(d[1])); // create line for context chart var lineContext = d3 .line() .defined(function (d) { return d[1] !== null; }) // .x(d => xContext(parseTime(d.date))) .x(d => xContext(parseTime(d[0]))) .y(d => yContext(d[1])); // es lint disabled here so react won't warn about not using variable "clip" /* eslint-disable */ // clip is created so when the focus chart is zoomed in the data lines don't extend past the borders var clip = svg .append("defs") .append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("width", chartWidth) .attr("height", focusChartHeight) .attr("x", 0) .attr("y", 0); // append the clip var focusChartLines = svg .append("g") .attr("class", "focus") .attr("transform", "translate(" + focusChartMargin.left + "," + focusChartMargin.top + ")") .attr("clip-path", "url(#clip)"); /* eslint-enable */ // create focus chart var focus = svg .append("g") .attr("class", "focus") .attr("transform", "translate(" + focusChartMargin.left + "," + focusChartMargin.top + ")"); // create context chart var context = svg .append("g") .attr("class", "context") .attr("transform", "translate(" + contextChartMargin.left + "," + (contextChartMargin.top + 50) + ")"); // add data info to axis xFocus.domain(d3.extent(dates)); xContext.domain(d3.extent(dates)); // console.log(xFocus.domain()[0], typeof xFocus.domain()[0], xFocus.domain()[1], typeof xFocus.domain()[1]); //get max Y axis value by searching for the highest conversion rate var maxYAxisValue = -Infinity; var maxYForFocus = -Infinity; function setYFocus(rr,d,f) { var r = [Math.max(0,Math.floor(fixOutOfBounds(rr[0]))),Math.min(Math.floor(fixOutOfBounds(rr[1])),730)]; if (f == 1) r = [Math.max(0,Math.floor(rr[0])),Math.min(Math.floor(rr[1]),730)]; maxYAxisValue = -Infinity; maxYForFocus = -Infinity; for (let key of Object.keys(data)) { // d = ["01/01/19", 12345888] let maxYFocus = Math.ceil(d3.max(data[key]["streams"], // d => d[1] function (d) { if (date_numbs[d[0]] >= r[0] && date_numbs[d[0]] <= r[1]) return d[1]; else return 0; } )); let maxYAxisValuePerBucket = Math.ceil(d3.max(data[key]["streams"], d => d[1])); if (!(isNaN(maxYAxisValuePerBucket))) maxYAxisValue = Math.max(maxYAxisValuePerBucket, maxYAxisValue); if (!(isNaN(maxYFocus))) maxYForFocus = Math.max(maxYFocus, maxYForFocus); } if (d == 0) yFocus.domain([0,maxYAxisValue]); else yFocus.domain([0,maxYForFocus]); return [0,maxYForFocus + 500000]; } yFocus.domain([0, 17223237]); // the one we want to change <<< yContext.domain(yFocus.domain()); // add axis to focus chart focus .append("g") .attr("class", "x-axis") .attr("transform", "translate(0," + focusChartHeight + ")") .call(xAxisFocus); focus .append("g") .attr("class", "y-axis") .call(yAxisFocus); // get list of bucket names var bucketNames = []; for (let key of Object.keys(data)) { bucketNames.push(key); } function colors(x) { if (x.hasOwnProperty("tiktok")) { return purple; } return green; } // go through data and create/append lines to both charts for (let key of Object.keys(data)) { let bucket = data[key]; // CHART LINES // OG focusChartLines .append("path") .datum(bucket["streams"]) .attr("class", "line") .attr("fill", "none") .attr("stroke", d => colors(bucket)) .attr("stroke-width", 1.5) .attr("d", lineFocus); context .append("path") .datum(bucket["streams"]) .attr("class", "line") .attr("fill", "none") // .attr("opacity", `0.8`) .attr("stroke", d => colors(bucket)) .attr("stroke-width", 0.8) .attr("d", lineContext); focusChartLines .append("path") .datum(bucket["streams_tt"]) .attr("class", "line") .attr("fill", "none") .attr("stroke", pink) .attr("stroke-width", 1.5) .attr("d", lineFocus); context .append("path") .datum(bucket["streams_tt"]) .attr("class", "line") .attr("fill", "none") .attr("stroke", pink) .attr("stroke-width", 0.8) .attr("d", lineContext); focusChartLines .append("path") .datum(bucket["streams_no_tt"]) .attr("class", "line") .attr("fill", "none") .attr("stroke", purple) .attr("stroke-width", 1.5) .attr("d", lineFocus); context .append("path") .datum(bucket["streams_no_tt"]) .attr("class", "line") .attr("fill", "none") .attr("stroke", purple) .attr("stroke-width", 0.8) .attr("d", lineContext); } // add x axis to context chart (y axis is not needed) context .append("g") .attr("class", "x-axis") .attr("transform", "translate(0," + contextChartHeight + ")") .call(xAxisContext); // add bush to context chart var contextBrush = context .append("g") .attr("class", "brush") .call(brush); // style brush resize handle var brushHandlePath = d => { var e = +(d.type === "e"), x = e ? 1 : -1, y = contextChartHeight + 10; return ("M" + 0.5 * x + "," + y + "A6,6 0 0 " + e + " " + 6.5 * x + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + 0.5 * x + "," + 2 * y + "Z" + "M" + 2.5 * x + "," + (y + 8) + "V" + (2 * y - 8) + "M" + 4.5 * x + "," + (y + 8) + "V" + (2 * y - 8) ); }; var brushHandle = contextBrush .selectAll(".handle--custom") .data([{ type: "w" }, { type: "e" }]) .enter() .append("path") .attr("class", "handle--custom") .attr("stroke", "#000") .attr("cursor", "ew-resize") .attr("d", brushHandlePath); // overlay the zoom area rectangle on top of the focus chart var rectOverlay = svg .append("rect") .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr("class", "zoom") .attr("width", chartWidth) .attr("height", focusChartHeight) .attr("transform", "translate(" + focusChartMargin.left + "," + focusChartMargin.top + ")") .call(zoom) // tooltip vvv .on("mousemove", focusMouseMove) .on("click", toggleFollowingMouse) .on("mouseover", focusMouseOver) .on("mouseout", focusMouseOut); var mouseLine = focus .append("path") // create vertical line to follow mouse .attr("class", "mouse-line") .attr("stroke", "#303030") .attr("stroke-width", 2) .attr("opacity", "0"); var tooltipFrozen = 0; // var hoveringOnTopOfTooltip = 0; var tooltip = focus .append("g") .attr("class", "tooltip-wrapper") .attr("display", "none"); var tooltipBackground = tooltip.append("rect") .attr("fill", "#e8e8e8") // #ABEBC6 // .attr("fill", "#99ffbb") .attr("stroke","black") .attr("stroke-width","1.5") .attr("opacity", "0.9"); var tooltipText = tooltip.append("text"); contextBrush.call(brush.move, [0, chartWidth / 2]); // focus chart x label focus .append("text") .attr("transform", "translate(" + chartWidth / 2 + " ," + (focusChartHeight + focusChartMargin.top + 25) + ")") .style("text-anchor", "middle") .style("font-size", "18px") .text("Time"); // focus chart y label focus .append("text") .attr("text-anchor", "middle") .attr("transform", "translate(" + (-focusChartMargin.left + 20) + "," + focusChartHeight / 2 + ")rotate(-90)") .style("font-size", "18px") .text("Streams"); function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom // added v tooltip.attr("display", "none"); focus.selectAll(".tooltip-line-circles").remove(); mouseLine.attr("opacity", "0"); // added ^ var s = d3.event.selection || xContext.range(); xFocus.domain(s.map(xContext.invert, xContext)); yFocus.domain(setYFocus([date_numbs[otherFormatTime(xFocus.domain()[0])],date_numbs[otherFormatTime(xFocus.domain()[1])]],1,1)); focus.selectAll("g.y-axis") .call(yAxisFocus); focusChartLines.selectAll(".line").attr("d", lineFocus); focus.select(".x-axis").call(xAxisFocus); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity.scale(chartWidth / (s[1] - s[0])).translate(-s[0], 0)); brushHandle .attr("display", null) .attr("transform", (d, i) => "translate(" + [s[i], -contextChartHeight - 20] + ")"); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush // added v tooltip.attr("display", "none"); focus.selectAll(".tooltip-line-circles").remove(); mouseLine.attr("opacity", "0"); // added ^ var t = d3.event.transform; xFocus.domain(t.rescaleX(xContext).domain()); focusChartLines.selectAll(".line").attr("d", lineFocus); focus.select(".x-axis").call(xAxisFocus); var brushSelection = xFocus.range().map(t.invertX, t); focus.selectAll("g.y-axis") .call(yAxisFocus); yFocus.domain( setYFocus(brushSelection,1,0)); context.select(".brush").call(brush.move, brushSelection); brushHandle .attr("display", null) .attr("transform", (d, i) => "translate(" + [brushSelection[i], -contextChartHeight - 20] + ")"); } function toggleFollowingMouse() { tooltipFrozen = (tooltipFrozen + 1) % 2; console.log("change selected to "+tooltipFrozen); } var bboxR = 0; var bboxL = 0; // var tooltipOnRL = 0; // 0 = L, 1 = R function focusMouseMove() { if (tooltipFrozen != 0) { var mouse = d3.mouse(this); if ((mouse[0] >= bboxL) && (mouse[0] <= bboxR)) { console.log("within bounding box"); } } else { tooltip.attr("display", null); var mouse = d3.mouse(this); var dateOnMouse = xFocus.invert(mouse[0]); // get the dates on either of the mouse cord var day = 60 * 60 * 24 * 1000; var d0 = dateOnMouse; var d1 = new Date(dateOnMouse.getTime() + day); mutable closestDate; if (d0 < xFocus.domain()[0]) { mutable closestDate = otherFormatTime(d1); } else if (d1 > xFocus.domain()[1]) { mutable closestDate = otherFormatTime(d0); } else { // decide which date is closest to the mouse mutable closestDate = otherFormatTime(dateOnMouse - d0 > d1 - dateOnMouse ? d1 : d0); } var nearestDateYValues = groupValuesByX[mutable closestDate]; var nearestDateXCord = xFocus(new Date(mutable closestDate)); mouseLine.attr("d", `M ${nearestDateXCord} 0 V ${focusChartHeight}`).attr("opacity", "1"); tooltipText.selectAll(".tooltip-text-line").remove(); focus.selectAll(".tooltip-line-circles").remove(); var formatTime = d3.timeFormat("%0m/%0d/%y"); var fullstringtime = d3.timeFormat("%B %-d, %Y"); function colorAtDate(song, day) { if (song["streams_tt"][date_numbs[day]][1] != null) { return pink; } else if (song["streams_no_tt"][date_numbs[day]][1] != null) { return purple; } return green; } // TODO var sortedTooltip = []; for (let key of Object.keys(nearestDateYValues)) { focus .append("circle") .attr("class", "tooltip-line-circles") .attr("r", 3) .attr("fill", "#FFFFFF") //c0392b 1DB954 .attr("stroke", "#000000")//stroke="#EAA221" stroke-width="5" .attr("stroke-width", "1") .attr("cx", nearestDateXCord) .attr("cy", yFocus(nearestDateYValues[key])); sortedTooltip.push([colorAtDate(data[key],mutable closestDate),key,nearestDateYValues[key].toFixed(0)]); } tooltipText .append("tspan") .attr("class", "tooltip-text-line") .attr("x", "5") .attr("y", "5") .attr("dy", "13px") .attr("font-weight", "bold") .text(`${fullstringtime(parseTime(mutable closestDate))}`); sortedTooltip.sort(function(x, y){ return d3.ascending(+y[2], +x[2]); }); mutable selectedSongs = [...sortedTooltip]; function shortenToolTip(x) { if(x.length > 20){ return x.substring(0,17) + "..."; } return x; } for (var curr = 0; curr < 5; curr++) { tooltipText .append("tspan") .attr("class", "tooltip-text-line") .attr("x", "5") .attr("dy", `14.25px`) // TODO tooltip text .attr("font-size",`14px`) .attr("fill",`${sortedTooltip[curr][0]}`) .attr("text-anchor","left") .text(`${shortenToolTip(sortedTooltip[curr][1])}` + ` – ${sortedTooltip[curr][2]}`); } tooltipText .append("tspan") .attr("class", "tooltip-text-line") .attr("x", "5") .attr("dy", `10.25px`) .attr("font-size",`12px`) .attr("fill",`dark-grey`) .attr("text-anchor","left") .text(`---------------------------------------------------------------`); for (var curr = 5; curr < sortedTooltip.length; curr++) { tooltipText .append("tspan") .attr("class", "tooltip-text-line") .attr("x", "5") .attr("dy", `12px`) // TODO tooltip text .attr("font-size",`12px`) .attr("fill", `${sortedTooltip[curr][0]}`) .text(`${shortenToolTip(sortedTooltip[curr][1])}` + ` – ${sortedTooltip[curr][2]}`); } var tooltipWidth = tooltipText.node().getBBox().width; var tooltipHeight = tooltipText.node().getBBox().height; var rectOverlayWidth = rectOverlay.node().getBBox().width; tooltipBackground.attr("width", tooltipWidth + 10) .attr("height", tooltipHeight + 10) .attr(); tooltip.attr("transform", "translate(" + (width - 100 - tooltipWidth) + ",0)"); } } function focusMouseOver() { if (tooltipFrozen == 0) { mouseLine.attr("opacity", "1"); tooltip.attr("display", null); } } function focusMouseOut() { if (tooltipFrozen == 0) { mouseLine.attr("opacity", "0"); tooltip.attr("display", "none"); focus.selectAll(".tooltip-line-circles").remove(); } } return svg.node() }30:Te56,md` ## 🧠 Methodology Our first dataset is a collection of Spotify’s daily top 200 U.S. songs based on number of streams. We used Python to scrape this data from the [Spotify Charts website](https://spotifycharts.com/regional/us/daily/latest). We then used the [Spotify API](https://developer.spotify.com/documentation/web-api/) to collect the additional audio features. Each row has the song name, artist name, charting date, chart ranking, and number of streams. Our second dataset is a collection of the monthly top 100(ish) TikTok audios. We used Python to scrape this data from [Tokboard](https://tokboard.com/). Each row has the audio name, link to the audio’s Tiktok page, popularity ranking and month when it was trending. We used Python and Excel for all data cleaning. Because TikTok users can create and name their own sounds at any time, many officially released songs have completely different (and more chaotic) titles on TikTok. We used fuzzy string comparison to automate some of our matching, but we had to manually go through most of the trending TikTok audios to link them to Spotify songs. ## 🎨 Design We used an interactive multi-line chart because we wanted to show the evolution of Spotify streams over time. This allowed us to show songs entering and exiting the charts as well as movement in song rankings on Spotify. We wanted to represent a song’s TikTok trend status in a simple way, so we encoded it in the stroke colors. Users are able to zoom and brush to change the x and y scales of the line chart. These interactions are important because two full years’ worth of data is hard to visualize, and scaling both axes grants users a more granular view of daily song rankings and streams. We previously planned on implementing a stream graph to show our data. We realized it was harder to encode changes in rankings in this way as it does not bode well with the rapid fluctuations in song/audio popularity. ## ⚙️ Implementation We used Observable and D3.js for this project. To optimize performance on the web, we created a .JSON file only populated with non-zero data values. Once it was loaded in Observable, the missing zero values were repopulated. This allowed us to have a small data file and cut down on loading time. ## 📆 Discussion & Future Work The timeline chart was successful in showing long term Spotify trends. Users were excited about our dataset and our visualization topic. There was some confusion over song status - for example, songs that never trended on TikTok versus those that were not trending for a period of time - so we added a legend and a short explanation at the beginning to address this. We also fixed a bug with our tooltips and added a table of the trending songs on the user-selected day with links to TikTok audios. This addresses questions about our data and links our visualization to the TikTok audios users may be interested in. The most common question we received was on causality and if we could tell whether it was TikTok making a Spotify song popular or Spotify influencing TikTok trends. We don’t quite have the answer yet as our visualization is an introductory exploration of this question. We believe that with a wider range of Spotify songs (top 100 instead of top 20), more granular TikTok trend data (with non-broken image and audio links), and more analysis on artist popularity and stream trajectories before and after TikTok trends, we can begin to address this question. We are also interested in further exploring Spotify song metadata to see if there are trends in what kinds of audios are most popular on TikTok. Thanks for a wonderful semester! `31:Tf3b,data = { var toMon = d3.timeFormat("%m"); var toTime = d3.timeParse("%0m/%0d/%y"); // return data_pre_fill; for (let key of Object.keys(data_pre_fill)) { var temp_streams = []; var temp_views = {}; var temp_rank = {}; var temp_delt = {}; var temp_pop = {}; if (data_pre_fill[key].hasOwnProperty("tiktok")) { for (let k of Object.keys(data_pre_fill[key]["tiktok"]["delt_rank"])) temp_delt[toMon(toTime(k))] = data_pre_fill[key]["tiktok"]["delt_rank"][k][1]; for (let k of Object.keys(data_pre_fill[key]["tiktok"]["views"])) temp_views[toMon(toTime(k))] = data_pre_fill[key]["tiktok"]["views"][k][1]; for (let k of Object.keys(data_pre_fill[key]["tiktok"]["#_pop_vids"])) temp_pop[toMon(toTime(k))] = data_pre_fill[key]["tiktok"]["#_pop_vids"][k][1]; for (let k of Object.keys(data_pre_fill[key]["tiktok"]["rank"])) temp_rank[toMon(toTime(k))] = data_pre_fill[key]["tiktok"]["rank"][k][1]; } var tv = []; var tr = []; var td = []; var tp = []; var streams_tt = [] var streams_no_tt = []; for (var d = 0; d < date_strings.length; d++) { //streams_tt.push("test"); if (data_pre_fill[key]["streams"].hasOwnProperty(date_strings[d])) temp_streams.push(data_pre_fill[key]["streams"][date_strings[d]]); else temp_streams.push([date_strings[d],null]); if (data_pre_fill[key].hasOwnProperty("tiktok")) { if (temp_views.hasOwnProperty(toMon(toTime(date_strings[d])))) tv.push([date_strings[d],temp_views[toMon(toTime(date_strings[d]))]]); else tv.push([date_strings[d], null]); if (temp_rank.hasOwnProperty(toMon(toTime(date_strings[d])))) tr.push([date_strings[d],temp_rank[toMon(toTime(date_strings[d]))]]); else tr.push([date_strings[d], null]); if (temp_delt.hasOwnProperty(toMon(toTime(date_strings[d])))) td.push([date_strings[d],temp_delt[toMon(toTime(date_strings[d]))]]); else td.push([date_strings[d], null]); if (temp_pop.hasOwnProperty(toMon(toTime(date_strings[d])))) tp.push([date_strings[d],temp_pop[toMon(toTime(date_strings[d]))]]); else tp.push([date_strings[d], null]); if (temp_views.hasOwnProperty(toMon(toTime(date_strings[d]))) || temp_rank.hasOwnProperty(toMon(toTime(date_strings[d]))) || temp_delt.hasOwnProperty(toMon(toTime(date_strings[d]))) || temp_pop.hasOwnProperty(toMon(toTime(date_strings[d])))) { // add to streamstt if (data_pre_fill[key]["streams"].hasOwnProperty(date_strings[d])) streams_tt.push(data_pre_fill[key]["streams"][date_strings[d]]); else streams_tt.push([date_strings[d],null]); streams_no_tt.push([date_strings[d],null]); } else { if (data_pre_fill[key]["streams"].hasOwnProperty(date_strings[d])) streams_no_tt.push(data_pre_fill[key]["streams"][date_strings[d]]); else streams_no_tt.push([date_strings[d],null]); streams_tt.push([date_strings[d],null]); } } else { // if there is no tiktok streams_tt.push([date_strings[d],null]); streams_no_tt.push([date_strings[d],null]); } } data_pre_fill[key]["streams"] = [...temp_streams]; data_pre_fill[key]["streams_no_tt"] = [...streams_no_tt]; data_pre_fill[key]["streams_tt"] = [...streams_tt]; if (data_pre_fill[key].hasOwnProperty("tiktok")) { data_pre_fill[key]["tiktok"]["views"] = [...tv] data_pre_fill[key]["tiktok"]["#_pop_vids"] = [...tp] data_pre_fill[key]["tiktok"]["delt_rank"] = [...td] data_pre_fill[key]["tiktok"]["rank"] = [...tr] } } return data_pre_fill; }32:T1c7f,date_strings = ['1/1/19','1/2/19','1/3/19','1/4/19','1/5/19','1/6/19','1/7/19','1/8/19','1/9/19','1/10/19','1/11/19','1/12/19','1/13/19','1/14/19','1/15/19','1/16/19','1/17/19','1/18/19','1/19/19','1/20/19','1/21/19','1/22/19','1/23/19','1/24/19','1/25/19','1/26/19','1/27/19','1/28/19','1/29/19','1/30/19','1/31/19','2/1/19','2/2/19','2/3/19','2/4/19','2/5/19','2/6/19','2/7/19','2/8/19','2/9/19','2/10/19','2/11/19','2/12/19','2/13/19','2/14/19','2/15/19','2/16/19','2/17/19','2/18/19','2/19/19','2/20/19','2/21/19','2/22/19','2/23/19','2/24/19','2/25/19','2/26/19','2/27/19','2/28/19','3/1/19','3/2/19','3/3/19','3/4/19','3/5/19','3/6/19','3/7/19','3/8/19','3/9/19','3/10/19','3/11/19','3/12/19','3/13/19','3/14/19','3/15/19','3/16/19','3/17/19','3/18/19','3/19/19','3/20/19','3/21/19','3/22/19','3/23/19','3/24/19','3/25/19','3/26/19','3/27/19','3/28/19','3/29/19','3/30/19','3/31/19','4/1/19','4/2/19','4/3/19','4/4/19','4/5/19','4/6/19','4/7/19','4/8/19','4/9/19','4/10/19','4/11/19','4/12/19','4/13/19','4/14/19','4/15/19','4/16/19','4/17/19','4/18/19','4/19/19','4/20/19','4/21/19','4/22/19','4/23/19','4/24/19','4/25/19','4/26/19','4/27/19','4/28/19','4/29/19','4/30/19','5/1/19','5/2/19','5/3/19','5/4/19','5/5/19','5/6/19','5/7/19','5/8/19','5/9/19','5/10/19','5/11/19','5/12/19','5/13/19','5/14/19','5/15/19','5/16/19','5/17/19','5/18/19','5/19/19','5/20/19','5/21/19','5/22/19','5/23/19','5/24/19','5/25/19','5/26/19','5/27/19','5/28/19','5/29/19','5/30/19','5/31/19','6/1/19','6/2/19','6/3/19','6/4/19','6/5/19','6/6/19','6/7/19','6/8/19','6/9/19','6/10/19','6/11/19','6/12/19','6/13/19','6/14/19','6/15/19','6/16/19','6/17/19','6/18/19','6/19/19','6/20/19','6/21/19','6/22/19','6/23/19','6/24/19','6/25/19','6/26/19','6/27/19','6/28/19','6/29/19','6/30/19','7/1/19','7/2/19','7/3/19','7/4/19','7/5/19','7/6/19','7/7/19','7/8/19','7/9/19','7/10/19','7/11/19','7/12/19','7/13/19','7/14/19','7/15/19','7/16/19','7/17/19','7/18/19','7/19/19','7/20/19','7/21/19','7/22/19','7/23/19','7/24/19','7/25/19','7/26/19','7/27/19','7/28/19','7/29/19','7/30/19','7/31/19','8/1/19','8/2/19','8/3/19','8/4/19','8/5/19','8/6/19','8/7/19','8/8/19','8/9/19','8/10/19','8/11/19','8/12/19','8/13/19','8/14/19','8/15/19','8/16/19','8/17/19','8/18/19','8/19/19','8/20/19','8/21/19','8/22/19','8/23/19','8/24/19','8/25/19','8/26/19','8/27/19','8/28/19','8/29/19','8/30/19','8/31/19','9/1/19','9/2/19','9/3/19','9/4/19','9/5/19','9/6/19','9/7/19','9/8/19','9/9/19','9/10/19','9/11/19','9/12/19','9/13/19','9/14/19','9/15/19','9/16/19','9/17/19','9/18/19','9/19/19','9/20/19','9/21/19','9/22/19','9/23/19','9/24/19','9/25/19','9/26/19','9/27/19','9/28/19','9/29/19','9/30/19','10/1/19','10/2/19','10/3/19','10/4/19','10/5/19','10/6/19','10/7/19','10/8/19','10/9/19','10/10/19','10/11/19','10/12/19','10/13/19','10/14/19','10/15/19','10/16/19','10/17/19','10/18/19','10/19/19','10/20/19','10/21/19','10/22/19','10/23/19','10/24/19','10/25/19','10/26/19','10/27/19','10/28/19','10/29/19','10/30/19','10/31/19','11/1/19','11/2/19','11/3/19','11/4/19','11/5/19','11/6/19','11/7/19','11/8/19','11/9/19','11/10/19','11/11/19','11/12/19','11/13/19','11/14/19','11/15/19','11/16/19','11/17/19','11/18/19','11/19/19','11/20/19','11/21/19','11/22/19','11/23/19','11/24/19','11/25/19','11/26/19','11/27/19','11/28/19','11/29/19','11/30/19','12/1/19','12/2/19','12/3/19','12/4/19','12/5/19','12/6/19','12/7/19','12/8/19','12/9/19','12/10/19','12/11/19','12/12/19','12/13/19','12/14/19','12/15/19','12/16/19','12/17/19','12/18/19','12/19/19','12/20/19','12/21/19','12/22/19','12/23/19','12/24/19','12/25/19','12/26/19','12/27/19','12/28/19','12/29/19','12/30/19','12/31/19','1/1/20','1/2/20','1/3/20','1/4/20','1/5/20','1/6/20','1/7/20','1/8/20','1/9/20','1/10/20','1/11/20','1/12/20','1/13/20','1/14/20','1/15/20','1/16/20','1/17/20','1/18/20','1/19/20','1/20/20','1/21/20','1/22/20','1/23/20','1/24/20','1/25/20','1/26/20','1/27/20','1/28/20','1/29/20','1/30/20','1/31/20','2/1/20','2/2/20','2/3/20','2/4/20','2/5/20','2/6/20','2/7/20','2/8/20','2/9/20','2/10/20','2/11/20','2/12/20','2/13/20','2/14/20','2/15/20','2/16/20','2/17/20','2/18/20','2/19/20','2/20/20','2/21/20','2/22/20','2/23/20','2/24/20','2/25/20','2/26/20','2/27/20','2/28/20','2/29/20','3/1/20','3/2/20','3/3/20','3/4/20','3/5/20','3/6/20','3/7/20','3/8/20','3/9/20','3/10/20','3/11/20','3/12/20','3/13/20','3/14/20','3/15/20','3/16/20','3/17/20','3/18/20','3/19/20','3/20/20','3/21/20','3/22/20','3/23/20','3/24/20','3/25/20','3/26/20','3/27/20','3/28/20','3/29/20','3/30/20','3/31/20','4/1/20','4/2/20','4/3/20','4/4/20','4/5/20','4/6/20','4/7/20','4/8/20','4/9/20','4/10/20','4/11/20','4/12/20','4/13/20','4/14/20','4/15/20','4/16/20','4/17/20','4/18/20','4/19/20','4/20/20','4/21/20','4/22/20','4/23/20','4/24/20','4/25/20','4/26/20','4/27/20','4/28/20','4/29/20','4/30/20','5/1/20','5/2/20','5/3/20','5/4/20','5/5/20','5/6/20','5/7/20','5/8/20','5/9/20','5/10/20','5/11/20','5/12/20','5/13/20','5/14/20','5/15/20','5/16/20','5/17/20','5/18/20','5/19/20','5/20/20','5/21/20','5/22/20','5/23/20','5/24/20','5/25/20','5/26/20','5/27/20','5/28/20','5/29/20','5/30/20','5/31/20','6/1/20','6/2/20','6/3/20','6/4/20','6/5/20','6/6/20','6/7/20','6/8/20','6/9/20','6/10/20','6/11/20','6/12/20','6/13/20','6/14/20','6/15/20','6/16/20','6/17/20','6/18/20','6/19/20','6/20/20','6/21/20','6/22/20','6/23/20','6/24/20','6/25/20','6/26/20','6/27/20','6/28/20','6/29/20','6/30/20','7/1/20','7/2/20','7/3/20','7/4/20','7/5/20','7/6/20','7/7/20','7/8/20','7/9/20','7/10/20','7/11/20','7/12/20','7/13/20','7/14/20','7/15/20','7/16/20','7/17/20','7/18/20','7/19/20','7/20/20','7/21/20','7/22/20','7/23/20','7/24/20','7/25/20','7/26/20','7/27/20','7/28/20','7/29/20','7/30/20','7/31/20','8/1/20','8/2/20','8/3/20','8/4/20','8/5/20','8/6/20','8/7/20','8/8/20','8/9/20','8/10/20','8/11/20','8/12/20','8/13/20','8/14/20','8/15/20','8/16/20','8/17/20','8/18/20','8/19/20','8/20/20','8/21/20','8/22/20','8/23/20','8/24/20','8/25/20','8/26/20','8/27/20','8/28/20','8/29/20','8/30/20','8/31/20','9/1/20','9/2/20','9/3/20','9/4/20','9/5/20','9/6/20','9/7/20','9/8/20','9/9/20','9/10/20','9/11/20','9/12/20','9/13/20','9/14/20','9/15/20','9/16/20','9/17/20','9/18/20','9/19/20','9/20/20','9/21/20','9/22/20','9/23/20','9/24/20','9/25/20','9/26/20','9/27/20','9/28/20','9/29/20','9/30/20','10/1/20','10/2/20','10/3/20','10/4/20','10/5/20','10/6/20','10/7/20','10/8/20','10/9/20','10/10/20','10/11/20','10/12/20','10/13/20','10/14/20','10/15/20','10/16/20','10/17/20','10/18/20','10/19/20','10/20/20','10/21/20','10/22/20','10/23/20','10/24/20','10/25/20','10/26/20','10/27/20','10/28/20','10/29/20','10/30/20','10/31/20','11/1/20','11/2/20','11/3/20','11/4/20','11/5/20','11/6/20','11/7/20','11/8/20','11/9/20','11/10/20','11/11/20','11/12/20','11/13/20','11/14/20','11/15/20','11/16/20','11/17/20','11/18/20','11/19/20','11/20/20','11/21/20','11/22/20','11/23/20','11/24/20','11/25/20','11/26/20','11/27/20','11/28/20','11/29/20','11/30/20','12/1/20','12/2/20','12/3/20','12/4/20','12/5/20','12/6/20','12/7/20','12/8/20','12/9/20','12/10/20','12/11/20','12/12/20','12/13/20','12/14/20','12/15/20','12/16/20','12/17/20','12/18/20','12/19/20','12/20/20','12/21/20','12/22/20','12/23/20','12/24/20','12/25/20','12/26/20','12/27/20','12/28/20','12/29/20','12/30/20','12/31/20'];33:T577,function songsToTable(songs) { mutable selectedSongs; if (songs == "a") return md`Hover over the chart above to wander the 2019-2020 charts! Click to select a date, and double-click to zoom in.`; var rows = []; for (var i = 0; i < songs.length; i++) { var key = songs[i][1]; var newRow = {'Rank':i+1,'Spotify Song Name': key}; newRow["Spotify Streams"] = songs[i][2]; newRow["Spotify Artist"] = data[key]["artist"] if (data[key]['tiktok'] != undefined) { newRow['TikTok Audio Name'] = data[key]['tiktok']['sound']; newRow["TikTok Account"] = data[key]['tiktok']['account']; newRow['TikTok Audio Link'] = data[key]['tiktok']['tiktok_link']; } else { newRow['TikTok Audio Name'] = 'N/A'; newRow["TikTok Account"] = 'N/A'; newRow['TikTok Audio Link'] = 'N/A'; } rows.push(newRow); } return Table(rows, { format: { 'TikTok Audio Name' : x => { if (x == 'N/A') return " "; return x; }, 'TikTok Account' : x => { if (x == 'N/A') return " "; return x; }, 'TikTok Audio Link' : x => { if (x == 'N/A') return " "; var div = document.createElement('DIV'); div.innerHTML = "Link".link(`${x}`); div.firstChild.setAttribute('target','_blank'); return div.firstChild; } } }); };34:[{"id":"b16e5467ec530df6261207f7e2d46c58299d52e59aee2d9739a2081c8b37c908fad0e1f321d46134bbf525d0f355c798c65b0962399ced9a80b618b7b8d1522f","href":"https://static.observableusercontent.com/files/b16e5467ec530df6261207f7e2d46c58299d52e59aee2d9739a2081c8b37c908fad0e1f321d46134bbf525d0f355c798c65b0962399ced9a80b618b7b8d1522f","name":"tiktok_spot.json","type":"application/json","lastModified":1618273044106.502,"size":1704544},{"id":"ce21da92d8612cd7dee08edd445cf179b8fbc6577d6df283b8616416fff24292af99ddfaf13af2c5f933820776904d5113f047b86535ca199bc089d64054f30c","href":"https://static.observableusercontent.com/files/ce21da92d8612cd7dee08edd445cf179b8fbc6577d6df283b8616416fff24292af99ddfaf13af2c5f933820776904d5113f047b86535ca199bc089d64054f30c","name":"music moods.png","type":"image/png","lastModified":1618877746456.415,"size":261985},{"id":"3f6ee646c77af95a5aa93efbdb29e6fd8edbea669a43cfb0e4ff63c14218c5df9a9263f4ebac96aa4319f30f70b2c86fbc0b6258f29822e62dc94c7d921bd78e","href":"https://static.observableusercontent.com/files/3f6ee646c77af95a5aa93efbdb29e6fd8edbea669a43cfb0e4ff63c14218c5df9a9263f4ebac96aa4319f30f70b2c86fbc0b6258f29822e62dc94c7d921bd78e","name":"pudding_best_year_in_music.png","type":"image/png","lastModified":1618878127650.648,"size":564039}] 2c:{"id":"bb382d50701a2bf4","slug":null,"title":"🎵 TikTok on the $pot 🟢","thumbnail":"3556ef60f638a8d49304d6a72fb62f9d339f3cde4fcaff877b214052030dfaaf","access_level":"unlisted","create_time":"$D2021-04-13T00:15:49.463Z","update_time":"$D2021-04-20T23:08:36.219Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":1544,"publish_version":1544,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa3d61cabc35b759","login":"spencerbruce","name":"spencer","avatar_url":"https://avatars-next.observableusercontent.com/abd15b9b0fbec86ec18c25b83cf4a25d903af7a7782e0553e1d439e4e4cf84c3","tier":null}],"members":[{"type":"individual","id":"0907b0191d331c98","login":"abr2165","name":"Alexis Rabkin","avatar_url":"https://avatars-next.observableusercontent.com/125816f99fb99b0465bc7e35145c7ddc337013fb60d918338c76b9c6bc40254d","tier":null,"role":"editor"},{"type":"individual","id":"64f64cf3eadb22df","login":"imanigosserand","name":"Imani Gosserand","avatar_url":"https://avatars-next.observableusercontent.com/a8062c7dadb659d05376576288498850dc1b2380ca88a21962d14fc59654aea9","tier":null,"role":"editor"},{"type":"individual","id":"fa3d61cabc35b759","login":"spencerbruce","name":"spencer","avatar_url":"https://avatars-next.observableusercontent.com/abd15b9b0fbec86ec18c25b83cf4a25d903af7a7782e0553e1d439e4e4cf84c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"🎵 TikTok on the $pot 🟢","cells":[{"id":0,"value":"md`# 🎵 TikTok on the $pot 🟢\n### By: Imani Gosserand (ijg2112), Spencer Bruce (sgb2145), and Alexis Rabkin (abr2165)\n\nHello and welcome to our visual exploration of TikTok and Spotify trends!\n\nOver the past couple of years, Tiktok’s popularity has skyrocketed, and its influence on the music industry has grown with it. We hypothesized that TikTok trends have had an increasing impact on Spotify song’s streams and popularity in the past couple of years.\n\n\nOur scrollable timeline displays Spotify song streams. These songs are highlighted in light blue when there is a corresponding trending TikTok audio, and are highlighted in dark blue for months when that TikTok audio is trending.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"md`### 👀 🔍 Try to $pot our Insights\n- Over time, TikTok audios increasingly dominate the charts - with more dark blue and light blue lines throughout 2020.\n- A certain song gets extremely popular around the same time in both 2019 and 2020 🎅\n- Sometimes a 5+ songs will enter Spotify's Top 20 on the same day... What do they have in common?\n- TikTok is temporary, Spotify is forever 🤝 - Songs trend on Spotify for much longer than they trend on TikTok (more light blue than dark blue)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"md `\n### 🧭 How to Navigate\n- Brush through the last two years of Spotify music using the timeline chart on the bottom or by dragginig along the main chart.\n- Adjust the focal time range in the main chart by dragging the handles on the timeline chart.\n- Hover over the main chart to see the top 20 Spotify songs on each day. \n- Single click to select/deselect a day.\n- Double click on the main chart to zoom in \n\nBelow the vizualization, a table is shown to provide more granular data on the selected date.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"md`## Spotify Streams by TikTok Trend Status (2019-2020)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"html`

${get_legend()}

`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"md`## Top 20 Spotify Songs & their TikTok Audios on ${closestDate}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"viewof songs = {\n selectedSongs;\n return songsToTable(mutable selectedSongs);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`# ✏️ Writeup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`## Introduction\nOver the past couple of years, Tiktok’s popularity has skyrocketed, and the worldwide lockdowns in 2020 further accelerated its growth. TikTok is structured around the creation, use, and reuse of sounds, and the resulting virality of audios creates a great opportunity for song exposure. \n\nAs avid Tiktokers ourselves, we hypothesized that TikTok trends have had an increasing impact on Spotify songs’s streams and popularity. We wanted to visualize Spotify streams and TikTok audio popularity to see if our hypothesis holds true.\n\n## Related Work\nWe were inspired by many other visualizations both in their exploration of changing music and their presentation styles. While there are many visualizations exploring music over time, none explored connections between different audio-listening mediums nor how TikTok influences other platforms.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`[Music Moods and COVID-19](https://observablehq.com/@rjs97/music-moods-covid-19)\n(Spring 2020 DV Final Project)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"md`[The Pudding – The Best Year in Music](https://pudding.cool/projects/music-history/)\n(Tracking songs with time)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"md`\n## ✍🏻 Acknowledgements\n[Observable : Multi Line Chart](https://observablehq.com/@connor-roche/multi-line-chart-focus-context)\n[Observable : Brushing on a Line Chart](https://observablehq.com/@sephcoster/brush-values-on-a-line-chart)\nInspiration:\n- [Music Moods and COVID-19](https://observablehq.com/@rjs97/music-moods-covid-19) \n- [Ivy League COVID-19 Response](https://www.columbiaspectator.com/news/2020/04/13/the-us-and-ivy-league-schools-were-late-to-respond-to-covid-19-data-shows-international-universities-did-better/)\n- [Popularity Bar Chart Race](https://www.youtube.com/watch?v=y3egohrhxZ8)\n- [The Pudding – The Best Year in Music](https://pudding.cool/projects/music-history/)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`-----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`### 💀 Code Graveyard`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"import {legend,swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"data_pre_fill = FileAttachment(\"tiktok_spot.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"date_numbs = {\n var temp = {};\n for (var i = 0; i < date_strings.length; i++) \n temp[date_strings[i]] = i;\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"groupValuesByX = {\n var temp = {};\n for (let key of Object.keys(data)) {\n for (var qw = 0; qw < date_strings.length; qw++) {\n if (!temp.hasOwnProperty(date_strings[qw]))\n temp[date_strings[qw]] = {};\n if(data[key][\"streams\"][qw][1] != null)\n temp[date_strings[qw]][key] = data[key][\"streams\"][qw][1];\n }\n } \n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"mutable selectedSongs = \"a\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"mutable closestDate = \"\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"function get_legend() {\n var colors = [pink, purple ,green]; //hotpink, purple\n \n return swatches({ color: d3.scaleOrdinal([\"Trending on TikTok\",\"Not Trending on TikTok\",\"No TikTok\"], colors)});\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"pink = \"#377694\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"purple = \"#69BAE0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"green = \"#ffa600\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"