31:T1e38,chartWithRecommendation = { 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

"); function moveTooltip(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"); } // 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, 1], [10,20]); const nbecoutes = d3.scaleLinear([0, maxEcoute], [20,50]); const g = svg.append("g"); const colorHilightedCircle = "yellow"; const points = g.selectAll("circle") .data(songs) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", d => r(d.popularity)) .attr("fill", color) .attr("opacity",0.7) .attr("stroke", "black") // .attr("data-legend",function(d) { return d.color}) .on("mouseover", function(event,d){ tooltip.html(`

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

`); return tooltip.style("visibility", "visible"); }) .on("mousemove", function(event){moveTooltip(event)}) .on("mouseout", function(event,d){ return tooltip.style("visibility", "hidden"); }); function getPathFromSongId(id_song,id_user){ return path_recommendations.filter(reco => reco.id_song === id_song && reco.id_user === id_user); } 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", function(event,d){ d3.selectAll("path").select(function(dline,idx){ if (dline && dline.id_user == d.id) { dline["printPath"] = !dline["printPath"]; return this; } else { return null; }}).attr("stroke-width", 10).attr("stroke", d=>color(songs[d.index_song])).style("visibility", "visible"); d3.selectAll("circle").select(function(dcircle, idx){return d.recommendations.indexOf(dcircle.id) !== -1 && dcircle.recommendations === undefined ? this : null;}).attr("fill", dcircle => getPathFromSongId(dcircle.id,d.id)[0].printPath ? colorHilightedCircle : color(dcircle)); }) .on("mouseover", function(event,d){ tooltip.html(`

Title : ${d.name}
Album : ${d.album}
Artist : ${d.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[feature]}
`;}).join(" ")}

`); userSongOvered(event,d); return tooltip.style("visibility", "visible"); }) .on("mousemove", function(event){moveTooltip(event)}) .on("mouseout", function(event,d){ userSongOuted(event,d); return tooltip.style("visibility", "hidden"); }); const curve = d3.line().curve(d3.curveBasis); const lines = g.selectAll("lines") .data(path_recommendations) .join("path") .attr('d', d=>{ return curve([ [x(user_songs[d.index_user]['x']), y(user_songs[d.index_user]['y'])], [x(user_songs[d.index_user]['x']) , y(songs[d.index_song]['y'])], [x(songs[d.index_song]['x']), y(songs[d.index_song]['y'])] ])}) .attr("stroke",d=>color(songs[d.index_song])) .attr("fill", 'none') .attr("stroke-opacity",1) .attr("stroke-width", 3) .style("visibility", "hidden") .on("mouseover",lineOvered) .on("mousemove",function(event){moveTooltip(event)}) .on("mouseout",lineOuted); function lineOvered(event,d){ d3.select(this) .attr("stroke-width", 10) .attr("stroke", "blue"); let user_song = user_songs.filter(elt => elt.id === d.id_user)[0]; let reco_song = songs.filter(elt => elt.id === d.id_song)[0]; tooltip.html(`

My song :
${user_song.name}
${user_song.artist.join(" feat ")}
Recommended song :
${reco_song.name}
${reco_song.artists.join(" feat ")}

`); return tooltip.style("visibility", "visible"); } function lineOuted(event,d){ d3.select(this) .attr("stroke-width", 10) .attr("stroke",d=>color(songs[d.index_song])); return tooltip.style("visibility", "hidden"); } function userSongOvered(event,d) { d3.selectAll("circle").select(function(dcircle, idx){return dcircle.id === d.id ? this : null;}).attr("fill", d => highlighterdUserPoint === d.name ? "magenta" : colorHilightedCircle); d3.selectAll("path").select(function(dline,idx){return dline && dline.id_user == d.id ? this : null;}).attr("stroke-width", 10).attr("stroke", d=>color(songs[d.index_song])).style("visibility", "visible"); } function userSongOuted(event,d){ d3.selectAll("circle").select(function(dcircle, idx){ return dcircle.id === d.id ? this : null}).attr("fill", d => highlighterdUserPoint === d.name ? "magenta" : "white"); d3.selectAll("path").select(function(dline,idx){return dline && dline.id_user == d.id && !dline["printPath"] ? this : null;}).attr("stroke-width", 3).attr("stroke", d=>color(songs[d.index_song])).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.popularity),'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 }); }32:T485,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 = -1300; 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", 160) .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 * 120})`); g.append("rect") .attr("x", xLegend) .attr("width", 120) .attr("height", 120) .attr("fill", color); g.append("text") .attr("x",xLegend+130) .attr("y", 20) .attr("dy", "0.5em") .text(d =>d.title); }33:[{"id":"4f78297e18b20e9c99ce9e3f056e1870382545767894248d1dac8dd2129178bb176eab32126c3893f3298492b635f59564b089ebd7c977091277c5685a5f09c6","href":"https://static.observableusercontent.com/files/4f78297e18b20e9c99ce9e3f056e1870382545767894248d1dac8dd2129178bb176eab32126c3893f3298492b635f59564b089ebd7c977091277c5685a5f09c6","name":"user_songs_json@3.json","type":"application/json","lastModified":1613481825924.849,"size":979963},{"id":"983bd26a1dde0b8ffbf17cf05caa898ca5a51d85968fa5aeca0d84dd4e2eead8a024f110a409fec5d9bb6860f7614801166ffe485b3918c0f2b8ddd62a08e20c","href":"https://static.observableusercontent.com/files/983bd26a1dde0b8ffbf17cf05caa898ca5a51d85968fa5aeca0d84dd4e2eead8a024f110a409fec5d9bb6860f7614801166ffe485b3918c0f2b8ddd62a08e20c","name":"user_songs_json@4.json","type":"application/json","lastModified":1613555397794.449,"size":408915},{"id":"8dcd0b6f145fa0185f13e7882681323a932a614701d30179d530dcb3a25c5d7c830015b46c9e383e00bbd0fedd5a31de75aaf85d55af80dc6047ee265a7a6879","href":"https://static.observableusercontent.com/files/8dcd0b6f145fa0185f13e7882681323a932a614701d30179d530dcb3a25c5d7c830015b46c9e383e00bbd0fedd5a31de75aaf85d55af80dc6047ee265a7a6879","name":"songs_json@5.json","type":"application/json","lastModified":1613481921796.691,"size":6140056},{"id":"8fc1a4b28c3d730f3d6abb53cd34e27aa21e129f47c72ff0fb7d234c1ae37772cd4018dd1b5126f4f2a654bc9d11efa38e2c30aa5655192a2767939dba89e148","href":"https://static.observableusercontent.com/files/8fc1a4b28c3d730f3d6abb53cd34e27aa21e129f47c72ff0fb7d234c1ae37772cd4018dd1b5126f4f2a654bc9d11efa38e2c30aa5655192a2767939dba89e148","name":"songs_json@6.json","type":"application/json","lastModified":1613555421237.056,"size":2826866}] 2f:{"title":"Spotify music recommendations","cells":[{"id":0,"value":"md`# Spotify music recommendations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof userSelectedOption = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"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 = chartWithRecommendation.changeSong;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"path_recommendations = buildRecommendationsPath();","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"function buildRecommendationsPath(){\n let path_recommendations = [];\n let songs_id = songs.map(elt=>elt.id);\n user_songs.forEach((song_user,index_user) => {\n song_user.recommendations.forEach(reco_id => {\n if (songs_id.indexOf(reco_id) !== -1) path_recommendations.push({\"id_user\":song_user.id, \"index_user\" : index_user, \"id_song\" : reco_id,\"index_song\" : songs_id.indexOf(reco_id), \"printPath\":false});\n });\n });\n return path_recommendations;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"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"},{"id":39,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"facteurTaille = 20;","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.kmeans_cluster);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"maxEcoute = Math.max(...user_songs.map(elt => elt.countPerTrack));","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof nbSongDisplayed = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"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"},{"id":25,"value":"songs = Object.values(songs_json);","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"user_songs_json = userSelected.user_songs;","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"songs_json = userSelected.songs;","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"userSelected = selectUser(parseInt(userSelectedOption));","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"function selectUser(nbUser){\n let user1= {\"songs\":FileAttachment(\"songs_json@5.json\").json(),\"user_songs\":FileAttachment(\"user_songs_json@3.json\").json()},\n user2={\"songs\":FileAttachment(\"songs_json@6.json\").json(),\"user_songs\":FileAttachment(\"user_songs_json@4.json\").json()};\n return [user1,user2][nbUser]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"width = 500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}