| license: mit |
Built with blockbuilder.org
forked from MelanieSalignat's block: Artists recommendation
forked from MelanieSalignat's block: Projet : Artists recommendation
forked from MelanieSalignat's block: Projet : Artists recommendation
forked from MelanieSalignat's block: Projet : Artists recommendation
forked from MelanieSalignat's block: Projet : Artists recommendation
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .links line { | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| } | |
| .nodes circle { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <svg width="960" height="600"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var color = d3.scaleOrdinal(d3.schemeCategory20); | |
| var simulation = d3.forceSimulation() | |
| .force("link", d3.forceLink().id(function(d) { | |
| return d.id; | |
| })) | |
| .force("charge", d3.forceManyBody()) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| d3.csv("recommandations.csv", function(error, data){ | |
| if (error) throw error; | |
| // On créé le fichier json pour les recommandations : | |
| var links = [] ; | |
| var nodes = new Set() ; | |
| for (var i = 0; i< data.length; i++){ | |
| links.push({artist: data[i].Antecedant, recommendation: data[i].Consequence, support: parseFloat(data[i].ItemSetSupport)}) | |
| nodes.add(data[i].Antecedant) ; | |
| nodes.add(data[i].Consequence) ; | |
| } | |
| // On créé un dictionnaire avec la liste des artistes : | |
| var nodesArray = Array.from(nodes).map(function(e){ | |
| return {artist: e} | |
| }) | |
| // On dessine les liens entre les artistes en fonction du support : | |
| var link = svg.append("g") | |
| .attr("class", "links") | |
| .selectAll("line") | |
| .data(links) | |
| .enter().append("line") | |
| .attr("stroke-width", function(d) { | |
| return Math.sqrt(d.support); | |
| }); | |
| // On dessine les noeuds "artist" : | |
| var node = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("circle") | |
| .data(nodesArray) | |
| .attr("r", function (i){ | |
| return noeuds[i].countplayed ; | |
| console.log(noeuds[1].countplayed) | |
| }) | |
| /* .attr("fill", function(d) { | |
| return color(d.group); | |
| }) */ | |
| .call(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended) | |
| ); | |
| node | |
| .append("title") | |
| .text(function(d) { return d.artist; }); | |
| simulation | |
| .nodes(nodesArray) | |
| .on("tick", ticked); | |
| simulation | |
| .force("link") | |
| .links(links); | |
| function ticked() { | |
| link | |
| .attr("x1", function(d) { return d.artist.x; }) | |
| .attr("y1", function(d) { return d.artist.y; }) | |
| .attr("x2", function(d) { return d.recommendation.x; }) | |
| .attr("y2", function(d) { return d.recommendation.y; }); | |
| node | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| } | |
| }); | |
| }); | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragged(d) { | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| } | |
| function dragended(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| </script> | |