31:T35ab,{ var blm_isclicked = false; var last_search = ""; const width = 950; const graph = d3.select(DOM.svg(width, height)); const formatTime = d3.timeFormat("%b %Y"); const bubble_data = blm_bubbleData; const line_data = blm_songData; const [bubbleStartDate, bubbleEndDate] = d3.extent(bubble_data, d => d.date); const [lineStartDate, lineEndDate] = d3.extent(line_data, d => d.date); const [trendStartDate, trendEndDate] = d3.extent(blm_trendData, d => d.date); const text = graph.append("text") .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Search term:") const xAxis = d3.axisBottom() .scale(xScale) .ticks(4) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(yScale) .ticks(10); //************************************************************* translucent trendlines in background function get_static_trend(name) { return graph.append("path") .datum(blm_trendData) .attr("class", "static") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "black") .style("fill-opacity", .04) .style("stroke-opacity", .04) .attr("d", blm_static_trendlines(name)); } get_static_trend("B01"); get_static_trend("B02"); get_static_trend("B03"); get_static_trend("B04"); get_static_trend("B05"); get_static_trend("B06"); get_static_trend("B07"); get_static_trend("B08"); get_static_trend("B09"); get_static_trend("B10"); get_static_trend("B11"); get_static_trend("B12"); //************************************************************* graph.selectAll("vertical_line") .data(line_data) .enter() .append("line") .attr("x1", d => xScale(d.jiggle_date)) .attr("y1", (height - padding.bottom)) .attr("x2", d => xScale(d.jiggle_date)) .attr("y2", d => (height - padding.bottom) - 281) .attr("stroke", d => line_color(d)) .attr("stroke-width", 2) .on("mouseover", d => { var line_title = d.title; var line_artist = d.artist; var line_date = d.raw_date; var line_genre = d.genre; var key_lyric = d.key_lyric; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "4px solid" + line_color(d)) tooltip.append("div") .text(d => line_genre + " (" + line_date + ")") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", line_color(d)); tooltip.append("div") .text(d => line_title + " (" + line_artist + ")") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", line_color(d)); tooltip.append("div") .text(d => "\"" + key_lyric + "\"") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", "#fff"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); }) const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "#fff") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); //************************************************************* graph.selectAll("triangle") .data(bubble_data) .enter() .append('path') .attr('d', tri) .attr('fill', triangle_color) .attr('stroke', triangle_border_color) .attr('stroke-width', 1) .style("fill-opacity", 0.5) .style("stroke-opacity", 1.0) .attr('transform', function(d) { return "translate(" + xScale(d.jiggle_date) + "," + yScale(-0.03) + ")"}) .on("mouseover", d => { var circle_category = d.category; var circle_event = d.event var circle_date = d.raw_date; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "6px solid" + bubble_color) tooltip.append("div") .text(d => circle_date) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", bubble_color); tooltip.append("div") .text(d => circle_event) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", bubble_color); if (last_search != d.search_term) { blm_isclicked = false; last_search = ""; } else { blm_isclicked = true; } //************************************************************* trend line on hover const trend_line = d3.area() .x(e => xScale(e.date)) .y0(yScale(0)) .y1(e => {{ if (d.key == "B01") {return yScale(e.B01)} else if (d.key == "B02") {return yScale(e.B02)} else if (d.key == "B03") {return yScale(e.B03)} else if (d.key == "B04") {return yScale(e.B04)} else if (d.key == "B05") {return yScale(e.B05)} else if (d.key == "B06") {return yScale(e.B06)} else if (d.key == "B07") {return yScale(e.B07)} else if (d.key == "B08") {return yScale(e.B08)} else if (d.key == "B09") {return yScale(e.B09)} else if (d.key == "B10") {return yScale(e.B10)} else if (d.key == "B11") {return yScale(e.B11)} else if (d.key == "B12") {return yScale(e.B12)} }}) graph.selectAll("path.trend").remove() graph.append("path") .datum(blm_trendData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", path_color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", path_color) .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************* trend line on hover text.text("Search term: \"" + d.search_term + "\""); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { if (!blm_isclicked) { graph.selectAll("path.trend").remove(); text.text("Search term:"); } tooltip.style("visibility", "hidden"); }) .on("click", d => { last_search = d.search_term; if (blm_isclicked) { graph.selectAll("path.trend").remove(); text.text("Search term:"); blm_isclicked = false; last_search = ""; } else { blm_isclicked = true; var circle_category = d.category; var circle_event = d.event var circle_date = d.raw_date; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "6px solid" + bubble_color) tooltip.append("div") .text(d => circle_date) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", bubble_color); tooltip.append("div") .text(d => circle_event) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", bubble_color); } //************************************************************* trend line on click const trend_line = d3.area() .x(e => xScale(e.date)) .y0(yScale(0)) .y1(e => {{ if (d.key == "B01") {return yScale(e.B01)} else if (d.key == "B02") {return yScale(e.B02)} else if (d.key == "B03") {return yScale(e.B03)} else if (d.key == "B04") {return yScale(e.B04)} else if (d.key == "B05") {return yScale(e.B05)} else if (d.key == "B06") {return yScale(e.B06)} else if (d.key == "B07") {return yScale(e.B07)} else if (d.key == "B08") {return yScale(e.B08)} else if (d.key == "B09") {return yScale(e.B09)} else if (d.key == "B10") {return yScale(e.B10)} else if (d.key == "B11") {return yScale(e.B11)} else if (d.key == "B12") {return yScale(e.B12)} }}) graph.selectAll("path.trend").remove() graph.append("path") .datum(blm_trendData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", path_color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", path_color) .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************* trend line on click text.text("Search term: \"" + d.search_term + "\""); }); //************************************************************************************************ //********************************************TIMELINE******************************************** //************************************************************************************************ const legend = graph .append('g') .attr('class', 'legend') .attr('transform', `translate(${width - 97}, ${height - 470})`) .selectAll('g') .data(legend_data) .enter() .append('g') .attr('transform', (d, i) => `translate(10, ${i*15})`); legend .append('rect') .attr('width', 9) .attr('height', 9) // .attr('r', 4) // .attr('cx', 4) // .attr('cy', 4) .style('fill', (d, i) => d.color); legend .append('text') .text(d => d.text) .attr('y', 12) .attr('dx', 14) .attr('dy', -4) .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Song Genre") .attr('y', 20) .attr('x', 860) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); // !!!!!!!!!!!!!!!!!!! // graph.append('text') .text("Hover on triangles") .attr('y', 20) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("to highlight corresponding trend.") .attr('y', 20) .attr('x', 680) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Click on triangles") .attr('y', 35) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("for trend to remain highlighted.") .attr('y', 35) .attr('x', 676) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Hover on lines") .attr('y', 50) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("to reveal song information.") .attr('y', 50) .attr('x', 660) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); // !!!!!!!!!!!!!!!!!!!! // graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - padding.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") .text("Google Trend normalized magnitude") .style("text-anchor", "end") .attr("dx", -padding.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }32:T30e4,{ var isclicked = false; var last_search = ""; const width = 950; const graph = d3.select(DOM.svg(width, height)); const formatTime = d3.timeFormat("%b %Y"); const bubble_data = metoo_bubbleData; const line_data = metoo_songData; const [bubbleStartDate, bubbleEndDate] = d3.extent(bubble_data, d => d.date); const [lineStartDate, lineEndDate] = d3.extent(line_data, d => d.date); const [trendStartDate, trendEndDate] = d3.extent(metoo_trendData, d => d.date); const text = graph.append("text") .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Search term:"); const xAxis = d3.axisBottom() .scale(xScale) .ticks(4) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(yScale) .ticks(10); //************************************************************* translucent trendlines in background function get_static_trend(name) { return graph.append("path") .datum(metoo_trendData) .attr("class", "static") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "black") .style("fill-opacity", .04) .style("stroke-opacity", .04) .attr("d", metoo_static_trendlines(name)); } get_static_trend("M01"); get_static_trend("M02"); get_static_trend("M03"); get_static_trend("M04"); get_static_trend("M05"); get_static_trend("M06"); //************************************************************* graph.selectAll("vertical_line") .data(line_data) .enter() .append("line") .attr("x1", d => xScale(d.date)) .attr("y1", (height - padding.bottom)) .attr("x2", d => xScale(d.date)) .attr("y2", d => (height - padding.bottom) - 281) .attr("stroke", d => line_color(d)) .attr("stroke-width", 2) .on("mouseover", d => { var line_title = d.title; var line_artist = d.artist; var line_date = d.raw_date; var line_genre = d.genre; var key_lyric = d.key_lyric; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "4px solid" + line_color(d)) tooltip.append("div") .text(d => line_genre + " (" + line_date + ")") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", line_color(d)); tooltip.append("div") .text(d => line_title + " (" + line_artist + ")") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", line_color(d)); tooltip.append("div") .text(d => "\"" + key_lyric + "\"") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", "#fff"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); }) const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "#fff") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); //************************************************************* graph.selectAll("triangle") .data(bubble_data) .enter() .append('path') .attr('d', tri) .attr('fill', triangle_color) .attr('stroke', triangle_border_color) .attr('stroke-width', 1) .style("fill-opacity", 0.5) .style("stroke-opacity", 1.0) .attr('transform', function(d) { return "translate(" + xScale(d.date) + "," + yScale(-0.03) + ")"}) .on("mouseover", d => { var circle_category = d.category; var circle_event = d.event var circle_date = d.raw_date; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "6px solid" + bubble_color) tooltip.append("div") .text(d => circle_date) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", bubble_color); tooltip.append("div") .text(d => circle_event) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", bubble_color); if (last_search != d.search_term) { isclicked = false; last_search = ""; } else { isclicked = true; } //************************************************************* trend line on hover const trend_line = d3.area() .x(e => xScale(e.date)) .y0(yScale(0)) .y1(e => {{ if (d.key == "M01") {return yScale(e.M01)} else if (d.key == "M02") {return yScale(e.M02)} else if (d.key == "M03") {return yScale(e.M03)} else if (d.key == "M04") {return yScale(e.M04)} else if (d.key == "M05") {return yScale(e.M05)} else if (d.key == "M06") {return yScale(e.M06)} }}) graph.selectAll("path.trend").remove() graph.append("path") .datum(metoo_trendData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", path_color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", path_color) .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************* trend line on hover text.text("Search term: \"" + d.search_term + "\""); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { if (!isclicked) { graph.selectAll("path.trend").remove(); text.text("Search term:"); } tooltip.style("visibility", "hidden"); }) .on("click", d => { last_search = d.search_term; if (isclicked) { graph.selectAll("path.trend").remove(); text.text("Search term:"); isclicked = false; last_search = ""; } else { isclicked = true; var circle_category = d.category; var circle_event = d.event var circle_date = d.raw_date; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "6px solid" + bubble_color) tooltip.append("div") .text(d => circle_date) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", bubble_color); tooltip.append("div") .text(d => circle_event) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", bubble_color); } //************************************************************* trend line on click const trend_line = d3.area() .x(e => xScale(e.date)) .y0(yScale(0)) .y1(e => {{ if (d.key == "M01") {return yScale(e.M01)} else if (d.key == "M02") {return yScale(e.M02)} else if (d.key == "M03") {return yScale(e.M03)} else if (d.key == "M04") {return yScale(e.M04)} else if (d.key == "M05") {return yScale(e.M05)} else if (d.key == "M06") {return yScale(e.M06)} }}) graph.selectAll("path.trend").remove() graph.append("path") .datum(metoo_trendData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", path_color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", path_color) .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************* trend line on click text.text("Search term: \"" + d.search_term + "\""); }); const legend = graph .append('g') .attr('class', 'legend') .attr('transform', `translate(${width - 97}, ${height - 470})`) .selectAll('g') .data(legend_data) .enter() .append('g') .attr('transform', (d, i) => `translate(10, ${i*15})`); legend .append('rect') .attr('width', 9) .attr('height', 9) // .attr('r', 4) // .attr('cx', 4) // .attr('cy', 4) .style('fill', (d, i) => d.color); legend .append('text') .text(d => d.text) .attr('y', 12) .attr('dx', 14) .attr('dy', -4) .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Song Genre") .attr('y', 20) .attr('x', 860) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Hover on triangles") .attr('y', 20) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("to highlight corresponding trend.") .attr('y', 20) .attr('x', 680) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Click on triangles") .attr('y', 35) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("for trend to remain highlighted.") .attr('y', 35) .attr('x', 676) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Hover on lines") .attr('y', 50) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("to reveal song information.") .attr('y', 50) .attr('x', 660) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); //************************************************************************************************ //********************************************TIMELINE******************************************** //************************************************************************************************ graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - padding.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") .text("Google Trend normalized magnitude") .style("text-anchor", "end") .attr("dx", -padding.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }33:T433,md` TW: Depression, Suicide Mental health issues have been covered in popular music much earlier than many other movements of cultural interest have been. 2017 was a particularly difficult year for the music industry, with the suicides of Chris Cornell of Soundgarden and Chester Bennington of Linkin Park among other instances of popular artists in rehab or struggling with substance abuse. Around this time and till date, artists across a wide spectrum of genres have been referencing their personal mental health issues in their songs, directly or indirectly, as well as on social media. Kid Cudi announced on social media that he was checking himself into rehab for depression and suicidal thoughts, Jay-Z and Kanye West mentioned their experiences with mental health issues in their songs, with Jay-Z referencing his therapist in "Smile", and Logic along with Alessia Cara and Khalid released "1-800-273-8255," which eventually peaked at number 3 on the US Billboard Hot 100 and was nominated for Song of the Year and Best Music Video at the 60th Annual Grammy Awards.`34:T30c8,{ var isclicked = false; var last_search = ""; const width = 950; const graph = d3.select(DOM.svg(width, height)); const formatTime = d3.timeFormat("%b %Y"); const bubble_data = mentalhealth_bubbleData; const line_data = mentalhealth_songData; const [bubbleStartDate, bubbleEndDate] = d3.extent(bubble_data, d => d.date); const [lineStartDate, lineEndDate] = d3.extent(line_data, d => d.date); const [trendStartDate, trendEndDate] = d3.extent(mentalhealth_trendData, d => d.date); const text = graph.append("text") .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Search term:"); const xAxis = d3.axisBottom() .scale(xScale) .ticks(4) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(yScale) .ticks(10); graph.selectAll("vertical_line") .data(line_data) .enter() .append("line") .attr("x1", d => xScale(d.date)) .attr("y1", (height - padding.bottom)) .attr("x2", d => xScale(d.date)) .attr("y2", d => (height - padding.bottom) - 281) .attr("stroke", d => line_color(d)) .attr("stroke-width", 2) .on("mouseover", d => { var line_title = d.title; var line_artist = d.artist; var line_date = d.raw_date; var line_genre = d.genre; var key_lyric = d.key_lyric; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "4px solid" + line_color(d)) tooltip.append("div") .text(d => line_genre + " (" + line_date + ")") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", line_color(d)); tooltip.append("div") .text(d => line_title + " (" + line_artist + ")") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", line_color(d)); tooltip.append("div") .text(d => "\"" + key_lyric + "\"") .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", "#fff"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); }) //************************************************************* translucent trendlines in background function get_static_trend(name) { return graph.append("path") .datum(mentalhealth_trendData) .attr("class", "static") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "black") .style("fill-opacity", .04) .style("stroke-opacity", .04) .attr("d", mh_static_trendlines(name)); } get_static_trend("H01"); get_static_trend("H02"); get_static_trend("H03"); get_static_trend("H04"); get_static_trend("H05"); get_static_trend("H06"); //************************************************************* const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "#fff") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); graph.selectAll("triangle") .data(bubble_data) .enter() .append('path') .attr('d', tri) .attr('fill', triangle_color) .attr('stroke', triangle_border_color) .attr('stroke-width', 1) .style("fill-opacity", 0.5) .style("stroke-opacity", 1.0) .attr('transform', function(d) { return "translate(" + xScale(d.date) + "," + yScale(-0.03) + ")"}) .on("mouseover", d => { var circle_category = d.category; var circle_event = d.event var circle_date = d.raw_date; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "6px solid" + bubble_color) tooltip.append("div") .text(d => circle_date) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", bubble_color); tooltip.append("div") .text(d => circle_event) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", bubble_color); if (last_search != d.search_term) { isclicked = false; last_search = ""; } else { isclicked = true; } //************************************************************* trend line on hover const trend_line = d3.area() .x(e => xScale(e.date)) .y0(yScale(0)) .y1(e => {{ if (d.key == "H01") {return yScale(e.H01)} else if (d.key == "H02") {return yScale(e.H02)} else if (d.key == "H03") {return yScale(e.H03)} else if (d.key == "H04") {return yScale(e.H04)} else if (d.key == "H05") {return yScale(e.H05)} else if (d.key == "H06") {return yScale(e.H06)} }}) graph.selectAll("path.trend").remove() graph.append("path") .datum(mentalhealth_trendData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", path_color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", path_color) .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************* trend line on hover text.text("Search term: \"" + d.search_term + "\""); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { if (!isclicked) { graph.selectAll("path.trend").remove(); text.text("Search term:"); } tooltip.style("visibility", "hidden"); }) .on("click", d => { last_search = d.search_term; if (isclicked) { graph.selectAll("path.trend").remove(); text.text("Search term:"); isclicked = false; last_search = ""; } else { isclicked = true; var circle_category = d.category; var circle_event = d.event var circle_date = d.raw_date; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "6px solid" + bubble_color) tooltip.append("div") .text(d => circle_date) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#fff") .style("background", bubble_color); tooltip.append("div") .text(d => circle_event) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000") .style("background", bubble_color); } //************************************************************* trend line on click const trend_line = d3.area() .x(e => xScale(e.date)) .y0(yScale(0)) .y1(e => {{ if (d.key == "H01") {return yScale(e.H01)} else if (d.key == "H02") {return yScale(e.H02)} else if (d.key == "H03") {return yScale(e.H03)} else if (d.key == "H04") {return yScale(e.H04)} else if (d.key == "H05") {return yScale(e.H05)} else if (d.key == "H06") {return yScale(e.H06)} }}) graph.selectAll("path.trend").remove() graph.append("path") .datum(mentalhealth_trendData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", path_color) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", path_color) .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************* trend line on click text.text("Search term: \"" + d.search_term + "\""); }); const legend = graph .append('g') .attr('class', 'legend') .attr('transform', `translate(${width - 97}, ${height - 470})`) .selectAll('g') .data(legend_data) .enter() .append('g') .attr('transform', (d, i) => `translate(10, ${i*15})`); legend .append('rect') .attr('width', 9) .attr('height', 9) // .attr('r', 4) // .attr('cx', 4) // .attr('cy', 4) .style('fill', (d, i) => d.color); legend .append('text') .text(d => d.text) .attr('y', 12) .attr('dx', 14) .attr('dy', -4) .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Song Genre") .attr('y', 20) .attr('x', 860) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Hover on triangles") .attr('y', 20) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("to highlight corresponding trend.") .attr('y', 20) .attr('x', 680) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Click on triangles") .attr('y', 35) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("for trend to remain highlighted.") .attr('y', 35) .attr('x', 676) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Hover on lines") .attr('y', 50) .attr('x', 580) .attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("to reveal song information.") .attr('y', 50) .attr('x', 660) //.attr("font-weight", "bold") .style("font-family", "sans-serif") .style("font-size", "11px"); //************************************************************************************************ //********************************************TIMELINE******************************************** //************************************************************************************************ graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - padding.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") .text("Google Trend normalized magnitude") .style("text-anchor", "end") .attr("dx", -padding.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }35:Tad0,{ const width = 950; const my_height = 200 const graph = d3.select(DOM.svg(width, my_height)); const myScale = d3.scaleLinear() .domain([0.0, 1.0]) // start the domain at 0 instead of min .range([my_height - padding_static.bottom, padding_static.top]) const myxScale = d3.scaleTime().domain([d3.timeDay.offset(d3.extent(blm_overallData, d => d.date)[0], 0), d3.timeDay.offset(d3.extent(blm_overallData, d => d.date)[1], 0)]) .range([padding_static.left, width - padding_static.right]) const formatTime = d3.timeFormat("%b %Y"); const text = graph.append("text") .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "12px") .text("#blacklivesmatter"); const [trendStartDate, trendEndDate] = d3.extent(blm_overallData, d => d.date); const xAxis = d3.axisBottom() .scale(xScale) .ticks(16) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(myScale) .ticks(2); const trend_line = d3.area() .x(e => myxScale(e.date)) .y0(myScale(0)) .y1(e => {return myScale(e.value)}) graph.append("path") .datum(blm_overallData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "black") .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************************************************ //********************************************TIMELINE******************************************** //************************************************************************************************ graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${my_height - padding_static.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding_static.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") // .text("Google Trend normalized magnitude") // .style("text-anchor", "end") .attr("dx", -padding_static.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }36:Tb48,{ const width = 950; const my_height = 200 const graph = d3.select(DOM.svg(width, my_height)); const myScale = d3.scaleLinear() .domain([0.0, 1.0]) // start the domain at 0 instead of min .range([my_height - padding_static.bottom, padding_static.top]) const myxScale = d3.scaleTime().domain([d3.timeDay.offset(d3.extent(metoo_overallData, d => d.date)[0], 0), d3.timeDay.offset(d3.extent(metoo_overallData, d => d.date)[1], 0)]) .range([padding_static.left, width - padding_static.right]) const formatTime = d3.timeFormat("%b %Y"); // const line_data = blm_overallData; // const [lineStartDate, lineEndDate] = d3.extent(line_data, d => d.date); const text = graph.append("text") .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "12px") .text("#metoo"); const [trendStartDate, trendEndDate] = d3.extent(metoo_overallData, d => d.date); const xAxis = d3.axisBottom() .scale(xScale) .ticks(16) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(myScale) .ticks(2); const trend_line = d3.area() .x(e => myxScale(e.date)) .y0(myScale(0)) .y1(e => {return myScale(e.value)}) graph.append("path") .datum(metoo_overallData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "black") .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************************************************ //********************************************TIMELINE******************************************** //************************************************************************************************ graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${my_height - padding_static.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding_static.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") // .text("Google Trend normalized magnitude") // .style("text-anchor", "end") .attr("dx", -padding_static.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }37:Tb66,{ const width = 950; const my_height = 200 const graph = d3.select(DOM.svg(width, my_height)); const myScale = d3.scaleLinear() .domain([0.0, 1.0]) // start the domain at 0 instead of min .range([my_height - padding_static.bottom, padding_static.top]) const myxScale = d3.scaleTime().domain([d3.timeDay.offset(d3.extent(mentalhealth_overallData, d => d.date)[0], 0), d3.timeDay.offset(d3.extent(mentalhealth_overallData, d => d.date)[1], 0)]) .range([padding_static.left, width - padding_static.right]) const formatTime = d3.timeFormat("%b %Y"); // const line_data = blm_overallData; // const [lineStartDate, lineEndDate] = d3.extent(line_data, d => d.date); const [trendStartDate, trendEndDate] = d3.extent(mentalhealth_overallData, d => d.date); const xAxis = d3.axisBottom() .scale(xScale) .ticks(16) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(myScale) .ticks(2); const trend_line = d3.area() .x(e => myxScale(e.date)) .y0(myScale(0)) .y1(e => {return myScale(e.value)}) const text = graph.append("text") .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "12px") .text("#mentalhealth"); graph.append("path") .datum(mentalhealth_overallData) .attr("class", "trend") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "black") .style("fill-opacity", 0.55) .style("stroke-opacity", 0.55) .attr("d", trend_line); //************************************************************************************************ //********************************************TIMELINE******************************************** //************************************************************************************************ graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${my_height - padding_static.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding_static.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") // .text("Google Trend normalized magnitude") // .style("text-anchor", "end") .attr("dx", -padding_static.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }38:T13b3,{ const width = 900; const height = 700; const padding = {top: 20, left: 40, right: 40, bottom: 50}; const graph = d3.select(DOM.svg(width, height)); const formatTime = d3.timeFormat("%b %Y"); const data = selection; const [startDate, endDate] = d3.extent(data, d => d.date); const xScale = d3.scaleTime() // extend the domain with 1 day at each side .domain([d3.timeDay.offset(startDate, - 40), d3.timeDay.offset(endDate, 10)]) .range([padding.left, width - padding.right]); const yScale = d3.scaleLinear() .domain([-1, 1]) // start the domain at 0 instead of min .range([height - padding.bottom, padding.top]); const xAxis = d3.axisBottom() .scale(xScale) .ticks(18) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(yScale) .ticks(10); graph.selectAll("horizontal_line") .data(data) .enter() .append("line") .attr("x1", xScale(d3.timeDay.offset(startDate, - 40))) .attr("y1", yScale(0)+ .5) .attr("x2", xScale(d3.timeDay.offset(endDate, 10))) .attr("y2", yScale(0) + .5) .attr("stroke", "#000") .attr("stroke-width", .2); graph.selectAll("vertical_line") .data(data) .enter() .append("line") .attr("x1", d => xScale(d.date)) .attr("y1", (height - padding.bottom)/2 + 10) .attr("x2", d => xScale(d.date)) .attr("y2", d => yScale(d.polarity)) .attr("stroke", "#d6d6d6") .attr("stroke-width", 1); const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "#fff") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); graph.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => xScale(d.date)) .attr("cy", d => yScale(d.polarity)) .attr("r", 2.5) .attr("fill", d => {if (d.polarity < 0) {return "#c42f56"} else {return '#2959a5'} }) .style("opacity", .5) .attr("stroke", d => {if (d.polarity < 0) {return "#a52749"} else {return '#265299'}}) .on("mouseover", d => { var circle_title = d.title; var circle_artist = d.artist.split(' ').map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join(' '); var circle_polarity = d.polarity; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "4px solid" + "#fff") tooltip.append("div") .text(d => "Title: " + circle_title) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Artist: " + circle_artist) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Polarity: " + truncate(circle_polarity)) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); }); graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - padding.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") .text("Polarity") .style("text-anchor", "end") .attr("dx", -padding.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); const legend = graph .append('g') .attr('class', 'legend') .attr('transform', `translate(${width - 190}, ${height - 670})`) .selectAll('g') .data(sentiment_legend_data) .enter() .append('g') .attr('transform', (d, i) => `translate(10, ${i*15})`); legend .append('rect') .attr('width', 9) .attr('height', 9) // .attr('r', 4) // .attr('cx', 4) // .attr('cy', 4) .style('fill', (d, i) => d.color); legend .append('text') .text(d => d.text) .attr('y', 12) .attr('dx', 14) .attr('dy', -4) .style("font-family", "sans-serif") .style("font-size", "11px"); graph.append('text') .text("Line Color by Song Genre") .attr('y', 20) .attr('x', 705) .style("font-family", "sans-serif") .style("font-size", "11px") .attr("font-weight", "bold"); return graph.node(); }39:T678,md` ### Methodology Our project uses Google Trends data, which indicates how frequently people have been searching a specific search term (“brett kavanaugh”, “sandra bland”), as a proxy for interest in said sociopolitical movement. The data collection for songs associated with specific movements relies primarily on manually identifying songs from playlists, research papers, or news articles, about said movements. For example, we found songs about #metoo by looking at news articles from the women’s marches that indicate which songs were played as “anthems” for the movement, or songs about #blacklivesmatter by reading through statements made by popular singers about the songs they release following particular shootings. Our analysis concerned three main qualities associated with the song-movement relationship: (a) time responsiveness, i.e. the writing and release of songs in response to key moments in a movement, which we expressed through time-series with google trends data set against time-stamped bars for the associated songs, (b) genre representation, i.e. the color-coding of bars by genre to explore the most popular genres of songs associated with each movement, and (c) identity representation, i.e. an overarching analysis of which artists’ identities were represented in each movement. Then, we used small multiples charts for google trends data about our selected movements to compare how their search popularity varied over time. Finally, we created a tool for users to filter Billboard Hot 100 songs between 2000 and 2018 by genres and words, charting each by their overall polarity (positivity and negativity).`3a:T422,md`### Design We encoded our song’s release date with vertical lines on the same timeline as high-transparency graphs of Google search trends superimposed over each other, with highlight interactability on hover. This allows users to explore the direct temporal associations between key events in movements and songs that were released around those times, especially if they hover over the triangles on the timeline or the lines on the chart. For example, a viewer can track how singers began naming specific victims of police brutality in their songs soon after a death occurred, given that the tooltip on the songs lists a key lyric that justifies its association with the movement. We used triangles to indicate the peaks of google trends instead of circles, from our previous iteration, because triangles point upward toward the peak of the google trend graph that we want to draw viewers’ attention to. Moreover, we encoded the song lines with color by genre so that viewers could gain a broader understanding of genre representation by movement. `3b:T645,md` ### References D’Efilippo, Valentina. “The Anatomy of a Hashtag — a Visual Analysis of the MeToo Movement.” Medium, September 26 2018. Jarjour, Nick. “Music Has a Mental Health Problem That Needs Immediate Treatment.” Variety, June 5 2018. Loke Hale, James. “7 Times Pop Culture Actually Helped Us Understand Mental Health.” Bustle, October 13 2018. Fox, Allison. "Hip-Hop Artists Have Been Writing About Mental Health For Decades." HuffPost, October 14 2016. Leah, Rachel. “Why can’t #MeToo shake up the music industry?” Medium, June 20 2018. Dziemianowicz, Joe. “How #MeToo has changed pop culture forever.” MarketWatch, October 3 2018. Yahr, Emily. “How Country Music Has — and Hasn’t — Addressed the #MeToo Movement in a Difficult Year.” The Washington Post, October 20 2018. Rollingstone, “Songs of Black Lives Matter: 22 New Protest Anthems”, Brittany Spanos & Sarah Grant, July 13 2016. Orejuela, Fernando and Shonekan, Stephanie. “Black Lives Matter & Music.” Activist Encounters in Folklore and Ethnomusicology. August 10 2018. Ong, Jocelyn. “Billboard Hot 100.” October 3 2018. Fowler, Brady. “Billboard Volatility: How Have the Charts Changed?” Decibels & Decimals, January 7 2018. Anwuri, Rosebud. “Billboard Hot 100 Analytics.” Towards Data Science, June 15 2018. Deen Freelon, Charlton D. McIlwain, and Meredith D. Clark. “Beyond the Hashtag: Beyond the Hashtags: #Ferguson, #Blacklivesmatter, and the Pnline Struggle for Offline Justice.” Center for Media and Social Impact, February 29, 2016. Google Trends`3c:T41c,function blm_static_trendlines(e) { return d3.area() .x(d => xScale(d.date)) .y0(yScale(0)) .y1(d => {{if (e == "B01") {return yScale(d.B01)} else if (e == "B02") {return yScale(d.B02)} else if (e == "B03") {return yScale(d.B03)} else if (e == "B04") {return yScale(d.B04)} else if (e == "B05") {return yScale(d.B05)} else if (e == "B06") {return yScale(d.B06)} else if (e == "B07") {return yScale(d.B07)} else if (e == "B08") {return yScale(d.B08)} else if (e == "B09") {return yScale(d.B09)} else if (e == "B10") {return yScale(d.B10)} else if (e == "B11") {return yScale(d.B11)} else if (e == "B12") {return yScale(d.B12)} }}) }3d:T63e,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }3e:[] 2f:{"title":"Sociopolitical Trends in Popular Music","cells":[{"id":0,"value":"md`# Sociopolitical Trends in Popular Music`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"md`**Authors:** Vasudha Rengarajan (vr2375), Jessie Liu (jll2219), Nikhil Jain (nsj2112)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"md` This project uncovers some of the relationships between popular music genres and sociopolitical movements in the US. In particular, it seeks to explore how genres’ lyrical qualities and artists’ identities relate to the movements that some of their songs address, specifically #blacklivesmatter, #metoo, and #mentalhealth. Given the persistence of popular music in everything from our daily commute to our work or relaxation time, the choices we make in music influence the sociopolitical movements we become connected to.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"md`## \\#BlackLivesMatter Interactive Timeline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"md` #BlackLivesMatter is most thoroughly referenced in hip-hop and R&B of the popular music genres, primarily by black artists -- both male and female. By hovering over specific events, such as the deaths of Freddie Gray or Sandra Bland, and tracking the lyrics of #BLM-related songs released soon after, one can grasp the highly responsive, attentive stance of many popular black artists toward the overarching movement.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"md`In the following timeline, the normalized magnitude of Google trends for different search terms relating to the Black Lives Matter movement are mapped in grey. The colored bars show when songs relating to the movement are released, and color encodes what genre the song is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"md`##### Data Sources: \n\n###### Rollingstone, “Songs of Black Lives Matter: 22 New Protest Anthems”, Brittany Spanos & Sarah Grant, July 13 2016\n\n###### Orejuela, Fernando and Shonekan, Stephanie. “Black Lives Matter & Music.” Activist Encounters in Folklore and Ethnomusicology. August 10 2018.\n\n###### Google Trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"md`\\b`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"md`## \\#MeToo Interactive Timeline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"md`TW: Sexual Assault\n\n#MeToo illustrates a dominance of pop artists, mostly white female singers, referencing female empowerment in the face of sexual assault. While the catchy, often-upbeat sentiment of pop music lyrics can make the incorporation of #MeToo and other activist messages more challenging than it is in hip-hop, rap, or R&B, songs from 2017 -- a year that witnessed a spike of interest in #MeToo -- and after are increasingly becoming feminist anthems through events like the women's marches of 2017 and 2018. Moreover, after the Brett Kavanaugh hearings of October 2018, Brittany Holljes of country group Delta Rae began performing \"Hands Dirty,\" a song that responds to gendered power dynamics and sexual assault, at live shows. The hugely positive response at a time of heightened attention around #MeToo led the group to release the song, making it the first country song to address the issue.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"md`In the following timeline, the normalized magnitude of Google trends for different search terms relating to the Me Too movement are mapped in grey. The colored bars show when songs relating to the movement are released, and color encodes what genre the song is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"md`##### Data Sources:\n\n###### Leah, Rachel. “Why can’t #MeToo shake up the music industry?” Medium, June 20 2018.\n\n###### Dziemianowicz, Joe. “How #MeToo has changed pop culture forever.” MarketWatch, October 3 2018.\n\n###### Yahr, Emily. “How Country Music Has — and Hasn’t — Addressed the #MeToo Movement in a Difficult Year.” The Washington Post, October 20 2018.\n\n###### Google Trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"md`\\b`","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"md`## Mental Health Interactive Timeline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"md`In the following timeline, the normalized magnitude of Google trends for different search terms relating to trending mental health events are mapped in grey. The colored bars show when songs relating to the movement are released, and color encodes what genre the song is.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"md`##### Data Sources: \n###### Jarjour, Nick. “Music Has a Mental Health Problem That Needs Immediate Treatment.” Variety, June 5 2018.\n\n###### Loke Hale, James. “7 Times Pop Culture Actually Helped Us Understand Mental Health.” Bustle, October 13 2018.\n\n###### Fox, Allison. \"Hip-Hop Artists Have Been Writing About Mental Health For Decades.\" HuffPost, October 14 2016.\n\n###### Google Trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"md`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md`## Overall Google Trends: \n\n## \\#blacklivesmatter, \\#metoo, \\#mentalhealth`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":" md`The #blacklivesmatter hashtag emerged in July 2013 when it was first used on Twitter, coincidentally a few days before Eric Garner's death in Staten Island, NY. It peaked in July 2016 when BLM protests in Dallas turned violent soon after Philando Castille's death in MN. Other peaks primarily relate to individual deaths, large-scale protests, speeches about BLM like that delivered by John Legend at the 2016 NAACP Image Awards or by Jesse Williams at the 2016 BET Humanitarian Awards, or cases of shooter acquittal in court.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"md`While Tarana Burke, a Black civil rights activist from the Bronx, coined the term \"me too\" in relation to sexual assault in 2006, it became popularized online in October 2017 when Alyssa Milano tweeting soon after Harvey Weinstein's accusations, asking her audience to retweet her post with 'me too' if they had experienced sexual assault or sexual harassment. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"md`Whereas mental health does not have an overarching hashtag, a recent one related to the topic is #yougoodman, which was sparked in October 2017 in the following tweet by Dayna Nickolls and \"the Cosby\": \"#YouGoodMan is for Black Men to confess, ask for help, vent, or get pointed in the direction of mental health professionals\". In general, however, the lack of a specific event or moment that sparked interest in the topic explains the steady increase in interest without any peaks or troughs as drastic as the above two examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"md`###### Data Sources: \n###### Google Trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"md`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"md`## Song Polarity by Genre and Search by Lyric`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"md`From the visualizations above, we noticed that certain genres are more connected with certain movements. For example, the majority of songs we found relating to #blacklivesmatter are of the hiphop/rap genre, while the majority of #metoo songs are pop songs. \n\nWe wanted to explore how ideas were expressed in each genre. In the following visualization, we expand our scope to songs on the Billboard Top 100 from 2000-2008, and computed sentimentality of song lyrics by genre. Bubbles in the visualization represent a song. Polarity is on a scale from -1 to 1 and negative polarity means that the song lyrics are computed to have more negative sentiment. Enter a word or a phrase into the search bar to filter results by songs that contain that word or phrase. Hover over a bubble to reveal song details.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"html`\n\n \n \n \n \n \n \n

${viewof sf}

${viewof genreSelector}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"md`###### Data Sources: \n###### Mishra, Gyanendra. Dataset on Kaggle: \"380,000+ lyrics from MetroLyrics\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"md`# Final Documentation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"md`Our final project uncovers some of the relationships between popular music genres and sociopolitical movements in the US. In particular, it seeks to explore how genres’ lyrical qualities and artists’ identities relate to the movements that some of their songs address, specifically #blacklivesmatter, #metoo, and #mentalhealth. Given the persistence of popular music in everything from our daily commute to our work or relaxation time, the choices we make in music influence the sociopolitical movements we become connected to. Especially at a time when hashtags and phrases like “this is America” or “#lovewins” circulate rapidly and extensively on social media at the same time that musical preferences are shifting from instrumental to lyrical, one can draw significant insights about pop culture by looking at popular song lyrics.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"md`### Related Work\n\nPrevious analytics about song data have mostly considered musical qualities such as song length, beats per minute (BPM), tonality, etc. although some have also been interested in song sentiment, i.e. the overall negativity, positivity, or general emotion of the song. At the same time, unrelated research projects that code Twitter hashtag data have emerged to illustrate trends in sociopolitical movements, including time series of #metoo or #blacklivesmatter interest on Twitter. Few, however, have drawn connections between songs and sociopolitical movements in a data-driven manner.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1467,"value":"md`\n### Implementation \n\nWe built the final visualization on Observable, using D3. For data processing, we used the pandas, a Python library. We loaded our cleaned data onto Github gist to be used in a Observable notebook. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"md`\n### Discussion\n\nViewers generally understood the temporal associations between the Google trends and the song lines, but were unsure in our first iteration about how the overall picture communicated story. For example, what were the Google trends for “#MeToo” across the full timeline (as opposed to seeing only the peaks or trends for a particular subset of the movement)? We incorporated the translucent overlays of all of the Google trends to mark the general peaks and troughs of interest in the movement, allowing viewers to begin reading into our story before even interacting with it. To clarify how to interact with our timelines, we added a \"How To\" section to prompt the intended hover and click interactions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"md` # Under the hood`","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md` #### charting trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"tri = d3.symbol().type(d3.symbolTriangle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"padding = ({top: 140, left: 30, right: 40, bottom: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"padding_static = ({top: 40, left: 30, right: 40, bottom: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"xScale = d3.scaleTime()\n .domain([d3.timeDay.offset(d3.extent(blm_trendData, d => d.date)[0], 0), d3.timeDay.offset( d3.extent(blm_trendData, d => d.date)[1], 0)])\n \t\t\t\t\t.range([padding.left, width - padding.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"yScale = d3.scaleLinear()\n \t\t\t\t\t.domain([0.0, 1.0]) // start the domain at 0 instead of min\n \t\t\t\t\t.range([height - padding.bottom, padding.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"line_color = (d) => {\n {if (d.genre == \"Hip-Hop\")\n {return \"#79b5e5\"} \n else if (d.genre == \"Neo-soul\") \n {return \"#e5a5e3\"}\n else if (d.genre == \"R&B\") \n {return '#ab9ce5'} \n else if (d.genre == \"Indie\") \n {return '#efbf8b'} \n else if (d.genre == \"Pop\") \n {return \"#b4e28a\"}\n else if (d.genre == \"Country\") \n {return '#8eccba'} }; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"bubble_border_color = \"#7c7c7c\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"bubble_color = \"#c1c1c1\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"triangle_color = \"#545454\" // \"#f4ce42\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"triangle_border_color = \"#545454\" // \"#f4ce42\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"path_color = \"#424242\" // \"#f4ce42\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"function metoo_static_trendlines(e) {\n return d3.area()\n .x(d => xScale(d.date))\n .y0(yScale(0))\n .y1(d => {{if (e == \"M01\") {return yScale(d.M01)} \n else if (e == \"M02\") {return yScale(d.M02)}\n else if (e == \"M03\") {return yScale(d.M03)}\n else if (e == \"M04\") {return yScale(d.M04)}\n else if (e == \"M05\") {return yScale(d.M05)}\n else if (e == \"M06\") {return yScale(d.M06)}\n }}) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"function mh_static_trendlines(e) {\n return d3.area()\n .x(d => xScale(d.date))\n .y0(yScale(0))\n .y1(d => {{if (e == \"H01\") {return yScale(d.H01)} \n else if (e == \"H02\") {return yScale(d.H02)}\n else if (e == \"H03\") {return yScale(d.H03)}\n else if (e == \"H04\") {return yScale(d.H04)}\n else if (e == \"H05\") {return yScale(d.H05)}\n else if (e == \"H06\") {return yScale(d.H06)}\n }}) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"md` #### sentiment search`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"selection = filters(timeData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"filters = xs => {\n // const yearsFilter = R.filter(R.partial(isInYears, [years]))\n // const monthsFilter = R.filter(R.partial(isInMonths, [months]))\n // const daysFilter = R.filter(R.partial(isInDays, [days]))\n // return R.compose(match, daysFilter, monthsFilter, yearsFilter)(xs)\n // const genreFilter = R.filter(R.partial(isGenre, [genres]))\n return R.compose(match, isGenre)(xs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"viewof sf = text({submit: \"Go\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"search = {\n const sfEscaped = sf.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&').toLowerCase()\n return ({regex: new RegExp(\" \" + sfEscaped + \" \"), // looks for words\n regex1: new RegExp(\" \" + sfEscaped + \"$\"), \n regex2: new RegExp(\"^\" + sfEscaped + \" \")\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"match = xs => {\n const innerMatch = d => {\n if (sf.trim() == '') { return true }\n const n = d.lyrics\n // return search.wholeWords ? search.regexw.test(n) : search.regex.test(n)\n return search.regex.test(n) || search.regex1.test(n) || search.regex2.test(n)\n }\n return R.filter(innerMatch, xs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"isGenre = xs => {\n const genreMatch = d => {\n if (genres.includes(genreArray.indexOf(d.genre).toString())) { console.log(\"hi\"); return true }\n if (genres.includes(genreArray.indexOf(\"all\").toString())) { console.log(\"hey\"); return true }\n console.log(\"nope\"); \n return false\n }\n return R.filter(genreMatch, xs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"genres = genreSelector","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"viewof genreSelector = select2({\n title: \"Genres\",\n options: [\n { value: 0, label: \"rap\" },\n { value: 1, label: \"pop\" },\n { value: 2, label: \"r&b\" },\n { value: 3, label: \"rock\" },\n { value: 4, label: \"country\" },\n { value: 5, label: \"edm\" },\n { value: 6, label: \"all\" }\n ],\n value: [0, 1, 2, 3, 4, 5, 6],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"genreArray = [\"rap\", \"pop\", \"r&b\", \"rock\", \"country\", \"edm\", \"all\" ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"truncate = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"blm_bubbleData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/0e187fe93e620ab878f323e4d1903ba7/raw/7a793734ce84b5d58da038328b94024bce3c97cf/new_blm_bubbles.csv\", d => { \n return {\n event: d.event,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n raw_date: d.date,\n jiggle_date: d3.timeParse(\"%m/%d/%y\")(d.jiggle_date),\n\tsearch_term: d.search_term,\n key: d.key\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"blm_songData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/9b0455d3bc882f6e2286a43ddd851b99/raw/86efcf62cbdd892e9a9571f418e9cd13298f7dc9/new_blm_songs.csv\", d => { \n return { // convert from string to float\n title: d.title,\n artist: d.artist,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n raw_date: d.date,\n jiggle_date: d3.timeParse(\"%m/%d/%y\")(d.jiggle_date),\n\tgenre: d.genre,\n key_lyric: d.key_lyric\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"blm_trendData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/00e380996998e24964e625d6bee835c4/raw/a8a6fb262a44eb47650826d9294d0fa114e6bbd7/new_blm_google_trends.csv\", d => { \n return {\n date: d3.timeParse(\"%m/%d/%y\")(d.Week),\n B01: parseFloat(d.B01),\n B02: parseFloat(d.B02),\n B03: parseFloat(d.B03),\n B04: parseFloat(d.B04),\n B05: parseFloat(d.B05),\n B06: parseFloat(d.B06),\n B07: parseFloat(d.B07),\n B08: parseFloat(d.B08),\n B10: parseFloat(d.B10),\n B09: parseFloat(d.B09),\n B11: parseFloat(d.B11),\n B12: parseFloat(d.B12),\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"metoo_bubbleData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/fe9e1db14f9719ff22f9661f51c5fc39/raw/a82fb239f07098e8e274ac49f63a94e76b1c9030/me_too_bubbles.csv\", d => { \n return {\n event: d.event,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n raw_date: d.date,\n jiggle_date: d3.timeParse(\"%m/%d/%y\")(d.jiggle_date),\n\tsearch_term: d.search_term,\n key: d.key\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"metoo_songData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/9f4f0527f2ba85083c70b8157889f0aa/raw/367daec987c122e078077164a0dbc45f2f9f7a11/me_too_songs.csv\", d => { \n return { // convert from string to float\n title: d.title,\n artist: d.artist,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n raw_date: d.date,\n jiggle_date: d3.timeParse(\"%m/%d/%y\")(d.jiggle_date),\n\tgenre: d.genre,\n key_lyric: d.key_lyric\n}})\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"metoo_trendData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/849194dbfba8d172aef777e32ea06210/raw/94a369fa42c0867d7a20d8fb7346794e0dd5928d/me_too_google_trends.csv\", d => { \n return {\n date: d3.timeParse(\"%m/%d/%y\")(d.Week),\n M01: parseFloat(d.M01),\n M02: parseFloat(d.M02),\n M03: parseFloat(d.M03),\n M04: parseFloat(d.M04),\n M05: parseFloat(d.M05),\n M06: parseFloat(d.M06),\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"mentalhealth_bubbleData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/80a7ce233abd7334e1b5afcdae7f1060/raw/077edcc4cf4d56dc54fb7a413207c3c2aff71c11/mental_health_bubbles.csv\", d => { \n return {\n event: d.event,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n raw_date: d.date,\n jiggle_date: d3.timeParse(\"%m/%d/%y\")(d.jiggle_date),\n\tsearch_term: d.search_term,\n key: d.key\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"mentalhealth_songData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/6990154a1897ea9776e50280c856cbc9/raw/6d6bda57e6e83459e26f8eff3b7733404ee5bd2c/mental_health_songs.csv\", d => { \n return { // convert from string to float\n title: d.title,\n artist: d.artist,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.release_date), // convert from string to date\n raw_date: d.release_date,\n jiggle_date: d3.timeParse(\"%m/%d/%y\")(d.jiggle_date),\n\tgenre: d.genre,\n key_lyric: d.key_lyric\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"mentalhealth_trendData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/caeca8bc8e9e461629cf3d31e400426e/raw/53c25537d927ff711b72992ca7a0ad45d4b1b8fa/mental_health_google_trends.csv\", d => { \n return {\n date: d3.timeParse(\"%m/%d/%y\")(d.week),\n H01: parseFloat(d.H01),\n H02: parseFloat(d.H02),\n H03: parseFloat(d.H03),\n H04: parseFloat(d.H04),\n H05: parseFloat(d.H05),\n H06: parseFloat(d.H06),\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"md`#### small multiples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"metoo_overallData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/fea32311c1cb4a8bdfb415d3ecf29007/raw/c34253b8a6765471d64c332529ea5809d956b63c/me_too_overall_trend.csv\", d => { \n return {\n date: d3.timeParse(\"%m/%d/%y\")(d.Week),\n value: parseFloat(d.metoo)\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"mentalhealth_overallData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/e08f28cf271d406b1743258328eeca26/raw/7685758a2b04a2ee981023490a32b81d95e0e091/mental_health_overall_trend.csv\", d => { \n return {\n date: d3.timeParse(\"%m/%d/%y\")(d.week),\n value: parseFloat(d.mental_health)\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"blm_overallData = d3.csv(\"https://gist.githubusercontent.com/vizbiz/8904733eda000cb5669bbae00623db37/raw/a84ed614235f0a18085d10b3b511bf3e947915fa/new_blm_overall_trend.csv\", d => { \n return {\n date: d3.timeParse(\"%m/%d/%y\")(d.week),\n value: parseFloat(d.black_lives_matter)\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"md` #### billboard data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"timeData = d3.csv(\"https://gist.githubusercontent.com/jessieliu1/64cdcca135b398511977ae3583c8f35b/raw/ee606aafe6cd6fd3f788948fa2a797075138df43/other_lyrics.csv\", d => { \n return { // convert from string to float\n title: d.title,\n artist: d.artist,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n\tpolarity: parseFloat(d.polarity),\n lyrics: d.lyrics,\n genre: d.genre\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"md `#### search`","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"function select2(config = {}) {\n let {value: formValue, title, description, submit, multiple, size, options} = config;\n if (!Array.isArray(formValue)) formValue = [formValue]\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"select\", title, description, submit, \n getValue: input => {\n const selected = Array.prototype.filter.call(input.options, i => i.selected).map(i => i.value);\n return multiple ? selected : selected[0];\n },\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"R = require(\"//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"import {checkbox, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"legend_data = d3.csv(\"https://gist.githubusercontent.com/vizbiz/f190905660518d6c5cad386f4ec8eef9/raw/4c64201f78ec1fcfb508b637680c21877b8fa1a2/legend.csv\", d => { \n return {\n text: d.text,\n\tcolor: d.color,\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"sentiment_legend_data = d3.csv(\"https://gist.githubusercontent.com/vizbiz/b697f1fbe85ecaa6d71425d40dcb7fd5/raw/33987051fb7b965328d8932e2222d8c49fb53b6e/sentiment.csv\", d => { \n return {\n text: d.text,\n\tcolor: d.color,\n}})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}