2c:null 2d:["$","title",null,{"children":"Spotify musics wandering | Julien Verdun | Observable"}] 32:T558,md` # Spotify musics wandering ### TO-DO Modifier le fichier python de récupération des features pour les musiques écoutées : - faire un premier passage sur les données pour faire un count des écoutes et un sum duration_ms - au lieu de tout demander à l'API, on regarde d'abord si fichier dispo dans la base de données Kaggle - si musique dispo, on prend ces features - sinon on regroupe dans une liste - on cherche sur l'API les musqies non trouvées Remplacer la taille des cercles par le nombre d'écoute Renseigner la popularité ? Réfléchir à comment permettre à l'utilisateur d'ajouter ces fichiers de données afin de voir ou il se situe ? - développer une appli web pour permettre de charger un fichier de données ? - cela nécessite de réaliser le processing en JS pour avoir une cohérence entre les données Kaggle et les données utilisateur, besoin d'avoir les mêmes clusters que sur Python et les mêmes axes de PCA, peuvent être stockés en dure et traitement sur JS pour un nouveau fichier ? - besoin aussi de normaliser les données, on suppose que assez de données pour que les normalisations soient indépendantes ? Regarder les recommandations de Spotify et faire des arcs vers les musiques recommandées Obtenir avec python les recommendations, voir si possible en js, puis afficher les elements `33:Tdf2,chart = { const totalWidth = facteurTaille*width, totalHeight = facteurTaille*height; const svg = d3.create("svg") .attr("viewBox", [-totalWidth/2, -totalHeight/2,totalWidth, totalHeight]); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background-color", "#FFFFFF") .html("

a simple tooltip

"); // x and y are scales that project the data space to the ‘unzoomed’ pixel referential const x = d3.scaleLinear([-1, 1], [-totalWidth, totalWidth]); const y = d3.scaleLinear([-1, 1], [-totalHeight,totalHeight]); const r = d3.scaleLinear([0, maxDist], [1,20]); const nbecoutes = d3.scaleLinear([0, maxEcoute], [20,50]); const g = svg.append("g"); const points = g.selectAll("circle") .data(songs) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", d => 20)//r(maxDist-d.dist)) .attr("fill", color) .attr("data-legend",function(d) { return d.color}) .append("title") .text(d => d.name); var highlighterdUserPoint = user_songs[0].name; const userPoints = g.selectAll("user_circle") .data(user_songs) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", d => nbecoutes(d.countPerTrack)) .attr("fill", d => highlighterdUserPoint === d.name ? "magenta" : "white") .attr("stroke", "black") .attr("stroke-width",2) .on("click", d => {console.log(user_songs.map(elt=>elt.name).indexOf(d.target.__data__.name)); console.log(d.target.__data__);}) .on("mouseover", function(d){ tooltip.html(`

Title : ${d.target.__data__.name}
Album : ${d.target.__data__.album}
Artist : ${d.target.__data__.artist.join(" feat ")}
${['danceability', 'energy', 'loudness', 'speechiness', 'acousticness', 'instrumentalness', 'liveness', 'valence', 'tempo', 'popularity','countPerTrack','msPlayedSumTime'].map(feature => {return ` ${feature[0].toUpperCase()+ feature.slice(1,feature.length)} : ${d.target.__data__[feature]}
`;}).join("")}

`); return tooltip.style("visibility", "visible"); }) .on("mousemove", function(event){return tooltip.style("top", (event.pageY > totalHeight/2 ? event.pageY-tooltip._groups[0][0].clientHeight : event.pageY-10)+"px").style("left",(event.pageX < totalWidth/2 ? event.pageX+10 : event.pageX-tooltip._groups[0][0].clientWidth)+"px");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); let transform; const zoom = d3.zoom() .scaleExtent([0.1, 40]) .on("zoom", e => {g.attr("transform", (transform = e.transform));}); svg.call(zoom); function changeSong(event){ let song = user_songs[event.target.value]; transform = {'k':r(song.dist),'x':x(song.x),'y':y(song.y)}; highlighterdUserPoint = song.name; userPoints .attr("fill", d => highlighterdUserPoint === d.name ? "magenta" : "white") svg.transition().duration(500).call( zoom.transform, d3.zoomIdentity.translate(0, 0).scale(transform.k).translate(-transform.x, -transform.y) ); } svg.append("g") .call(legend); return Object.assign(svg.node(), { changeSong: changeSong }); }34:T47f,legend = svg => { /* cluster1 : en haut à droite cluster 2 en basa gauche cluster3 en haut à gauche cluster 4 en base à droite axe des x : utilisation d'appareil électronique ou non, musique acoustique à droite vs musique moderne à gauche axe des y : musique avec instrument ou sans instrument */ const cluster_data = ["Acoustique instrumentale","Moderne instrumentale","Moderne sans instruments","Acoustique sans instruments"]; const xLegend = -700; const g = svg .attr("transform", `translate(${facteurTaille*width/2+xLegend},${-facteurTaille*height/2+50})`) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 80) .selectAll("g") .data([0,1,2,3].map(elt=>({'title':cluster_data[elt],'kmeans_cluster':elt}))) .join("g") .attr("transform", (d, i) => `translate(0,${i * 60})`); g.append("rect") .attr("x", xLegend) .attr("width", 60) .attr("height", 60) .attr("fill", color); g.append("text") .attr("x",xLegend+70) .attr("y", 10) .attr("dy", "0.5em") .text(d =>d.title); }35:[{"id":"b7700ec3f12421ef550dc9a8ea46c8262788c09ead35c9c1af4664829cfea05b6a35b7e4265f1a7967eecbccbf3aeb373cbc857153e0b1a6abb2ebbb25442c33","href":"https://static.observableusercontent.com/files/b7700ec3f12421ef550dc9a8ea46c8262788c09ead35c9c1af4664829cfea05b6a35b7e4265f1a7967eecbccbf3aeb373cbc857153e0b1a6abb2ebbb25442c33","name":"user_songs_json@3.json","type":"application/json","lastModified":1613304479986.121,"size":966431},{"id":"84ecd97631a17dac324ac1ce7e624d3fa404e2db83414bc63e88ddfd6f7f9c9c316f58549c983deed45577c8daa29a9a252e9f66fdd2f8435cb7c2d89985eb91","href":"https://static.observableusercontent.com/files/84ecd97631a17dac324ac1ce7e624d3fa404e2db83414bc63e88ddfd6f7f9c9c316f58549c983deed45577c8daa29a9a252e9f66fdd2f8435cb7c2d89985eb91","name":"songs_json@4.json","type":"application/json","lastModified":1613317051685.78,"size":1516647}] 30:{"id":"74162e717d5e2356","slug":"spotify-musics-wandering","title":"Spotify musics wandering","thumbnail":"e91825f7f8ff198329d1cc19d7a947f4355ae0adcd63a563dafdd730dc10e3db","access_level":"public","create_time":"$D2021-02-08T18:05:04.724Z","update_time":"$D2021-02-15T14:35:47.062Z","view_time":null,"first_public_time":"$D2021-02-09T14:55:07.709Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2c154d247198863a","login":"julien-verdun","name":"Julien Verdun","avatar_url":"https://avatars-next.observableusercontent.com/e78a4d1529ce5b1d07975a54fce75fc0fbec7c27f47a9f2e1d20ea59ec9ba0a0","tier":"starter_2024"},"version":867,"publish_version":867,"role":null,"authored":false,"authors":[{"type":"individual","id":"15e24f1f71d36126","login":"julien-verdun","name":"Julien Verdun","avatar_url":"https://avatars-next.observableusercontent.com/e78a4d1529ce5b1d07975a54fce75fc0fbec7c27f47a9f2e1d20ea59ec9ba0a0","tier":null}],"members":[{"type":"individual","id":"15e24f1f71d36126","login":"julien-verdun","name":"Julien Verdun","avatar_url":"https://avatars-next.observableusercontent.com/e78a4d1529ce5b1d07975a54fce75fc0fbec7c27f47a9f2e1d20ea59ec9ba0a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ab532cb586f7eddf","slug":"spotifydatavisualizationproject","title":"SpotifyDataVisualizationProject","owner":{"id":"2c154d247198863a","login":"julien-verdun","name":"Julien Verdun"}},"type":"notebook","body":{"titling":"auto","title":"Spotify musics wandering","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"viewof nbSongDisplayed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"{\n const form = html`

${Object.assign(html``, {value: 0})} Select a song`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange = chart.changeSong;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"function formatTime(time){\n time = time/1000;\n return (parseInt(time/3600).toString().length === 1 ? \"0\"+parseInt(time/3600) : parseInt(time/3600) ) + \":\" + (parseInt(time % 3600 / 60).toString().length === 1 ? \"0\" + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60) ) + \":\" + (parseInt(time%60).toString().length === 1 ? \"0\" + parseInt(time%60) : parseInt(time%60) );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"facteurTaille = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.kmeans_cluster);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"margin = ({top: 20, right: 20, bottom: 20, left:20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"maxDist = Math.max(...songs.map(elt => elt.dist))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"maxEcoute = Math.max(...user_songs.map(elt => elt.countPerTrack));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"user_songs = Object.values(user_songs_json).slice(0,nbSongDisplayed).sort((a,b) => b.msPlayedSum - a.msPlayedSum).map(elt => {elt[\"msPlayedSumTime\"] = formatTime(elt[\"msPlayedSum\"]);return elt;});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"songs = Object.values(songs_json);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"user_songs_json = FileAttachment(\"user_songs_json@3.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"songs_json = FileAttachment(\"songs_json@4.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"width = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"