Old school D3 from simpler times

All examples By author By category About

MelanieSalignat

Full window Github gist

Projet(test) : Artists recommendation

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>

https://d3js.org/d3.v4.min.js