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 }); }