D3 Examples - Projet

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<style>
​
body {
  font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
  font-size: 20px;
​
}
  
 
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}
​
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
  
circle.surbrillance {
  stroke: black;
  stroke-width: 5px;
 }
​
  
  .hidden {
        display: none;
    }
    div.tooltip {
        color: #007acc;
        background: rgba(200, 200, 200, 0.8);
        line-height: 1;
        padding: 6px;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
 
  
</style>
  
<body>
 <form name="myform" onSubmit="return handleClick()">
            <input name="Submit"  type="submit" value="OK" >
            <input type="text" id="myVal" placeholder="Rechercher un artiste...">
        </form>
​
<svg></svg> 
  
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/sigma.min.js"></script>
<script src="js/sigma.parsers.json.min.js"></script>
  
<script>
​
var width=screen.width;
var height=800;
var svg = d3.select("svg");
var container2 = svg.append('g').attr("id","containerLegend");
var container1=svg.append('g').attr("id","containerGraphe");
var container3=svg.append('g').attr("id","containerZoom");
​
​
var tooltip = d3.select('body').append('div')
    .attr('class', 'hidden tooltip');
 
var color = d3.scaleOrdinal(d3.schemeCategory20);
  
​
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.artist; }))
    .force("charge", d3.forceManyBody().distanceMax(200))
    .force("center", d3.forceCenter(width / 2, height / 2));
​
​
d3.csv("recommandations.csv", function(data){
  
  
    var links = [];
    var nodes = new Set();
    for (var i=0; i< data.length; i++){
      links.push({source: data[i].Antecedant, target: data[i].Consequence, value: parseFloat(data[i].ItemSetSupport)});
      nodes.add(data[i].Antecedant);
      nodes.add(data[i].Consequence);
    }
    
​
 
  var nodesArray = Array.from(nodes).map(function(e){return {artist: e}});
 
  d3.csv("artists_tags_count.csv", function(data2){
  
    
    for (var i=0; i< nodesArray.length; i++){
      for (var j=0; j<data2.length;j++){
        if (nodesArray[i].artist == data2[j].name){
          nodesArray[i].url = data2[j].pictureurl;
          nodesArray[i].tags = top5tags(data2[j].tags);
          nodesArray[i].count = data2[j].count;
          break;
        }
      } 
    }
    
​
        
   //on va selectionner les top 5 tags
   function top5tags(tags){
     top5 =[];
     n = tags.split(";").length;
     t = tags.split(";");
     top5.push(t[0].split("[")[1]); //premier tag (sans le crochet)
     if (n<5){
       for (var i=1; i<n-1; i++){
         top5.push(t[i])
       }
       top5.push(t[n-1].split("]")[0])
     }
     else {
       for (var i=1; i<5; i++){
         top5.push(t[i])
      }
     }
     
    return top5
   }
   
  function listerecommandations(data,node){ //data: recommandations, nous allons recommander 5 artistes.
      n=5;
      recommandations=new Set();
      ant = false;
      //si le noeud est dans la colonne antecedant:
      for (var i=0; i<data.length; i++){
        
        if (data[i].Antecedant == node.artist){
          //combien de consequences a-t-il? plus ou moins de 5
          ant = true;
          j=i;
          while (j<data.length && data[j].Antecedant==node.artist && recommandations.size<n){
            recommandations.add(data[j].Consequence);
            j=j+1;
          }
         
          //si 5 ou + conséquences
          if (recommandations.size == n){
            return recommandations;
          }
          
          else{
            ind = 0;
                while (ind < recommandations.size && recommandations.size < n){
                    for (var k=0; k< data.length; k++){
                        if (data[k].Consequence== Array.from(recommandations)[ind] && data[k].Antecedant != node.artist && recommandations.size < n){
                            recommandations.add(data[k].Antecedant)
                        }
                    }
                    ind = ind+1;
                }
                    
                }
         
            //si aucun artiste suggéré n'est présent dans la colonne Antecedant,(ou pas assez) on va aller voir dans la colonne consequence
            if (recommandations.size < n){
               //sinon aller voir les recommandations du 1 er artiste de la liste, puis du 2e etc et récursivement
            ind = 0;
            while (ind < recommandations.size && recommandations.size < n){
              for (var k=0; k<data.length; k++){
                if (data[k].Antecedant == Array.from(recommandations)[ind]){
                  l=k;
                  while(recommandations.size<n && data[l].Antecedant == Array.from(recommandations)[ind]){
                    if (data[l].Consequence != node.artist){ 
                        recommandations.add(data[l].Consequence);
                    }
                    l=l+1;
                  }
                  break;
                }
              }
              ind = ind +1;
            }
            } break;
          }
          // ça devrait suffire
          
        }
      
      //si le noeud n'est compris que dans la colonne consequence
      if (ant == false){
          for (var i=0; i< data.length; i++){
              //on ajoute tous les antécédents
              if (data[i].Consequence == node.artist){
                  recommandations.add(data[i].Antecedant)
              }
          }
          
    // s'il n'y a pas assez d'antécédents
      if (recommandations.size<n){
        //on regarde si les antécédents ont des conséquences
        ind = 0;
            while (ind < recommandations.size && recommandations.size < n){
              for (var k=0; k<data.length; k++){
                if (data[k].Antecedant == Array.from(recommandations)[ind]){
                  l=k;
                  while(l<data.length && recommandations.size<n && data[l].Antecedant == Array.from(recommandations)[ind]){
                    if (data[l].Consequence != node.artist){ 
                        recommandations.add(data[l].Consequence);
                    }
                    l=l+1;
                  }
                  break;
                }
              }
              ind = ind + 1;
            }
      }
​
    // s'il n'y a toujours pas assez de recommandations, on regarde tous les antécédents
    if (recommandations.size < n){
        ind = 0;
            while (ind < recommandations.size && recommandations.size < n){
                    for (var k=0; k< data.length; k++){
                        if (data[k].Consequence== recommandations[ind] && data[k].Antecedant != node.artist && recommandations.size<n){
                            recommandations.add(data[k].Antecedant)
                        }
                    }
                    ind = ind+1;
            }
    }
​
      
      }
​
      return recommandations;
    }
  
       
  
 for (var i=0; i< nodesArray.length; i++){
   nodesArray[i].rec = Array.from(listerecommandations(data,nodesArray[i]))
 }
    
    
    function affichageRecommandations(node, nodesArray){
     simulation
     .force("charge", d3.forceManyBody().distanceMax(150))
       .force("center", d3.forceCenter(width / 2.75, height / 2))  
​
      
       var rectangle1 = container3.append("rect")
   .attr("width", 150)
     .attr("height", 150)
   .style("stroke", "orange")
   .style("fill", "none")
    .attr("x", 970)
    .attr("y",60); 
    
    var texte1 = container3.append("text")
    .text(node.artist)
    .attr("x", 975)
    .attr("y",78)
    .style("fill", "orange");
    var texte2 = container3.append("text")
    .text("tags: "+node.tags[0] )
    .attr("x", 975)
    .attr("y",200);
    
    
    container3.append("svg:image")
   .attr('x',975)
   .attr('y',85)
   .attr('height', 90)
   .attr("xlink:href",node.url)
   
    var selection = container3.selectAll("rect")
    .data(nodesArray)
    
    
            
    
    for (var i=0; i<node.rec.length;i++){
      for (var j=0; j< nodesArray.length; j++){
        
        
        if (node.rec[i] == nodesArray[j].artist){
                 if (i<3){
          
         var texte1 = container3.append("text")
    .text(nodesArray[j].artist)
    .attr("x", 855+150*i)
    .attr("y",310)
    .style("fill", "steelblue");
         
         var texte2 = container3.append("text")
    .text("tags: "+nodesArray[j].tags[0] )
    .attr("x", 850+150*i)
    .attr("y",415);
          
          container3.append("svg:image")
   .attr('x',855+150*i)
   .attr('y',315)
   .attr('height', 80)
    .attr('width',100)
   .attr("xlink:href",nodesArray[j].url)
} 
          else{
           var texte1 = container3.append("text")
    .text(nodesArray[j].artist)
    .attr("x", 925+150*(i-3))
    .attr("y",470)
    .style("fill", "steelblue");
         
         var texte2 = container3.append("text")
    .text("tags: "+nodesArray[j].tags[0] )
    .attr("x", 925+150*(i-3))
    .attr("y",565);
          
          container3.append("svg:image")
   .attr('x',930+150*(i-3))
   .attr('y',475)
   .attr('height', 80)
    .attr('width',100)
   .attr("xlink:href",nodesArray[j].url)
          }
          
          break;
        }
      }
    
        
    }
​
    
    }
    
    //affichageRecommandations(nodesArray[199], nodesArray)
    
    //on efface le contenu du container3
    function clearsvg(){
      container3.selectAll("*").remove();
    }
    
    
    
    var link = container1.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
     .attr("stroke", "black");
  
  
  var node = container1.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(nodesArray)
    .enter().append("circle")
    .attr("id", function(d){return "node" + d.artist.replace(/\./g,"").replace("'","").replace(" ","").replace(" ","").replace(" ","").replace(" ","").replace(" ","").replace("!","").replace("/","").replace("&","").replace("$","");})
      .attr("r", function(d) {return Math.sqrt(d.count);})
      .attr("fill", function(d) { return color(d.tags[0]); })
    
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
                    .on("click",function(d){
            clearsvg() 
            affichageRecommandations(d,nodesArray);})
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    })                              
                    
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                    
                        .html(d.artist+"<br/>"+"<img src="+ d.url+" height="+110+"/>"+"<br/>"+d.tags[0])
                                d3.select(this)
                .attr("class", "surbrillance")
                for (var i=0; i<d.rec.length; i++){
                  for (var j=0; j<nodesArray.length; j++){
                    if (d.rec[i] == nodesArray[j].artist){
                     svg.selectAll("#node" + nodesArray[j].artist.replace(/\./g,"").replace("'","").replace(" ","").replace(" ","").replace(" ","").replace(" ","").replace(" ","").replace("!","").replace("/","").replace("&","").replace("$",""))
              .attr("class", "surbrillance");
                      break;
                    }
                  }
                  
                }             
                   
                  
                    //.html(d.artist+"<br/>"+d.tags);
            //.html("<strong>"+d.artist+"</strong> <br/>"+"<span style='color:black'>"+d.tags + "</span>");
                })
                .on('mouseout', function() {
                 d3.selectAll("circle.surbrillance").attr("class", "")
                 
                    tooltip.classed('hidden', true)
                    
                    
                }); 
    
    function handleClick(event){
        console.log(document.getElementById("myVal").value)
        for (var i=0; i<nodesArray.length; i++){
          if (nodesArray[i].artist == getElementById("myVal").value){
            var node = nodesArray[i]
            break ;
          }
        }
        return affichageRecommandations(node, nodesArray)
      
        // console.log("event : " + event)
        // console.log("valeur du formulaire : " + document.forms[0].myVal)
        /* var mouse =  d3.mouse(svg.node()).map(function(event) {
                        return parseInt(event);
        })                              
        tooltip.classed('hidden', false)
                .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')     
                .html(event.artist+"<br/>"+"<img src="+ event.url+" height="+110+"/>"+"<br/>"+event.tags[0]) */
        }
    
    
    
 
 /* node.append("title")
      .text(function(d) { return d.artist + "\n" +"tags :"+d.tags; })
      .style("font-size", "40px") ; */
// draw legend
  var legend = container2.selectAll(".legend")
      .data(color.domain())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
​
    
  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", 150)
        .attr("y", 100)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
​
  // draw legend text
  legend.append("text")
      .attr("x", 140)
      .attr("y", 100)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d;})
        
    
    simulation
      .nodes(nodesArray)
      .on("tick", ticked);
​
  simulation.force("link")
      .links(links);
 
  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.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;
}
  
var container2Width=document.getElementById("containerLegend").offsetWidth;
var container1Width=document.getElementById("containerGraphe").offsetWidth;
 var container3Width=document.getElementById("containerZoom").offsetWidth;
svg.attr("width",container2Width+container1Width+container3Width).attr("height",height)
​
</script>
 </body>  
</html>
    