29:null 2a:["$","title",null,{"children":"Genre map explorer for Spotify | workbook | Observable"}] 2f:T4d2,## Prologue [*Every Noise at Once*](https://everynoise.com/) is an ongoing attempt at an algorithmically-generated, readability-adjusted scatter-plot of the musical genre-space, based on data tracked and analysed for ${noises.length} genre-shaped distinctions by Spotify. The calibration is fuzzy, but in general down is more organic, up is more mechanical and electric; left is denser and more atmospheric, right is spikier and bouncier. Some of these genres have names that you've never heard before, like ${labeledDot("escape room")} ([_What Is “Escape Room” And Why Is It One Of My Top Genres On Spotify?_](https://festivalpeak.com/what-is-escape-room-and-why-is-it-one-of-my-top-genres-on-spotify-a886372f003f)) or ${labeledDot("stomp and holler")} ([_You should look at this chart about music genres_](https://pudding.cool/2023/10/genre/)). They were named by Spotify. Before we make our own chart, let's take a look at the data I've managed to scrape from [*Every Noise at Once*](https://everynoise.com/). This is pretty much the same map, but with the genre names replaced with dots. You're still able to see the genre names by hovering over each dot, and clicking them will navigate to the corresponding genre page. 30:T5ee,*"What are these weirdly named axes? What does the color represent?"* Here's a _very_ simplified explanation. Suppose you had a bunch of genre data, but with many different attributes. You might want to visualise this data in 2 or 3 dimensions, but you'd be upset if you'd have to choose some subset of attributes to visualise. Alternatively, you could use *all* the dimensions by "squishing" them into a smaller number of dimensions using a dimensionality reduction algorithm like [*t*-SNE](https://distill.pub/2016/misread-tsne/) or [UMAP](https://pair-code.github.io/understanding-umap/). You can liken this "squishing" process to sketching a real 3D object onto a 2D piece of paper, such that structure and locality are somewhat preserved. This means that genres that are similar in higher dimensional space remain near each other in lower dimensional space. The [*Every Noise at Once*](https://everynoise.com/) dimensionality reduction reduced [10 genre dimensions](https://everynoise.com/EverynoiseIntro.pdf) down to [2 spatial dimensions and 1 color dimension](https://umap-learn.readthedocs.io/en/latest/embedding_space.html). In this case, the color dimension that varies is hue (as opposed to, say, brightness). To get a better idea of what's going on, let's map the hue angle onto a 3rd axis. Hue is a dimension that [wraps around](https://upload.wikimedia.org/wikipedia/commons/9/90/Colors-i54-ring.png) on itself, so we'll give ourself a slider to choose what we consider 0° on our new 3rd axis. 31:T497,noiseMap3D = { const getHue = (rgb) => chroma(rgb).hsl()[0]; const rotateHue = (h) => (h + hueRotation) % 360; const data = [ { x: noises.map((noise) => noise.x), y: noises.map((noise) => rotateHue(getHue(noise.color))), z: noises.map((noise) => noise.y), hovertext: noises.map((noise) => noise.genre), mode: "markers", type: "scatter3d", marker: { size: 3, color: noises.map((noise) => noise.color), opacity: 1 } } ]; const layout = { margin: { l: 0, r: 0, b: 0, t: 0 }, scene: { camera: { eye: { x: -1.25, y: -1.25, z: 1.25 } }, xaxis: { title: { text: "x" } }, yaxis: { autorange: "reversed", title: { text: "Hue angle (°)" } }, zaxis: { title: { // Frustrating that we can't make the z axis vertical text: "y" } } }, height: 600, width: width }; const div = DOM.element("div"); return Plotly.newPlot(div, data, layout); return div; }32:T41e,clusterMap = addTooltips( Plot.plot({ caption: md`Click to open corresponding [*Every Noise at Once*](https://everynoise.com/) genre page`, x: xScale, y: yScale, width: width, height: height * 0.8, r: { range: [0, 15] }, color: { legend: true }, marks: [ hull, Plot.density(hydratedClusters, { x: "x", y: "y", fill: (d) => d.representative_playlist_name, fillOpacity: 0.02, clip: true }), on( Plot.dot(hydratedClusters, { x: "x", y: "y", fill: (d) => d.representative_playlist_name, fillOpacity: (d) => _(d.artists).some((artist) => searchedArtistsSet.has(artist.name) ) && searchedGenresSet.has(d.genre) ? 0.9 : 0.1, r: "radius", title: (cluster) => makeClusterTooltip({ cluster }) }), { click: (event, d) => window.open(d.datum.link, "_blank") } ) ] }) )33:T4f6,artistMap = addTooltips( Plot.plot({ caption: "Click to open artist on Spotify", x: xScale, y: yScale, height: height * 0.8, width: width, color: { legend: true }, marks: [ hull, Plot.density( hydratedArtists.filter((a) => a.center_of_mass), { x: (d) => d.center_of_mass.x, y: (d) => d.center_of_mass.y, fill: (d) => d.from_playlist.name, fillOpacity: 0.03, clip: true } ), on( Plot.dot( hydratedArtists.filter((a) => a.center_of_mass), { // we have to precompute the COM or re-renders take ages x: (d) => d.center_of_mass.x, y: (d) => d.center_of_mass.y, fillOpacity: (d) => comSearchedArtistsSet.has(d.name) && dateRange[0] <= d.discovery_date.valueOf() && d.discovery_date.valueOf() <= dateRange[1] ? 0.9 : 0.1, fill: (d) => d.from_playlist.name, title: (artist) => makeArtistTooltip({ artist }) } ), { click: (event, d) => window.open(d.datum.external_urls.spotify, "_blank") } ) ] }) )34:T4ff,playlistAdditionTimeline = addTooltips( Plot.plot({ caption: "Click to open track on Spotify", width, facet: { marginLeft: 200, data: hydratedTracks, y: (d) => d.from_playlist.name, label: "Playlist" }, x: { label: "Date track added to playlist →" }, // sort facets by mean // https://observablehq.com/@observablehq/plot-facets fy: { domain: d3.groupSort( hydratedTracks, (g) => -d3.mean(g, (d) => new Date(d.added_at)), (d) => d.from_playlist.name ) }, marks: [ Plot.ruleX([dateRange[0]], { stroke: "blue", strokeWidth: 1 }), Plot.ruleX([dateRange[1]], { stroke: "red", strokeWidth: 1 }), Plot.frame(), on( Plot.tickX(hydratedTracks, { label: "Date first added", x: (d) => new Date(d.added_at), title: (d) => `${d.track.name} by ${d.track.artists[0].name}` + `\nAdded ${new Date(d.added_at).toLocaleDateString("en-AU")}`, strokeWidth: 2, strokeOpacity: 0.5, stroke: (d) => d.from_playlist.name }), { click: (event, d) => window.open(d.datum.track.external_urls.spotify, "_blank") } ) ] }) )35:T545,trackReleaseTimeline = addTooltips( Plot.plot({ caption: "Click to open track on Spotify", width, facet: { marginLeft: 200, data: hydratedTracks, y: (d) => d.from_playlist.name, label: "Playlist" }, x: { label: "Date track released →" }, // sort facets by mean // https://observablehq.com/@observablehq/plot-facets fy: { domain: d3.groupSort( hydratedTracks, (g) => -d3.mean(g, (d) => new Date(d.track.album.release_date)), (d) => d.from_playlist.name ) }, marks: [ Plot.ruleX([dateRange[0]], { stroke: "blue", strokeWidth: 1 }), Plot.ruleX([dateRange[1]], { stroke: "red", strokeWidth: 1 }), Plot.frame(), on( Plot.tickX(hydratedTracks, { label: "Date track released", title: (d) => `${d.track.name} by ${d.track.artists[0].name}` + ` \nReleased ${new Date( d.track.album.release_date ).toLocaleDateString("en-AU")}`, x: (d) => new Date(d.track.album.release_date), strokeWidth: 2, strokeOpacity: 0.5, stroke: (d) => d.from_playlist.name }), { click: (event, d) => window.open(d.datum.track.external_urls.spotify, "_blank") } ) ] }) )36:T6df,[*Music Taste Analysis* (2019)](https://exportify.net/taste_analysis) by [Pavel Komarov](https://github.com/pavelkomarov) performs extensive analysis of data from [Spotify's Audio Feature API](https://developer.spotify.com/discover/), ultimately concluding with a hand-rolled dimensionality reduction with *t*-SNE.

${await FileAttachment("t-sne.png").image()} [*Fashion and art cycles are driven by counter-dominance signals of elite competition: quantitative evidence from music styles* (2019)](https://royalsocietypublishing.org/doi/10.1098/rsif.2018.0731) by Peter Klimek, Robert Kreuzbauer and Stefan Thurner, constructs a style-similarity network to track the propagation of new music trends over time.

${await FileAttachment("network.gif").image()}

Nodes correspond to styles with colours given by their genre. The size of the nodes is proportional to their popularity.

[*Reconstructing the structure of the world-wide music scene with Last.fm*](http://sixdegrees.hu/last.fm/) by [Tamás Nepusz](http://sixdegrees.hu/last.fm/about.html) constructs a graph representation of artist similarity relationships derived from the Last.fm database.

[Higher resolutions](http://sixdegrees.hu/last.fm/download.html)

[*Crowdsourcing the Definition of "Punk"* (2015)]( https://pudding.cool/2017/03/punk/) by [Matt Daniel](https://pudding.cool/author/matt-daniels/), scraped Spotify and YouTube playlists and used genre-titled playlists to identify genre-associated artists.

37:T46c,paginate = async (f) => { const pageSize = 50; const allItems = []; function requestPage(offset, limit = pageSize) { return f({ limit, offset }) .then((response) => { mutable paginationMonitoring = [ ...mutable paginationMonitoring, { itemCount: response.body.items.length, time: Date.now() } ]; return response; }) .catch((error) => { console.error(error); mutable paginationMonitoring = [ ...mutable paginationMonitoring, { error, time: Date.now() } ]; return { body: { items: [], total: 0 } }; }); } const head = await requestPage(/*offset=*/ 0); allItems.push(head.body.items); const pages = Math.floor(head.body.total / pageSize); const offsets = Array(pages) .fill(0) .map((e, i) => i + 1) .map((x) => x * pageSize); const pageResponses = offsets.map((offset) => requestPage(offset)); for await (const pageResponse of pageResponses) { allItems.push(pageResponse.body.items); } return allItems.flat(); }38:T417,hydratedArtists = hydratedPlaylists.flatMap((playlist) => playlist.artists.map((artist) => { const artistTracks = playlist.tracks.filter( (track) => // tracks may be created by uncredited artists [...track.track.artists, ...track.track.album.artists].filter( (a) => a.name === artist.name ).length ); const artistAlbums = _(artistTracks) .map((track) => track.track.album) .uniqBy((album) => album.id) .value(); if (artistTracks.length === 0) { console.log(artist); } return { albums: artistAlbums, tracks: artistTracks, // There's an odd scenario where an artist will be a coartist on an album // but none of the tracks, e.g. Kids See Ghosts discovery_date: artistTracks.length && minByAddedAt({ tracks: artistTracks }), center_of_mass: calcCenterOfMass({ genres: artist.genres }), from_playlist: playlist, // for performance genres_set: new Set(artist.genres), ...artist }; }) )39:T645,plotPathMap = ({ artists }) => { return addTooltips( Plot.plot({ caption: "Click to open artist on Spotify", width, height: height * 0.8, color: { legend: true, domain: [...clusterMap.scale("color").domain, "#0000FF"] }, x: xScale, y: yScale, marks: [ hull, Plot.density( hydratedArtists.filter((a) => a.center_of_mass), { x: (d) => d.center_of_mass.x, y: (d) => d.center_of_mass.y, fill: (d) => d.from_playlist.name, fillOpacity: 0.03, clip: true } ), Plot.line(artists, { x: (d) => d.center_of_mass.x, y: (d) => d.center_of_mass.y, curve: "catmull-rom", marker: "arrow" }), on( Plot.image(artists, { x: (d) => d.center_of_mass.x, y: (d) => d.center_of_mass.y, // last is typically the smallest src: (d) => (_.last(d.images) ? _.last(d.images).url : undefined), width: (d) => 24, title: (artist) => makeArtistTooltip({ artist }) }), { click: (event, d) => window.open(d.datum.external_urls.spotify, "_blank") } ), Plot.text(artists, { x: (d) => d.center_of_mass.x, y: (d) => d.center_of_mass.y, fill: "blue", href: (d) => d.external_urls.spotify, target: () => "_blank", text: (d) => d.name, dy: -15 }) ] }) ); }3a:T4d3,renderArtistsTable = ({ artists }) => { const data = artists.map((artist) => { return { ...artist, Name: artist.name, Genres: artist.genres, Albums: artist.albums, Link: "OPEN SPOTIFY" }; }); return Inputs.table(data, { columns: ["Name", "Link", "Genres", "Albums"], format: { Name: (name, i) => html`${name}`, Genres: (genres) => html`

${genres.map( hyperlinkGenre )}

`, Albums: (albums) => html`

${albums.map((album) => { return html`

${album.name} OPEN SPOTIFY

`; })}

`, Link: (link, i) => html`${link}` } }); }3b:[{"id":"c84410cd550ee5934bff809eb1956f4ba5a9a633a158e04d6a29d76e0edeaf1a1180be9fd90fd81e52275cbf3346239cd0a00559f96e85ea3b3de268ff783f1f","href":"https://static.observableusercontent.com/files/c84410cd550ee5934bff809eb1956f4ba5a9a633a158e04d6a29d76e0edeaf1a1180be9fd90fd81e52275cbf3346239cd0a00559f96e85ea3b3de268ff783f1f","name":"punk.png","type":"image/png","lastModified":1702752937571.082,"size":332255},{"id":"81fdb9695e398a1cdb5e1d0fc0497b06979b5e9ff4af4854336da6397c1881183adf1582b4e295953f61590c095472fc37c239c8f5868d72d1a32f9dc7a65bd3","href":"https://static.observableusercontent.com/files/81fdb9695e398a1cdb5e1d0fc0497b06979b5e9ff4af4854336da6397c1881183adf1582b4e295953f61590c095472fc37c239c8f5868d72d1a32f9dc7a65bd3","name":"network.gif","type":"image/gif","lastModified":1702752937571.082,"size":67920},{"id":"5b6ad41eec61b7369182c686fceb7ebbd6b7e355738f2f5fa34b55ab1df5545491a9bb3ad48fb31c3b48860ac60a2b28b0be7ebd9a238d9719d196c73f3d3761","href":"https://static.observableusercontent.com/files/5b6ad41eec61b7369182c686fceb7ebbd6b7e355738f2f5fa34b55ab1df5545491a9bb3ad48fb31c3b48860ac60a2b28b0be7ebd9a238d9719d196c73f3d3761","name":"gatekeeper.png","type":"image/png","lastModified":1702752937571.082,"size":158570},{"id":"95b06ce0e22d95ec5d0dc64c9e3236b53d55e0f896b5371459c8b7e40665eb0ce67f4e72d84ff0392d583599d64db23eac94878baa493a4c5f5cb39afab26f3a","href":"https://static.observableusercontent.com/files/95b06ce0e22d95ec5d0dc64c9e3236b53d55e0f896b5371459c8b7e40665eb0ce67f4e72d84ff0392d583599d64db23eac94878baa493a4c5f5cb39afab26f3a","name":"icon4-21px.png","type":"image/png","lastModified":1702752937571.082,"size":2230},{"id":"8cea18152eb15d9e3c14bfcccfcca879a0fafa5dbec319d9792bfabd31306c928671a8148b87e62677e0cac22f5d933cefd93ea95013122295c4d22d4d24f4a6","href":"https://static.observableusercontent.com/files/8cea18152eb15d9e3c14bfcccfcca879a0fafa5dbec319d9792bfabd31306c928671a8148b87e62677e0cac22f5d933cefd93ea95013122295c4d22d4d24f4a6","name":"Screen Shot 2022-10-25 at 10.49.48 pm.png","type":"image/png","lastModified":1702752937571.082,"size":662235},{"id":"7900d973327389f9370c5e07c17260f1b15b3aa8fb583614bcb288065b5d84c525a91824ff6504252dbcd566403d7410c4493c93472366e1c85c53fe17d0fd37","href":"https://static.observableusercontent.com/files/7900d973327389f9370c5e07c17260f1b15b3aa8fb583614bcb288065b5d84c525a91824ff6504252dbcd566403d7410c4493c93472366e1c85c53fe17d0fd37","name":"lastfm_360_graph_white.png","type":"image/png","lastModified":1702752937571.082,"size":139107},{"id":"4aa05a8ec1ee233b41619ad351670578e982f43a608b8d527e942ba4b580a8eda02ebd0e3d0d7332a02eb079184f27b8b610ca7c2142f64880044d44ec041ce8","href":"https://static.observableusercontent.com/files/4aa05a8ec1ee233b41619ad351670578e982f43a608b8d527e942ba4b580a8eda02ebd0e3d0d7332a02eb079184f27b8b610ca7c2142f64880044d44ec041ce8","name":"t-sne.png","type":"image/png","lastModified":1702752937571.082,"size":235561},{"id":"cf501526e6aa3fa8ed4443b8d0689738a6207bdbe94f08978d82a09429ef30d6c50933031c16b76db00529ef2ae8ffc97acc3615f1fc35500c947d8d74858d72","href":"https://static.observableusercontent.com/files/cf501526e6aa3fa8ed4443b8d0689738a6207bdbe94f08978d82a09429ef30d6c50933031c16b76db00529ef2ae8ffc97acc3615f1fc35500c947d8d74858d72","name":"every_noise_at_once@2.html","type":"text/html","lastModified":1702752937571.082,"size":3741004}] 2d:{"id":"f0b9330f4d8195de","slug":null,"title":"Genre map explorer for Spotify","thumbnail":null,"access_level":"public","create_time":"$D2023-12-16T18:55:37.571Z","update_time":"$D2023-12-16T18:55:37.571Z","view_time":null,"first_public_time":"$D2023-12-16T18:55:37.571Z","fork":{"id":"0a5b8da90fa81ec5","slug":"genre-map-explorer-for-spotify","title":"Genre map explorer for Spotify","owner":{"id":"cc48459e4293f942","login":"mjbo","name":"Max Bo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bc8fcf40df5d8609","login":"workbook","name":"workbook","avatar_url":"https://avatars-next.observableusercontent.com/d68a020d88f0617477b1dc7f505aca23d2a8c74499aa91d7c8540d7f73f3d000","tier":"starter_2024"},"version":9469,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"55110898037bd749","login":"royfrancis","name":"Roy Francis","avatar_url":"https://avatars-next.observableusercontent.com/d0924bc44916ba128fa2af6701e70d3347e33764e6756a83d5dd5f1d4d296143","tier":null}],"members":[{"type":"individual","id":"55110898037bd749","login":"royfrancis","name":"Roy Francis","avatar_url":"https://avatars-next.observableusercontent.com/d0924bc44916ba128fa2af6701e70d3347e33764e6756a83d5dd5f1d4d296143","tier":null,"role":"editor"},{"type":"team","id":"bc8fcf40df5d8609","login":"workbook","name":"workbook","avatar_url":"https://avatars-next.observableusercontent.com/d68a020d88f0617477b1dc7f505aca23d2a8c74499aa91d7c8540d7f73f3d000","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Genre map explorer for Spotify","cells":[{"id":8994,"value":"# Genre map explorer for Spotify\n\nThis notebook overlays your Spotify playlists over [Glenn McDonald](https://twitter.com/glenn_mcdonald)'s [*Every Noise at Once*](https://everynoise.com/) genre map. It will let you see how your playlists relate to each other genre wise, as well as to see the genres assigned to artists you've listened to.\n\nSpotify have published an overview of [*Every Noise at Once*](https://everynoise.com/) in [*How Spotify Discovers the Genres of Tomorrow*](https://artists.spotify.com/blog/how-spotify-discovers-the-genres-of-tomorrow).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9207,"value":"viewof jumpToStep2 = response.access_token\n ? Inputs.button(md`# Jump to step 2?`, {\n reduce: () => scrollToElem(document.getElementById(\"step-2\"))\n })\n : htl.html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9000,"value":"### Motivation\n\nI have a series of genre themed playlists [on my Spotify profile](https://open.spotify.com/user/aquahair_). I needed a tool that would help me\n\n1. Identify artists that I put into the wrong playlist\n2. Split playlists that had grown too big into sub-genre playlists\n3. Ensure a sensible ordering of artists in each playlist","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9003,"value":"### Preview\n\nHere's output using data from my [profile](https://open.spotify.com/user/aquahair_/playlists):\n\n![preview@1.png](${await FileAttachment(\"Screen Shot 2022-10-25 at 10.49.48 pm.png\").url()})\n\nEach dot is a genre. Genres that are similar to each other are positioned closer to each other.\n\nHovering over a dot shows a tooltip of artists who produce music of that genre, and the playlist those artists are found.\n\nThe bigger the dot, the more artists in your playlists producing music of that genre. Big dots have big tooltips.\n\nDots may be coloured differently. A certain colour means that a majority of that genre's artists were found in the same playlist. Different colours mean different playlists.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3071,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5902,"value":"viewof searchedNoises = Inputs.search(\n noises.map((noise) => noise.genre),\n {\n placeholder: \"Search genre: e.g. 'rock'\",\n datalist: noises.map((noise) => noise.genre)\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5913,"value":"searchedNoises","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3099,"value":"noiseMap = addTooltips(\n Plot.plot({\n color: { type: \"identity\" },\n caption: md`Click to open corresponding [*Every Noise at Once*](https://everynoise.com/) genre page`,\n x: xScale,\n y: yScale,\n height: 500,\n marks: [\n Plot.dot(noises, {\n x: \"x\",\n y: \"y\",\n fill: \"color\",\n title: \"genre\",\n href: \"link\",\n target: \"_blank\",\n fillOpacity: (d) => (searchedNoisesSet.has(d.genre) ? 0.9 : 0.1)\n }),\n hull\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6712,"value":"We can see that similar genres \"live\" near each other and occupy distinct parts of the map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6672,"value":"addTooltips(\n Plot.plot({\n color: { type: \"identity\" },\n x: { axis: null },\n y: { axis: null },\n fx: {\n tickRotate: 20,\n tickPadding: 2,\n tickSize: 0\n },\n height: width > 500 ? 100 : 70,\n scale: {\n axis: null\n },\n width,\n facet: {\n data: genreHighlights,\n x: (d) => d.facet\n },\n marks: [\n hull,\n Plot.dot(genreHighlights, {\n x: \"x\",\n y: \"y\",\n fill: \"color\",\n title: \"genre\",\n href: \"link\",\n target: \"_blank\",\n filter: (d) => d.highlighted\n // fillOpacity: (d) => (d.highlighted ? 0.9 : 0.002)\n })\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3288,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3310,"value":"viewof hueRotation = Inputs.range([0, 360], {\n value: 160,\n step: 10,\n label: \"Hue angle offset (°)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3195,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2983,"value":"So while ${labeledDot(\"old school hip hop\")} and ${labeledDot(\"japanese house\")} may _appear_ to be close together on the 2D map, they may be somewhat further apart genre wise in a higher dimensional space.\n\nThe charts we're going to generate will remain in 2D, mainly because it's a nicer user experience. But now you know there's some caveats to that representation 😊\n\n## Generating your own chart\n\n*This process is a lot nicer on a desktop computer. While it still works on mobile, things may get a bit cramped visually.*\n\n### Step 1\n\n**Click the following button to authorise access to your Spotify account**\n\nThis only asks for permission to access your private and collaborative playlists.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":680,"value":"viewof token = getTokenView({\n clientId,\n permissions,\n redirect: \"https://observablehq.com/@mjbo/genre-map-explorer-for-spotify\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2350,"value":"### Step 2\n\n**Choose the playlists you want to analyse**\n\nTick the checkbox next to the playlist to load it for analysis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1136,"value":"viewof playlistTable = {\n const data = playlists.map((playlist) => ({\n ...playlist,\n Name: playlist.name,\n // we need to synthesize extra columns because objects can't be sorted\n \"Track count\": playlist.tracks.total,\n Owner: playlist.owner.display_name,\n Thumbnail: playlist.images[0] ? playlist.images[0].url : undefined,\n Link: \"OPEN SPOTIFY\"\n }));\n\n return Inputs.table(data, {\n columns: [\"Thumbnail\", \"Name\", \"Link\", \"Owner\", \"Track count\"],\n required: false,\n format: {\n Owner: (owner, i) =>\n html`${owner}`,\n Name: (name, i) =>\n html`${name}`,\n Thumbnail: (url, i) =>\n html`

`,\n Link: (link, i) =>\n html`${link}`\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3114,"value":"### Step 3\n\n**Wait for the data to load** \n\nWe've split the requested data into chunks. If you see any red chunks, you might have tried to load too many playlists or tracks and have now been rate-limited. If that happens, try again later and select a smaller number of playlists, or smaller playlists.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6003,"value":"loadingBar = addTooltips(\n Plot.plot({\n width,\n color: { type: \"identity\" },\n x: {\n axis: \"top\",\n label: \"Chunk loading status\"\n },\n marks: [\n Plot.cell(paginationMonitoring, {\n x: (d, i) => i,\n fill: (d) => (d.error ? \"red\" : \"green\"),\n title: (d) => (d.error ? d.error.message : `${d.itemCount} items`)\n })\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3955,"value":"## Genre cluster scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2413,"value":"viewof searchedGenres = Inputs.search(genresInPlaylists, {\n placeholder: \"Search genre: e.g. 'rock'\",\n datalist: genresInPlaylists\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2676,"value":"searchedGenres","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2634,"value":"viewof searchedArtists = Inputs.search(artistsInPlaylists, {\n placeholder: \"Search artist: e.g. 'DJ Shadow'\",\n datalist: artistsInPlaylists\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2672,"value":"searchedArtists","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6396,"value":"viewof condensedTooltips = Inputs.toggle({\n label: \"Condensed tooltips\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1918,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3709,"value":"## Artist \"centre of mass\" scatterplot\n\nRather than each dot representing a cluster of artists, we could just plot each individual artist on the map. We could plot each artist in a spot most representative of all the genres they perform, perhaps the average. This will be the \"centre of mass\" of an artist. We'll keep colouring points by their source playlist. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3723,"value":"viewof comSearchedArtists = Inputs.search(artistsInPlaylists, {\n placeholder: \"Search artist: e.g. 'DJ Shadow'\",\n datalist: artistsInPlaylists\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4140,"value":"comSearchedArtists","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3675,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4897,"value":"**Show only artists added to playlists as of:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5015,"value":"viewof dateRange = rangeSlider({\n title: \"Date range\",\n min: minAddedAt.valueOf(),\n max: maxAddedAt.valueOf(),\n value: [minAddedAt.valueOf(), maxAddedAt.valueOf()],\n format: (d) => new Date(d).toLocaleDateString(\"en-AU\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4654,"value":"artistAdditionTimeline = addTooltips(\n Plot.plot({\n caption: \"Click to open artist on Spotify\",\n width,\n x: {\n label: \"Date artist first added to any playlist →\"\n },\n marks: [\n on(\n Plot.voronoi(hydratedArtists, {\n x: \"discovery_date\",\n fill: (d) => d.from_playlist.name,\n fillOpacity: (d) =>\n dateRange[0] <= d.discovery_date.valueOf() &&\n d.discovery_date.valueOf() <= dateRange[1]\n ? 0.9\n : 0.1,\n title: (artist) => makeArtistTooltip({ artist })\n }),\n {\n click: (event, d) =>\n window.open(d.datum.external_urls.spotify, \"_blank\")\n }\n ),\n Plot.ruleX([dateRange[0]], { stroke: \"blue\", strokeWidth: 5 }),\n Plot.ruleX([dateRange[1]], { stroke: \"red\", strokeWidth: 5 })\n ]\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4901,"value":"## Track playlist addition timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4955,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4950,"value":"## Track release date timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4924,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3585,"value":"## Playlist smoother\n\nIt would be nice if we had a tool that ensured there were smooth genre transitions between each artist in a playlist. Going from ${labeledDot(\"jazz\")} to ${labeledDot(\"rock\")} is jarring. Maybe we could rearrange our playlists to put some ${labeledDot(\"jazz rock\")} in the middle to ease us from one artist to another? \n\nWe'll take a playlist, look at the order in which artists appear, and plot an ordered path between their centre of masses. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3631,"value":"viewof playlistToSmooth = Inputs.select(\n hydratedPlaylists.map((playlist) => playlist.name),\n { label: \"Select playlist\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5671,"value":"unsmoothedPathMap = plotPathMap({ artists: artistsToSmooth })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6162,"value":"renderArtistsTable({ artists: artistsToSmooth })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5479,"value":"Now let's reorder them. Ultimately, the smoothest playlist is probably the one that minimises the aggregate sum of the distances between every artist's centre of mass. Fortunately, this has a proper name: finding the shortest [Hamiltonian path](https://en.wikipedia.org/wiki/Hamiltonian_path). Let's do that!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5434,"value":"smoothedPathMap = plotPathMap({ artists: smoothedArtists })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6278,"value":"renderArtistsTable({ artists: smoothedArtists })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8450,"value":"Let's save the smoothed playlist! Copy the following tracks to your clipboard and then paste them (Ctrl + V on Windows, ⌘ + V on Mac) into a playlist of your choice. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8533,"value":"copyStatus","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8459,"value":"viewof copyStatus = Inputs.button(\n \"Copy all smoothed playlist tracks to clipboard\",\n {\n value: md``,\n reduce: () => {\n navigator.clipboard.writeText(urlBlob);\n return md`Copied!`;\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8418,"value":"

${urlBlob}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":9316,"value":"Getting weird results? Because we do not have genre labels for tracks and albums, only artists, you might find artists deviating significantly from their expected position. \n\nAs an example, an artist like [Ulver](https://rateyourmusic.com/artist/ulver), famous for 1995's ${labeledDot(\"atmospheric black metal\")}\n[*Bergtatt: Et eeventyr i 5 capitler*](https://rateyourmusic.com/release/album/ulver/bergtatt-et-eeventyr-i-5-capitler/), and 2000's ${labeledDot(\"trip hop\")} (!) [*Perdition City*](https://rateyourmusic.com/release/album/ulver/perdition-city/) will have an odd centre of mass, due to the dramatic difference between these genres.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7661,"value":"## Playlist \"join point\" detection\n\nSome artists manage to straddle multiple genres, to the extent that it may be difficult to find an appropriate playlist to put them in.\n\nWe can find these artists by constructing a force-directed graph. Each node is an artist, and an edge between two artists indicate that they both perform a shared genre. These edges drag then drag artists towards each other, such that artists that perform shared genres get clustered together. \n\n\n

\n\nIn the example above, [Sweet Trip](https://rateyourmusic.com/artist/sweet-trip), a performer of ${labeledDot(\"glitchbreak\")} *and* ${labeledDot(\"shoegaze\")}, is an an effective \"join point\" between an electronic-dominated playlist and a shoegaze-dominated playlist.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8344,"value":"clusterMap.legend(\"color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8232,"value":"sigmaContainer = {\n const height = 600;\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5614,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9039,"value":"## Successor art\n\n[*TastePaths: Enabling deeper exploration and understanding of personal preferences in recommender systems* (2022)](https://research.atspotify.com/2022/03/tastepaths-enabling-deeper-exploration-and-understanding-of-personal-preferences-in-recommender-systems/)\n\n> An interactive web tool that helps users explore an overview of the genre-space via a graph of connected artists.\n\n\n

\n\n\nA lot of the work here is similar to work I published and distributed in 2021, particularly the genre clustering visualisation, the force-directed artist graph, and the playlist smoothing path. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2889,"value":"## Prior art\n\n[*Visualizing Musical Genres Using Every Noise at Once* (2020)](https://observablehq.com/@ben-tanen/visualizing-musical-genres-using-every-noise-at-once) by [Ben Tanen](https://observablehq.com/@ben-tanen) similarly uses the [*Every Noise at Once*](https://everynoise.com/) data to map out an entire music library. \n\nWe're able to take a look at his work using our aggregated playlist data instead:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2904,"value":"

\n ${chart3}\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":9252,"value":"[*What makes a song popular on Spotify* (2021)](https://observablehq.com/d/e4006bb44148165f) analyses the Global Top 200 list of music to discover relationships between popular songs' genres.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9267,"value":"

${alternativeChart}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":6462,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4204,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1042,"value":"## Literate walkthrough\n\n
\n### Styling\n\nSpotify links have to comply with [Spotify's Design Guidelines](https://developer.spotify.com/documentation/general/design-and-branding).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7130,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7459,"value":"We'll also import a special screen height value for an attempt at some mobile-friendly design. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6131,"value":"import { height } from \"@fil/height\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9341,"value":"We might also want some special for the genre names.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9329,"value":"function labeledDot(genre) {\n const slug = genre.replaceAll(\" \", \"\");\n return ` n.genre === genre).color\n }\">⬤ ${genre} `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9344,"value":"md`${labeledDot(\"escape room\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1562,"value":"### [*Every Noise at Once*](https://everynoise.com/)\n\nLet's take a look at a downloaded copy of the HTML at [*Every Noise at Once*](https://everynoise.com/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1571,"value":"everyNoiseAtOnce = FileAttachment(\"every_noise_at_once@2.html\").html()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5293,"value":"children = everyNoiseAtOnce.getElementsByClassName(\"canvas\")[0].children","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1676,"value":"We'll clean the elements up a bit so we have all the genres, their positions on the map, their color and a link to them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1618,"value":"stripArrowSuffix = (str) => str.substring(0, str.length - 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5296,"value":"stripArrowSuffix(children[0].innerText)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1591,"value":"stripPxSuffix = (str) => str.substring(0, str.length - 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5301,"value":"stripPxSuffix(children[0].style.left)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1578,"value":"rawNoises = Array.from(\n everyNoiseAtOnce.getElementsByClassName(\"canvas\")[0].children\n).map((child) => ({\n genre: stripArrowSuffix(child.innerText),\n x: parseInt(stripPxSuffix(child.style.left)),\n y: -parseInt(stripPxSuffix(child.style.top)), // top = -y; we have to flip\n color: child.style.color,\n link: child.getElementsByClassName(\"navlink\")[0].href\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8479,"value":"Tragically, these `y` coordinates are negative as the HTML expresses them descending from the top of the page.\n\nWe need to figure out what the maximum coordinates are so we can map the transform the `y` domain from negative to positive. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8484,"value":"xExtent = Math.max(...rawNoises.map((child) => child.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8489,"value":"yExtent = -Math.min(...rawNoises.map((noise) => noise.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8582,"value":"Now let's normalise the coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8585,"value":"noises = rawNoises.map((noise) => ({\n ...noise,\n y: noise.y + yExtent\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8601,"value":"We should give them some nice labels as well.\n\n> The calibration is fuzzy, but in general down is more organic, up is more mechanical and electric; left is denser and more atmospheric, right is spikier and bouncier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8604,"value":"xScale = ({\n label: \"← denser & atmospheric, spikier & bouncier →\",\n labelAnchor: \"center\",\n // https://observablehq.com/@observablehq/plot-cheatsheets-scales\n tickFormat: \"0s\",\n labelOffset: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8606,"value":"yScale = ({\n label: \"← organic, mechanical & electric →\",\n labelAnchor: \"center\",\n // https://observablehq.com/@observablehq/plot-cheatsheets-scales\n tickFormat: \"0s\",\n labelOffset: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8610,"value":"Furthermore, we will want to indicate the maximum extent of the noise map on subsequent visualisations. Let's render a convex hull.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8617,"value":"hull = Plot.hull(noises, {\n x: \"x\",\n y: \"y\",\n strokeOpacity: 0.1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7402,"value":"Because we have links to genres available, we'll import a plugin that makes `Plot` elements clickable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6756,"value":"import { on } from \"@fil/plot-onclick-experimental-plugin\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6719,"value":"We'll build some data that we'll use to indicate certain sections of the map being occupied by certain genres. This is an expensive operation so we'll compute this outside of a cell that might be influenced by `width`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7406,"value":"highlightedGenres = [\n \"ambient\",\n \"dance\",\n \"electronic\",\n \"blues\",\n \"country\",\n \"folk\",\n \"hip hop\",\n \"classical\",\n \"jazz\",\n \"metal\",\n \"punk\",\n \"rock\",\n \"pop\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6717,"value":"genreHighlights = highlightedGenres.flatMap((facet) => {\n // We need to precompile as early as possible or we'll tank the performance.\n const regex = new RegExp(facet);\n\n return noises.map((noise) => ({\n ...noise,\n facet,\n highlighted: regex.test(noise.genre)\n }));\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8920,"value":"We'll create a helper that makes it visually nice to talk about genres that appear on [*Every Noise at Once*](https://everynoise.com/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8927,"value":"hyperlinkGenre = (genre) => {\n // strip spaces from the genre name and tack it onto the prefix\n const slug = genre.split(\" \").join(\"\");\n return htl.html`${genre}, `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8924,"value":"renderNoise = (genre) => {\n return md`[${genre}](${hyperlinkGenre(genre)}) n.genre === genre).color\n }\">⬤`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8931,"value":"renderNoise(\"shoegaze\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3242,"value":"### 3D Plot\nFor the 3D plot we need... a 3D plotting library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3190,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7417,"value":"and a library to assess the chroma of the genre's colors on [*Every Noise at Once*](https://everynoise.com/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3237,"value":"chroma = require(\"https://bundle.run/chroma-js@2.1.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3754,"value":"### Authorization\n\nWe've [registered a new app at](https://developer.spotify.com/documentation/general/guides/app-settings/) the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/applications).\n\nWe registered it with this notebooks URL as a Redirect URI. In return, we received the following `clientId`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"clientId = \"10c0a40873bf43efaa4f7cf21a783a83\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4398,"value":"**IMPORTANT: If you fork this notebook, you'll need to create a new app, register the fork URL as a `Redirect URI`, and override this `clientId`.**\n\nHere are the permissions we need from [Spotify Developers - Authorization Scopes](https://developer.spotify.com/documentation/general/guides/authorization/scopes/). We just need to read user's private and collaborative playlists. We don't need a scope for public playlists.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3405,"value":"permissions = ({\n Playlists: [\"playlist-read-private\", \"playlist-read-collaborative\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3388,"value":"Let's authorise! Auth-ing with the token view will set the `access_token` in our query string that will be used to query the API.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":997,"value":"import { response, getTokenView } from \"@mjbo/spotify-auth\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3570,"value":"response","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3502,"value":"We want to scroll to the playlist selection table after auth-ing, but we can't use header hashlinks as they're unsupported by Observable. Instead we have to use `scrollIntoView`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3517,"value":"mutable jumped = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3474,"value":"handleJumping = {\n if (jumped) {\n return;\n }\n\n await Promises.delay(2000);\n if (response.access_token) {\n mutable jumped = true;\n\n const elem = document.getElementById(\"step-2\");\n console.log(\"Jumping to \", elem);\n scrollToElem(elem);\n await Promises.delay(500);\n scrollToElem(elem);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9199,"value":"function scrollToElem(elem) {\n elem.scrollIntoView();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1567,"value":"### API\nLets connect to the Spotify API now that we're authorised.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"SpotifyWebApi = require('https://bundle.run/spotify-web-api-node@5.0.2');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"api = {\n const api = new SpotifyWebApi({\n clientId,\n redirectUri: \"https://observablehq.com/@mjbo/genre-map-explorer-for-spotify\"\n });\n api.setAccessToken(token);\n return api;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1096,"value":"Let's figure out what playlists we can work with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"me = (await api.getMe()).body","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1110,"value":"Spotify's API is paginated so we should probably use a helper method to churn through all the pages. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":507,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7426,"value":"We'll dump some data that details whether certain page loads succeeded or failed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5992,"value":"mutable paginationMonitoring = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4024,"value":"### Playlists\n\nWe can load playlists from either our own account by default, or someone else's.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6919,"value":"targetUserId = me.id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"playlists = paginate((pageInfo) => api.getUserPlaylists(targetUserId, pageInfo))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"We'll only analyse selected playlists, but we'll debounce user input so we're not hammering the API immediately after a playlist is selected.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2761,"value":"import { settle } from \"@mjbo/settling-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2340,"value":"selectedPlaylists = settle(viewof playlistTable, /*delay=*/ 3000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1458,"value":"We'll choose a playlist to walk through the data hydration process.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1460,"value":"examplePlaylist = selectedPlaylists[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4028,"value":"### Tracks\n\nNow that we've got a playlist, we need all its tracks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1151,"value":"getTracksForPlaylistAsync = async ({ playlistId }) => {\n return await paginate((pageInfo) =>\n api.getPlaylistTracks(playlistId, pageInfo)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1192,"value":"exampleTracks = getTracksForPlaylistAsync({ playlistId: examplePlaylist.id })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7432,"value":"For the playlist timelines, we need to figure out the first time an artists' tracks were added to a playlist.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4518,"value":"minByAddedAt = ({ tracks }) => {\n if (!tracks.length) {\n return new Date()\n }\n \n const dateString = _(tracks).minBy(\"added_at\").added_at;\n return new Date(dateString);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8801,"value":"maxByAddedAt = ({ tracks }) => {\n if (!tracks.length) {\n return new Date();\n }\n\n const dateString = _(tracks).maxBy(\"added_at\").added_at;\n return new Date(dateString);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8799,"value":"minByAddedAt({\n tracks: exampleTracks\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4033,"value":"### Artists\nFrom those tracks we can get the artists who made them. Tracks may have multiple artists, but often these multiple artists are feature artists. Instead, will look at the track's album's artists for a better representation of multiple authorship.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1201,"value":"extractArtistIdsFromTracks = ({ tracks }) => {\n const ids = tracks.flatMap((track) =>\n track.track.album.artists.map((artist) => artist.id)\n );\n // Remove duplicates\n return [...new Set(ids)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1210,"value":"extractArtistIdsFromTracks({ tracks: exampleTracks })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7448,"value":"There's a maximum limit to the number of artists you can request at once from the API. We split the artist IDs into chunks and fire off a request per chunk.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7444,"value":"ARTIST_API_CHUNK_SIZE = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1275,"value":"chunks = (arr, n) => {\n const chunks = new Array()\n for (let i = 0; i < arr.length; i += n) {\n chunks.push(arr.slice(i, i + n))\n }\n return chunks\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1216,"value":"getArtistsAsync = async ({ artistIds }) => {\n const chunkedIds = chunks(artistIds, ARTIST_API_CHUNK_SIZE);\n\n const callApi = (chunkIds) => {\n return (\n api\n .getArtists(chunkIds)\n .then((response) => response.body.artists)\n // We don't care if we don't get all pages,\n // so long as we don't break the chart.\n .catch((error) => {\n console.error(error);\n return [];\n })\n );\n };\n\n const chunkedResults = await Promise.all(chunkedIds.map(callApi));\n\n return chunkedResults.flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1217,"value":"getArtistsAsync({ artistIds: extractArtistIdsFromTracks({ tracks: exampleTracks }) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4037,"value":"### Playlist hydration\n
\nGreat! So now we can get from a playlist to all the artists who contributed. And artists have the genre information we need! Let's cram the artist data back into the playlist.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1405,"value":"hydratePlaylistAsync = async ({ playlist }) => {\n const tracks = await getTracksForPlaylistAsync({ playlistId: playlist.id });\n return {\n ...playlist,\n tracks,\n artists: await getArtistsAsync({\n artistIds: extractArtistIdsFromTracks({ tracks })\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1548,"value":"hydratePlaylistAsync({ playlist: examplePlaylist })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1387,"value":"Now let's hydrate all our selected playlists using this data pipeline we've made.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1391,"value":"hydratedPlaylists = Promise.all(selectedPlaylists.map(playlist => hydratePlaylistAsync({ playlist })))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2637,"value":"### Search\n\nWe want to to be able to filter our charts by genre or by artist. We will need to build an index for both of these search types.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1659,"value":"genresInPlaylists = new Set(hydratedPlaylists.flatMap(playlist => playlist.artists).flatMap(artist => artist.genres))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2656,"value":"artistsInPlaylists = new Set(hydratedPlaylists.flatMap(playlist => playlist.artists).map(artist => artist.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3800,"value":"Here's what's currently being searched for:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5918,"value":"searchedNoisesSet = new Set(searchedNoises)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4857,"value":"searchedGenresSet = new Set(searchedGenres)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2670,"value":"searchedArtistsSet = new Set(searchedArtists)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2555,"value":"### Artist hydration\n\nFirst we'll unpack all the playlist data into each artist, and do some necessary calculations,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3779,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5221,"value":"exampleArtist = hydratedArtists[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5274,"value":"### Cluster hydration\n\nFor each genre, we're going to display all the (searched) artists in a tooltip when we hover over them. We'll also size genre clusters bigger if they have more artists in them. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2181,"value":"getGenreArtists = ({ genre }) =>\n hydratedArtists.filter((artist) => artist.genres.includes(genre))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3879,"value":"exampleGenre = searchedGenres[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3824,"value":"getGenreArtists({ genre: exampleGenre })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7453,"value":"Unfortunately tooltips are not supported by `Plot` out of the box so we need a plugin for them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2044,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2060,"value":"makeClusterTooltip = ({ cluster }) => {\n const groups = getArtistsGroupedByGenre({ genre: cluster.genre });\n\n let acc = cluster.genre;\n\n for (const [playlist, artists] of Object.entries(groups)) {\n const artistNames = artists\n .map((artist) => artist.name)\n .filter((name) => searchedArtistsSet.has(name));\n\n if (artistNames.length === 0) {\n continue;\n }\n\n if (condensedTooltips) {\n acc += `\\n--- ${playlist} ---`;\n\n for (const chunk of _.chunk(artistNames, 5)) {\n acc += \"\\n\" + chunk.join(\", \");\n }\n } else {\n for (const artistName of artistNames) {\n acc += `\\n${artistName} from ${playlist}`;\n }\n }\n }\n\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5225,"value":"exampleCluster = hydratedClusters[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5098,"value":"makeClusterTooltip({ cluster: exampleCluster })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2512,"value":"We also want to know the most common playlist of origin is for each cluster. We'll use this to color each cluster, so we can know the size and shape of a playlist's \"dominion\" over the chart is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2210,"value":"getArtistsGroupedByGenre = ({ genre }) => {\n const artists = getGenreArtists({ genre });\n\n if (artists.length === 0) {\n return undefined;\n }\n\n return _(artists)\n .groupBy((artist) => artist.from_playlist.name)\n .entries()\n .sortBy(([genre, artists]) => artists.length)\n .reverse()\n .fromPairs()\n .value();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6343,"value":"getArtistsGroupedByGenre({ genre: exampleGenre })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3840,"value":"getMostCommonPlaylistOrigin = ({ genre }) =>\n Object.keys(getArtistsGroupedByGenre({ genre }))[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6350,"value":"getMostCommonPlaylistOrigin({ genre: exampleGenre })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2541,"value":"Now its time to build the datastructure we're going to handoff directly to [Observable Plot](https://github.com/observablehq/plot/blob/main/README.md). \n\nWe're going to draw a dot per genre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2566,"value":"genresInPlaylists","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2584,"value":"We'll join in all the spatial information that we scraped from [*Every Noise at Once*](https://everynoise.com/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2583,"value":"clusters = aq\n .table({ genre: [...genresInPlaylists] })\n .join(aq.from(noises), \"genre\")\n .objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2599,"value":"and then attach all the information we've learned about each artist.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2146,"value":"hydratedClusters = clusters.map((cluster) => {\n const artists = getGenreArtists({ genre: cluster.genre });\n\n return {\n ...cluster,\n artists,\n radius: artists.length,\n representative_playlist_name: getMostCommonPlaylistOrigin({\n genre: cluster.genre\n })\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3855,"value":"### Artist \"centre of mass\" chart\n\nGiven an artist can perform many genres, we need to find a place a *single* spot to put them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3640,"value":"calcCenterOfMass = ({ genres }) => {\n if (genres.length === 0) {\n return undefined;\n }\n\n const hydratedGenres = aq\n .table({ genre: genres })\n .join(aq.from(noises), \"genre\")\n .objects();\n\n return {\n x: _.meanBy(hydratedGenres, \"x\"),\n y: _.meanBy(hydratedGenres, \"y\")\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3893,"value":"exampleArtist.genres","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3644,"value":"calcCenterOfMass({ genres: exampleArtist.genres })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3882,"value":"We use an alternative tooltip for the centre of mass chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3691,"value":"makeArtistTooltip = ({ artist }) => {\n let acc = `${artist.name} from ${\n artist.from_playlist.name\n } added ${artist.discovery_date.toLocaleDateString(\"en-AU\")}`;\n\n for (const genre of artist.genres) {\n acc += `\\n${genre}`;\n }\n\n return acc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3868,"value":"exampleArtist","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3871,"value":"makeArtistTooltip({ artist: exampleArtist })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3990,"value":"We need to define this to make searching fast. Otherwise re-rendering scales ${tex`O(n^2)`} where ${tex`n`} is the number of artists.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3726,"value":"comSearchedArtistsSet = new Set(comSearchedArtists)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4488,"value":"### Dates\n\nWe need to unpack all the tracks from their respective playlists into one flat array so we can plot them on timelines. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4906,"value":"hydratedTracks = hydratedPlaylists.flatMap((playlist) =>\n playlist.tracks.map((track) => {\n return {\n from_playlist: playlist,\n ...track\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5017,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7474,"value":"We want the range slider to start at the first track ever added to the playlist selection set, and end at the last track ever added to the playlist selection set. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8808,"value":"minAddedAt = minByAddedAt({ tracks: hydratedTracks })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5035,"value":"maxAddedAt = maxByAddedAt({ tracks: hydratedTracks })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5489,"value":"### Playlist smoother\n\nAfter figuring out which artists we're going to cram into [`@fil/sort-stuff-by-similarity`](https://observablehq.com/@fil/sort-stuff-by-similarity)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5325,"value":"artistsToSmooth = hydratedArtists.filter(\n (artist) =>\n artist.from_playlist.name === playlistToSmooth && artist.center_of_mass\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7499,"value":"We prepare the format that the notebook expects, while \"smuggling\" in some metadata. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9407,"value":"Before we do that though, we need need to normalize the center of mass dimensions. Right now, the domain of y","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9409,"value":"noiseMap.scale(\"y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9447,"value":"than the domain of x","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9445,"value":"noiseMap.scale(\"x\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5747,"value":"artistsToSmoothPoints = artistsToSmooth.map((artist) => {\n const point = [\n noiseMap.scale(\"x\").apply(artist.center_of_mass.x),\n noiseMap\n .scale(\"y\")\n .apply(noiseMap.scale(\"y\").domain[0] - artist.center_of_mass.y) // gotta invert\n ];\n // squirrel away the artist so we're able to identify the points that come back later on\n // putting the artist in index 2 breaks things so we're forced to do this instead\n point.artist = artist;\n return point;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7504,"value":"We set some options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5875,"value":"optimize","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5859,"value":"viewof optimize = Inputs.checkbox([\"Remove cross-overs\", \"Exchange points\"], {\n value: [\"Remove cross-overs\", \"Exchange points\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5844,"value":"sortOpts = ({\n crossover: optimize.indexOf(\"Remove cross-overs\") > -1,\n points: optimize.indexOf(\"Exchange points\") > -1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5739,"value":"import { order_by_distance } with { sortOpts as opts } from \"@fil/sort-stuff-by-similarity\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9165,"value":"`order_by_distance` has a bit of a problem. Sometimes it doesn't terminate. We'll have to poll the generator a fixed number of times before we terminate with the best-case we've seen so far. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5762,"value":"sortedPoints = {\n let iterations = 0;\n for (const points of order_by_distance(artistsToSmoothPoints)) {\n iterations++;\n\n if (iterations > 40) {\n console.warn(\n \"Failed to stabilize path optimisation. Stopping further refinement.\"\n );\n return points;\n }\n\n yield points;\n }\n\n console.info(`Path took ${iterations} iterations to optimise`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5777,"value":"smoothedArtists = sortedPoints.map((point) => point.artist)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7521,"value":"Then, we plot the visualisation and the metadata in a seperate table. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3661,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5453,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8420,"value":"We want the user to be able to copy-paste the reordered tracks list to wherever they want, so let's find a way to print out all the track URIs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8445,"value":"urlBlob = smoothedArtists\n .flatMap((artist) => artist.tracks)\n .map((track) => track.track.external_urls.spotify)\n .join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7531,"value":"### Force directed graph\n\nEvery artist gets a node","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7548,"value":"nodes = hydratedArtists.map((artist) => ({\n id: artist.name,\n group: artist.from_playlist.name\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7576,"value":"and we link each artist to artists that share the same genres.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7638,"value":"links = {\n const acc = [];\n\n for (let i = 0; i < hydratedArtists.length; ++i) {\n for (let j = i + 1; j < hydratedArtists.length; ++j) {\n const left = hydratedArtists[i];\n const right = hydratedArtists[j];\n\n if (left.name === right.to) {\n continue;\n }\n\n if (left.genres.some((genre) => right.genres_set.has(genre))) {\n acc.push({\n left: left.name,\n right: right.name,\n genres: left.genres.filter((genre) => right.genres_set.has(genre))\n });\n }\n }\n }\n\n return acc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7600,"value":"Let's fetch some rendering libraries. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8196,"value":"graphology = import(\"https://cdn.skypack.dev/graphology@0.24.1?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8311,"value":"graph = {\n const graph = new graphology.MultiUndirectedGraph();\n\n // const uniqueNodes = _.uniqBy(nodes, (n) => n.id);\n\n nodes.forEach((n) =>\n graph.mergeNode(n.id, {\n x: 1,\n y: 1,\n size: 7,\n label: n.id,\n color: clusterMap.scale(\"color\").apply(n.group)\n })\n );\n links.forEach((l) =>\n graph.addEdge(l.left, l.right, { weight: l.genres.length })\n );\n\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8194,"value":"sigma = import(\"https://cdn.skypack.dev/sigma@2.3.1?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8247,"value":"graphologyLayout = import(\"https://cdn.skypack.dev/graphology-layout@0.6.0?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8257,"value":"graphologyLayoutForceatlas2 = import(\n \"https://cdn.skypack.dev/graphology-layout-forceatlas2@0.8.1?min\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8205,"value":"sigmaRenderer = {\n // Hack stolen from https://observablehq.com/@cimi/hello-sigma-js\n sigmaContainer.innerHTML = \"\";\n graphologyLayout.circular.assign(graph);\n const settings = graphologyLayoutForceatlas2.default.inferSettings(graph);\n graphologyLayoutForceatlas2.default.assign(graph, {\n settings,\n iterations: 200\n });\n\n return new sigma.Sigma(graph, sigmaContainer);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2910,"value":"### Ben Tanen prior art data overriding\n\nBen defines his [*Every Noise at Once*](https://everynoise.com/) data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2936,"value":"enao_genres","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2938,"value":"and his personal playlist data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2930,"value":"bt_genres","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2942,"value":"We can make our playlist data look similar to his, which we'll use to override on his notebook. We'll do this by unpacking the genres of each listened artist.\n\nThis gives us a list of every time we've listened to a genre, and the artist that caused us to have listened to that genre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3791,"value":"mb_listens = hydratedArtists.flatMap((artist) =>\n artist.genres.map((genre) => {\n return {\n genre,\n artist: artist.name\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2948,"value":"mb_genres = {\n if (mb_listens.length === 0) {\n return [];\n }\n\n return aq.from(mb_listens).join(aq.from(enao_genres), \"genre\").objects();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9133,"value":"His chart also comes out a little too big for our liking, so we'll override some objects to cut it down to size. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9129,"value":"chart_param = ({ ...chart_param_init, width: width / 2, height: width / 2 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2902,"value":"import { chart, chart3, enao_genres, bt_genres, chart_param_init } with {\n mb_genres as bt_genres,\n chart_param as chart_param\n} from \"@ben-tanen/visualizing-musical-genres-using-every-noise-at-once\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9264,"value":"### Other prior art visualisations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9279,"value":"We want the graph to be maximally connected:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9271,"value":"minGenres = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9255,"value":"import { alternativeChart } with { minGenres as minGenres } from \"@jonathan-whiteley/spotify-genre-network\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8555,"value":"## Experiments\n\nAlternatively, we save an entirely new playlist to our account.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6812,"value":"viewof exportPlaylistName = Inputs.text({\n label: \"Save smoothed playlist to Spotify\",\n placeholder: \"New playlist name\",\n submit: \"Save\",\n value: undefined\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 2e:"$2d:body"