2a:T116b,mutable annotations = [ { x: 230, // .42 y: 241, // .54 dx: -200, dy: -70, subject: { radius: 35 }, note: { title: "Drugs & Alchohol", align: "left" } }, { x: 390, y: 200, dx: 10, dy: -100, subject: { radius: 80 }, note: { title: "$$$", align: "left" } }, { x: 490, y: 215, dx: 10, dy: -100, subject: { radius: 40 }, note: { title: "Hip Hop lingo (eg n-word)", align: "left" } }, { x: 255, y: 418, dx: -100, dy: 150, subject: { radius: 10 }, note: { title: "apology", align: "right" } }, { x: 390, y: 370, dx: 120, dy: 220, subject: { radius: 40 }, note: { title: "Loss & loneliness", align: "left" } }, { x: 375, y: 430, dx: -20, dy: 80, subject: { radius: 48 }, note: { title: "love", align: "left" } }, { x: 545, y: 263, dx: 100, dy: 0, subject: { radius: 14 }, note: { title: "Insults", align: "left" } }, { x: 255, y: 380, dx: -40, dy: 50, subject: { radius: 40 }, note: { title: "❤️ (break)", align: "right" } }, { x: 200, y: 295, dx: -40, dy: -40, subject: { radius: 25 }, note: { title: "🔥", align: "left" } }, { x: 360, y: 170, dx: 10, dy: -100, subject: { radius: 40 }, note: { title: "fashion", align: "left" } }, { x: xsAnnotation(0.545), y: ysAnnotation(0.405), dx: 50, dy: 80, subject: { radius: 15 }, note: { title: "blame & judgement", align: "left" } }, { x: xsAnnotation(0.422), y: ysAnnotation(0.493), dx: -120, dy: 0, subject: { radius: 25 }, note: { title: "💡", align: "left" } }, { x: xsAnnotation(0.44), y: ysAnnotation(0.477), dx: -120, dy: 0, subject: { radius: 25 }, note: { title: "sleep", align: "left" } }, { x: xsAnnotation(0.536), y: ysAnnotation(0.486), dx: -20, dy: -30, subject: { radius: 20 }, note: { title: "age", align: "left" } }, { x: xsAnnotation(0.428), y: ysAnnotation(0.53), dx: -180, dy: -40, subject: { radius: 25 }, note: { title: "smoking (weed)", align: "left" } }, { x: xsAnnotation(0.46), y: ysAnnotation(0.497), dx: -310, dy: -15, subject: { radius: 30 }, note: { title: "'run' (movement)", align: "left" } }, { x: xsAnnotation(0.566), y: ysAnnotation(0.413), dx: 200, dy: 45, subject: { radius: 45 }, note: { title: "trust & fidelity", align: "left" } }, { x: xsAnnotation(0.603), y: ysAnnotation(0.434), dx: 200, dy: -15, subject: { radius: 30 }, note: { title: "realness", align: "left" } }, { x: xsAnnotation(0.569), y: ysAnnotation(0.463), dx: 200, dy: -15, subject: { radius: 30 }, note: { title: "spoken communication", align: "left" } }, { x: xsAnnotation(0.612), y: ysAnnotation(0.553), dx: 100, dy: -15, subject: { radius: 40 }, note: { title: "Christmas", align: "left" } }, { x: xsAnnotation(0.407), y: ysAnnotation(0.59), dx: -10, dy: -100, subject: { radius: 50 }, note: { title: "jewlery", align: "right" } }, { x: xsAnnotation(0.5), y: ysAnnotation(0.479), dx: -10, dy: 30, subject: { radius: 20 }, note: { title: "going/leaving", align: "right" } }, { x: xsAnnotation(0.514), y: ysAnnotation(0.396), dx: -10, dy: 120, subject: { radius: 30 }, note: { title: "(don't) care", align: "right" } }, { x: xsAnnotation(0.561), y: ysAnnotation(0.568), dx: 100, dy: -20, subject: { radius: 25 }, note: { title: "writing songs", align: "right" } }, { x: xsAnnotation(0.417), y: ysAnnotation(0.425), dx: -100, dy: -20, subject: { radius: 15 }, note: { title: "😢", align: "right" } }, { x: xsAnnotation(0.405), y: ysAnnotation(0.443), dx: -100, dy: -20, subject: { radius: 25 }, note: { title: "pain, numbness", align: "right" } }, { x: xsAnnotation(0.381), y: ysAnnotation(0.529), dx: -20, dy: 0, subject: { radius: 25 }, note: { title: "💃", align: "right" } }, { x: xsAnnotation(0.457), y: ysAnnotation(0.418), dx: -20, dy: 180, subject: { radius: 25 }, note: { title: "'feel'", align: "right" } } ]2b:T1a2c,PERFORMER_LIST = [ "Taylor Swift", "Logic Featuring Alessia Cara & Khalid", "J. Cole", "Kevin Gates", "Bruno Mars", "David Guetta Featuring Justin Bieber", "Beyonce Featuring The Weeknd", "Fetty Wap Featuring Remy Boyz", "Ariana Grande", "Lukas Graham", "Burl Ives", "21 Savage", "Coldplay", "Mariah Carey", "Kanye West", "Kendrick Lamar & SZA", "Jon Bellion", "The Chainsmokers Featuring Phoebe Ryan", "Travis Scott", "The Carters", "Charlie Puth", "Chris Brown", "Selena Gomez", "Migos Featuring Lil Uzi Vert", "Halsey", "Billie Eilish", "XXXTENTACION", "Post Malone Featuring Nicki Minaj", "Nicki Minaj", "Cardi B Featuring 21 Savage", "Cardi B", "Imagine Dragons", "Post Malone", "Khalid", "YG Featuring 2 Chainz, Big Sean & Nicki Minaj", "Rae Sremmurd Featuring Gucci Mane", "Sam Hunt", "Ella Mai", "Big Sean", "BTS Featuring Halsey", "D.R.A.M. Featuring Lil Yachty", "DNCE", "The Weeknd", "Lil Wayne", "Justin Timberlake", "Drake", "Amine", "Ed Sheeran", "Sia Featuring Sean Paul", "Nick Jonas Featuring Tove Lo", "The Chainsmokers Featuring Halsey", "Maroon 5 Featuring Future", "Post Malone Featuring Quavo", "Sam Smith & Normani", "Luis Fonsi & Daddy Yankee Featuring Justin Bieber", "Kendrick Lamar", "The Chainsmokers Featuring Daya", "Drake Featuring Michael Jackson", "Kent Jones", "Bryson Tiller", "Yo Gotti Featuring Nicki Minaj", "Lil Baby & Gunna", "Tyler, The Creator", "Lil Dicky", "benny blanco, Halsey & Khalid", "Benny Blanco, Halsey & Khalid", "Taylor Swift Featuring Ed Sheeran & Future", "Luke Combs", "Elle King", "BTS", "Eminem", "Lil Peep & XXXTENTACION", "Portugal. The Man", "Calvin Harris Featuring Pharrell Williams, Katy Perry & Big Sean", "6ix9ine Featuring Nicki Minaj & Murda Beatz", "Bruno Mars & Cardi B", "DJ Khaled Featuring Drake", "Beyonce", "Lil Dicky Featuring Chris Brown", "Marshmello & Anne-Marie", "Kanye West Featuring PARTYNEXTDOOR", "Maroon 5 Featuring Cardi B", "Blake Shelton", "Meek Mill Featuring Drake", "Kiiara", "Lorde", "Lil Pump", "6ix9ine", "Florida Georgia Line", "Marshmello & Bastille", "Camila Cabello Featuring Young Thug", "twenty one pilots", "Kane Brown", "Adele", "Alessia Cara", "Panic! At The Disco", "G-Eazy & Halsey", "Logic Featuring Eminem", "Ed Sheeran & Justin Bieber", "The Weeknd Featuring Daft Punk", "Gucci Mane Featuring Migos", "gnash Featuring Olivia O'Brien", "Shawn Mendes & Camila Cabello", "Cardi B, Bad Bunny & J Balvin", "Kanye West & Lil Pump", "Mike Posner", "Justin Bieber", "DJ Khaled Featuring Justin Bieber, Quavo, Chance The Rapper & Lil Wayne", "BTS Featuring Nicki Minaj", "Shawn Mendes", "Brett Young", "KYLE Featuring Lil Yachty", "Julia Michaels", "Zay Hilfigerrr & Zayion McCall", "P!nk", "Flipp Dinero", "Lil Wayne Featuring Travis Scott", "James Bay", "DJ Snake Featuring Justin Bieber", "NF", "MAX Featuring gnash", "Meghan Trainor Featuring John Legend", "R. City Featuring Adam Levine", "BlocBoy JB Featuring Drake", "Khalid & Normani", "Rihanna", "Kendrick Lamar Featuring Zacari", "Future Featuring The Weeknd", "Kendrick Lamar Featuring Rihanna", "Juice WRLD", "Eminem Featuring Joyner Lucas", "Tory Lanez", "Britney Spears Featuring G-Eazy", "Miley Cyrus", "Future", "Meghan Trainor", "Taylor Swift Featuring Brendon Urie", "Bebe Rexha & Florida Georgia Line", "J Balvin & Willy William Featuring Beyonce", "Bad Bunny Featuring Drake", "DJ Snake Featuring Bipolar Sunshine", "Lady Gaga", "Bazzi", "Sheck Wes", "Lil Wayne Featuring Kendrick Lamar", "Migos, Nicki Minaj & Cardi B", "YNW Melly", "Flo Rida", "Flume Featuring Kai", "Camila Cabello", "Zara Larsson & MNEK", "Katy Perry", "Lil Baby & Gunna Featuring Drake", "Dua Lipa", "DJ Khaled Featuring Justin Bieber, Chance The Rapper & Quavo", "Nicki Minaj, Drake & Lil Wayne", "Chris Brown Featuring Drake", "G-Eazy Featuring A$AP Rocky & Cardi B", "Lil Nas X Featuring Billy Ray Cyrus", "Ellie Goulding", "Drake Featuring WizKid & Kyla", "Jonas Brothers", "Young M.A", "Jeremih", "Desiigner", "The Chainsmokers", "One Direction", "Kelly Clarkson", "Zayn", "Cardi B & Bruno Mars", "Rich The Kid", "Polo G Featuring Lil Tjay", "Drake Featuring The Throne", "Drake Featuring Quavo & Travis Scott", "The Weeknd & Kendrick Lamar", "Lil Tecca", "Machine Gun Kelly", "Childish Gambino", "Offset & Metro Boomin", "Clean Bandit Featuring Sean Paul & Anne-Marie", "Ayo & Teo", "The Chainsmokers Featuring Rozes", "Gene Autry", "Post Malone Featuring G-Eazy & YG", "Justin Timberlake Featuring Chris Stapleton", "James Arthur", "Lady Gaga & Bradley Cooper", "Ariana Grande Featuring Nicki Minaj", "Harry Styles", "Niall Horan", "Lewis Capaldi", "The Chainsmokers & Coldplay", "Demi Lovato", "Post Malone Featuring Swae Lee", "Hailee Steinfeld & Grey Featuring Zedd", "Zedd & Alessia Cara", "Migos", "Liam Payne Featuring Quavo", "Lil Wayne, Wiz Khalifa & Imagine Dragons With Logic & Ty Dolla $ign Feat. X Ambassadors", "DaBaby", "Post Malone & Swae Lee", "Ava Max", "DJ Snake Featuring Selena Gomez, Ozuna & Cardi B", "Drake Featuring JAY-Z", "Tyga Featuring Offset", "Blanco Brown", "Sia Featuring Kendrick Lamar", "Young Thug, J. Cole & Travis Scott", "Zedd, Maren Morris & Grey", "Calvin Harris Featuring Rihanna", "Blueface", "Sam Smith", "Drake Featuring Rihanna", "SHAED", "Lizzo", "Kodak Black", "French Montana Featuring Swae Lee", "X Ambassadors", "Future Featuring Drake", "Migos Featuring Drake", "Eminem Featuring Beyonce", "Travis Scott Featuring Lil Uzi Vert & Kanye West", "Charlie Puth Featuring Selena Gomez", "Maroon 5 Featuring SZA", "Meek Mill Featuring Rick Ross & JAY-Z", "Morgan Wallen", "DJ Khaled Featuring Rihanna & Bryson Tiller", "DJ Khaled Featuring Cardi B & 21 Savage", "Fifth Harmony Featuring Ty Dolla $ign", "Rihanna Featuring Drake", "Lil Uzi Vert", "Lil Baby & Drake", "5 Seconds Of Summer", "Kodak Black Featuring Travis Scott & Offset", "Dan + Shay & Justin Bieber", "Lil Mosey", "Tones And I", "Trevor Daniel", "Mac Miller", "Jason Aldean", "blackbear", "Young Thug Featuring Gunna", "Maroon 5", "Camila Cabello Featuring DaBaby", "Luke Bryan", "Lee Brice", "SAINt JHN", "Arizona Zervas", "Moneybagg Yo", "Megan Thee Stallion", "Lil Baby", "Surfaces", "Saweetie", "Maren Morris", "Roddy Ricch" ]2c:T8e6,GENRE_LIST = [ "adult standards", "alternative r&b", "american folk revival", "art pop", "atl hip hop", "atl trap", "australian dance", "australian electropop", "australian indie", "australian pop", "barbadian pop", "baroque pop", "baton rouge rap", "bedroom soul", "boy band", "british soul", "brostep", "cali rap", "canadian contemporary r&b", "canadian hip hop", "canadian pop", "chicago rap", "complextro", "conscious hip hop", "contemporary country", "country", "country pop", "country rap", "country road", "cowboy western", "dance pop", "danish pop", "deep talent show", "detroit hip hop", "dfw rap", "dirty south rap", "dmv rap", "downtempo", "edm", "electro house", "electronic trap", "electropop", "emo", "emo rap", "escape room", "etherpop", "florida rap", "g funk", "gangster rap", "german techno", "girl group", "hip hop", "hip pop", "house", "houston rap", "indie pop", "indie pop rap", "indie poptimism", "indie rock", "indietronica", "k-pop", "k-pop boy group", "latin", "latin pop", "lgbtq+ hip hop", "melodic rap", "memphis hip hop", "metropopolis", "miami hip hop", "minnesota hip hop", "modern alternative rock", "modern country rock", "modern rock", "nc hip hop", "neo mellow", "new jersey rap", "new orleans rap", "nyc rap", "nz pop", "oklahoma country", "permanent wave", "philly rap", "pittsburgh rap", "pop", "pop rap", "pop rock", "portland hip hop", "post-teen pop", "progressive electro house", "progressive house", "puerto rican pop", "queens hip hop", "r&b", "rap", "rap conscient", "reggae fusion", "reggaeton", "rock", "scandipop", "slap house", "social media pop", "southern hip hop", "stomp pop", "swedish electropop", "swedish pop", "talent show", "tennessee hip hop", "texas country", "toronto rap", "traditional country", "trap", "trap latino", "trap queen", "tropical", "tropical house", "uk contemporary r&b", "uk dance", "uk funky", "uk pop", "underground hip hop", "urban contemporary", "vapor trap", "viral pop", "viral trap", "virgin islands reggae", "west coast rap", "yodeling" ]2d:T12c6,function renderSVGGl() { // 1. CREATE & SETUP CORE HTML PARENT ELEMENTS const div = DOM.element("div"); div.style.position = "relative"; const svg = d3.select(DOM.svg(width, height)); const tooltip = d3 .select(div) .append("div") .attr("class", "tooltip") .style("display", "none"); svg.style("position", "relative"); svg.style("z-index", "1000"); svg.style("display", "block"); svg.style("width", "100%"); pixiApp.view.style.position = "absolute"; pixiApp.view.style.width = "100%"; pixiApp.view.style.height = "auto"; div.appendChild(pixiApp.view); div.appendChild(svg.node()); document.body.appendChild(div); // scales & veronoi const xScaleZoom = xScale.copy(); const yScaleZoom = yScale.copy(); const delaunay = d3.Delaunay.from( filterData.map((e) => [xScale(e.x) * maxZoom, yScale(e.y) * maxZoom]) ); const voronoi = delaunay.voronoi(extent.flat().map((e) => e * maxZoom)); let currScale = 1; // 2. CONTROL HOW CIRCLES GET REDRAWN AFTER UPDATES (eg zoom) const redrawCtx = () => { const selectedIndex = pixiPoints.findIndex((e, i) => e.selected); pixiPoints.forEach((e, i) => { const d = filterData[i]; e.x = xScaleZoom(d.x); e.y = yScaleZoom(d.y); const aLyricFromThisSongIsSelected = selectedIndex !== undefined && filterData[selectedIndex] && d && filterData[selectedIndex].Song === d.Song; if (e.selected || aLyricFromThisSongIsSelected) { e.scale.x = 2 * dotScale(currScale); e.scale.y = 2 * dotScale(currScale); e.tint = getCircleColor(d); e.alpha = 0.9; } else { e.scale.x = dotScale(currScale); e.scale.y = dotScale(currScale); e.tint = getCircleColor(d); e.alpha = getCircleAlpha(d); } }); }; // 3. IMPLEMENT ZOOM HANDLERS function zoomed(event, d) { currScale = event.transform.k; xScaleZoom.range( [margin.left, width - margin.right].map((d) => event.transform.applyX(d)) ); yScaleZoom.range( [margin.top, height - margin.bottom].map((d) => event.transform.applyY(d)) ); updateAnnotations(xScaleZoom, yScaleZoom, currScale); redrawCtx(); } const zoom = d3 .zoom() .scaleExtent([1, maxZoom]) .translateExtent([ [0, 0], [width, height] ]) .extent(extent) .on("zoom", zoomed); let tick = false; svg.on("mousemove", (event, d) => { if (!tick) { window.requestAnimationFrame(() => { mouseMoved(event); tick = false; }); tick = true; } }); // 4. HANDLE MOUSE INTERACTION function mouseMoved(event) { const [rmx, rmy] = [event.layerX, event.layerY]; const [mx, my] = [ xScale(xScaleZoom.invert(rmx)) * maxZoom, yScale(yScaleZoom.invert(rmy)) * maxZoom ]; const tooltip_width = parseInt(tooltip.style("width")); pointsContainer.children.forEach((d) => { d.selected = false; }); const voronoi_pt_idx = delaunay.find(mx, my); const points_container_last_idx = pointsContainer.children.length - 1; if (pointsContainer.children[points_container_last_idx].selected) { pointsContainer.children[points_container_last_idx].selected = false; // deselect previous element tooltip.style("display", "none"); } if (voronoi_pt_idx !== null) { const d = filterData[voronoi_pt_idx]; tooltip .style("display", "block") .attr("data-px", `${d.x}`) .attr("data-py", d.y) .style("left", `${xScaleZoom(d.x)}px`) .style("top", `${yScaleZoom(d.y)}px`) .html(generateTooltipHTMLContent(d)); const ind = pointsContainer.children.findIndex( (e) => e.orig_idx === voronoi_pt_idx ); pointsContainer.children[ind].selected = true; //select over element const temp = pointsContainer.children[points_container_last_idx]; pointsContainer.children[points_container_last_idx] = pointsContainer.children[ind]; pointsContainer.children[ind] = temp; redrawCtx(); } else { tooltip.style("display", "none"); } } // FINALLY, BIND IT ALL TOGETHER: --------------------------------------- // 5. HOOK UP ZOOM HANDLERS TO svg CANVAS svg .on("click", (e) => { const [rmx, rmy] = [d3.event.layerX, d3.event.layerY]; const [mx, my] = [xScale.invert(rmx), yScale.invert(rmy)]; }) .call(zoom) .call(zoom.scaleTo, 1) .on("dblclick.zoom", (e) => { svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); }); // 6. ADD ANNOTATIONS svg .append("g") .attr("class", "annotation-group") .style("font-size", "1.2em") .call(makeAnnotations); return { div, redrawCtx, currScale }; }2e:[{"id":"67d01e6946dcd47575b4c56845993c0105eaf853d8567f6dd7a3b08e05437a52660069f39ed504d796b01358cd4d2a30319255deb6566dadf0a1aa0949febfe5","href":"https://static.observableusercontent.com/files/67d01e6946dcd47575b4c56845993c0105eaf853d8567f6dd7a3b08e05437a52660069f39ed504d796b01358cd4d2a30319255deb6566dadf0a1aa0949febfe5","name":"viz ready export.csv","type":"text/csv","lastModified":1638172626110.681,"size":709558},{"id":"0d052f373dcb5f993b1cefbbd86a9c7a83d145f7098ae3248d790e06ad8a7887d79aecd552449a85cbe3c72585fc728e66c84209367f71b35e96e4655e439629","href":"https://static.observableusercontent.com/files/0d052f373dcb5f993b1cefbbd86a9c7a83d145f7098ae3248d790e06ad8a7887d79aecd552449a85cbe3c72585fc728e66c84209367f71b35e96e4655e439629","name":"viz ready export@1.csv","type":"text/csv","lastModified":1638176134189.28,"size":2729932}] 29:{"title":"Exploring lyrical themes in Pop Music: Billboard Top 20 songs 2016-2020","cells":[{"id":0,"value":"md`# Exploring lyrical themes in Pop Music: Billboard Top 20 songs 2016-2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2293,"value":"md`\nEvery dot represents 1 line from a song's lyrics. All 16,000 dots represent every unique line from every songs that reached Billboard Top 20 from 2016-2020.\n\nUsing Natural Language Processing (Universal Sentence Encoder) & dimension reduction (UMAP), I've attempted to place each lyric (dot) near lyrics of similar meaning.\n\nHovering a lyric enlarges it and the other lyrics from that song.\n\nInteract & play with the filters below (purple means the lyric fits your filter).\n\n#### Interactions:\n* Mouseover dots to see the lyric text, and to enlarge all the other lyrics from that song\n* Scroll to Zoom In/Out\n* Click and drag to pan around after zoom\n* Double-click to reset\n\n### Filters\n* search lyrics\n* filter over time\n* filter by genre\n* filter by artist\n\nMuch of the viz code is pulled from [Radamés Ajna's viz on YouTube demonized words](https://observablehq.com/@radames/youtube-demonetized-words-similarity-study)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3915,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"chart = html`\n \n Lyric fits filters\n \n\n \n (doesn't fit filters)\n \n\n ${props.div}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"CSS = html`