D3 Examples - Projet 3

xxxxxxxxxx
 
<!DOCTYPE html>
<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;
}
  
  .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>
​
​
<html>
    <head>
        <link rel="stylesheet" href="fic.css" />
      
    <script>
      
window.onload = function(){
    var motsClefs = ["t.A.T.u.","Lady Gaga","Britney Spears","Madonna","Katy Perry","Rihanna","Avril Lavigne","Christina Aguilera","Beyonce","Shakira","Ke$ha","P!nk","blink-182","Paramore","Green Day","a-ha","Depeche Mode","Duran Duran","Pet Shop Boys","The Cure","Yeah Yeah Yeahs","Radiohead","The Killers","Arctic Monkeys","The Beatles","Muse","Franz Ferdinand","Yann Tiersen","Within Temptation","Evanescence","Nightwish","Weezer","Vanessa Hudgens","Miley Cyrus","Ashley Tisdale","Kelly Clarkson","Hilary Duff","The Pussycat Dolls","Black Eyed Peas","Mariah Carey","Taylor Swift","Kylie Minogue","Selena Gomez & the Scene","Jennifer Lopez","Ashlee Simpson","Lindsay Lohan","Demi Lovato","Vampire Weekend","Kings of Leon","MGMT","Coldplay","Usher","Chris Brown","Michael Jackson","U2","Travis","Oasis","Tool","Metallica","Timbaland","David Guetta","Justin Timberlake","Three Days Grace","Linkin Park","Breaking Benjamin","30 Seconds to Mars","The xx","The Who","Led Zeppelin","Pink Floyd","The Rolling Stones","The Doors","AC/DC","The White Stripes","The Strokes","The Veronicas","The Velvet Underground","Joy Division","David Bowie","The Used","My Chemical Romance","The Ting Tings","Lily Allen","The Smiths","The Smashing Pumpkins","The Saturdays","Cheryl Cole","Sugababes","Leona Lewis","Glee Cast","Girls Aloud","Queen","The Prodigy","The Pretty Reckless","The Police","The Offspring","Nirvana","The Libertines","The Kooks","Babyshambles","The Fray","The Cranberries","The Clash","The All-American Rejects","Taio Cruz","Adam Lambert","Enrique Iglesias","Eminem","T.I.","Kanye West","Sum 41","Nelly Furtado","Sufjan Stevens","Death Cab for Cutie","Arcade Fire","Spice Girls","Backstreet Boys","Sophie Ellis-Bextor","Sonic Youth","Snow Patrol","Slipknot","System of a Down","Slayer","Iron Maiden","Megadeth","Black Sabbath","Motorhead","Judas Priest","Simple Plan","Sigur Ros","Scorpions","Guns N' Roses","Royksopp","Robyn","Robbie Williams","Rise Against","Regina Spektor","Red Hot Chili Peppers","Ramones","Rage Against the Machine","RBD","Anahi","R.E.M.","Queens of the Stone Age","Portishead","Bjork","Porcupine Tree","Opeth","Placebo","Pixies","Pixie Lott","Pitty","Phoenix","Erasure","Pearl Jam","Papa Roach","Pantera","Panic! At the Disco","Fall Out Boy","Ozzy Osbourne","KISS","Deep Purple","Owl City","Dream Theater","OneRepublic","No Doubt","Gwen Stefani","Nine Inch Nails","Nicole Scherzinger","Nicki Minaj","Nickelback","New Order","Natasha Bedingfield","Morrissey","Modest Mouse","Moby","Mika","McFly","3OH!3","Massive Attack","Maroon 5","Marina & the Diamonds","Florence + the Machine","Ellie Goulding","M.I.A.","Los Hermanos","Little Boots","Lifehouse","Alicia Keys","Leighton Meester","Legiao Urbana","La Roux","Korn","Klaxons","Kerli","Keri Hilson","Ciara","Kelly Rowland","Destiny's Child","Keane","Kate Nash","Kasabian","Kaiser Chiefs","Justin Bieber","Jordin Sparks","Jonas Brothers","Johnny Cash","John Lennon","Bob Dylan","JoJo","Jimi Hendrix","Jessie J","Jessica Simpson","Jay-Z","Jason Mraz","Janet Jackson","James Blunt","Jack Johnson","Interpol","Incubus","In Flames","IAMX","Hurts","Gorillaz","Good Charlotte","Goldfrapp","Garbage","Fresno","Foo Fighters","Flyleaf","Fergie","Feist","Explosions in the Sky","Mogwai","Escape The Fate","Avenged Sevenfold","A Day to Remember","Bullet for My Valentine","Elvis Presley","Elliott Smith","Duffy","Adele","Disturbed","Dido","Deftones","Dave Gahan","Martin L. Gore","Celine Dion","Cyndi Lauper","Crystal Castles","Creedence Clearwater Revival","Colbie Caillat","Cobra Starship","Cat Power","Cascada","Carrie Underwood","Cansei de Ser Sexy","Bruno Mars","Bring Me The Horizon","Boys Like Girls","Bon Jovi","Boards of Canada","Aphex Twin","BoA","Blur","Bloc Party","Belle and Sebastian","Belinda","Beirut","Beck","Bat for Lashes","B.o.B","Amy Winehouse","All Time Low","Alice in Chains","Alanis Morissette","Air","Aerosmith","ABBA","A Perfect Circle"]
     
    var form = document.getElementById("auto-suggest");
    var input = form.search;
     
    var list = document.createElement("ul");
​
    list.className = "suggestions";
    list.style.display = "none";
​
    form.appendChild(list);
 
    input.onkeyup = function(){
        var txt = this.value;
        if(!txt){
            list.style.display = "none";
            return;
        }
         
        var suggestions = 0;
        var frag = document.createDocumentFragment();
         
        for(var i = 0, c = motsClefs.length; i < c; i++){
            if(new RegExp("^"+txt,"i").test(motsClefs[i])){
                var word = document.createElement("li");
                frag.appendChild(word);
                word.innerHTML = motsClefs[i].replace(new RegExp("^("+txt+")","i"),"<strong>$1</strong>");
                word.mot = motsClefs[i];
                word.onmousedown = function(){                 
                    input.focus();
                    input.value = this.mot;
                    list.style.display = "none";
                    return false;
                }; 
                if (suggestions<4){
                    suggestions++;
                }
                else {
                    break;
                }  
            }
        }
 
        if(suggestions){
            list.innerHTML = "";
            list.appendChild(frag);
            list.style.display = "block";
        }
        else {
            list.style.display = "none";           
        }
    };
 
    input.onblur = function(){
        list.style.display = "none";
        if(this.value=="")
            this.value = "Rechercher un artiste ...";
    };
};
                </script>
        </head>
  
        <body>
          <div id="searchbar">
            
          <form id="auto-suggest" action="#" method="post">
          <input name="Submit"  type="submit" value="OK" >
          <input type="text" class="search" name="search" value="Rechercher un artiste ..." onfocus="if(this.value=='Rechercher un artiste ...')this.value=''" onblur="if(this.value=='')this.value='Rechercher un artiste ...'" autocomplete="off"/>
          </form>
            
          </div>
        </body>
  
  
</html>
​
<svg></svg> 
<script src="https://d3js.org/d3.v4.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;
          nodesArray[i].bordercolor = "white";
          break;
        }
      } 
    }
    
 console.log(nodesArray[1].url)
   //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 texte0 = container3.append("text")
            .text("Votre selection : ")
            .attr('x',800)
            .attr('y',30)
            .attr("font-size", "30px");
      
    var rectangle1 = container3.append("rect")
        .attr("width", 350)
        .attr("height", 300)
        .style("stroke", "orange")
            .style("stroke-width", "5px")
        .style("fill", "none")
        .attr("x", 940)
        .attr("y",60); 
    
    var texte1 = container3.append("text")
        .text(node.artist)
        .attr("x", 950)
        .attr("y",95)
        .style("fill", "orange")
            .style("font-size", "35px");
      
    var texte2 = container3.append("text")
        .text("Tag : "+node.tags[0] )
        .attr("x", 950)
        .attr("y",350)
            .style("font-size", "25px");
  
    container3.append("svg:image")
            .attr('x',950)
        .attr('y',105)
            .attr('width',300)
        .attr("xlink:href",node.url)
            .attr("height",200)
   
    var selection = container3.selectAll("rect")
            .data(nodesArray)
   
    var texte3 = container3.append("text")
            .text("Nos recommandations : ")
            .attr('x',800)
            .attr('y',410)
            .attr("font-size", "30px");
    
    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+220*i)
                      .attr("y",450)
                      .style("fill", "steelblue")
                        .style("font-size", "25px");
​
                   var texte2 = container3.append("text")
                      .text("Tag : "+nodesArray[j].tags[0] )
                      .attr("x", 855+220*i)
                      .attr("y",580)
                        .style("font-size", "20px");
​
                   container3.append("svg:image")
                       .attr('x',845+220*i)
                       .attr('y',460)
                       .attr("height",100)
                         .attr('width',170)
                       .attr("xlink:href",nodesArray[j].url)
               } 
​
               else{
​
                   var texte1 = container3.append("text")
                       .text(nodesArray[j].artist)
                       .attr("x", 930+220*(i-3))
                       .attr("y",620)
                       .style("fill", "steelblue")
                         .style("font-size", "25px");
​
                   var texte2 = container3.append("text")
                       .text("Tag : "+nodesArray[j].tags[0] )
                       .attr("x", 930+220*(i-3))
                       .attr("y",750)
                         .style("font-size", "20px");
​
                   container3.append("svg:image")
                       .attr('x',920+220*(i-3))
                       .attr('y',625)
                       .attr('height',100)
                       .attr('width',170)
                       .attr("xlink:href",nodesArray[j].url)
              }
​
              break;
            }
        }   
    }
}
    
    //affichageRecommandations(nodesArray[199], nodesArray)
    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("r", function(d) {return Math.sqrt(d.count);})
      .attr("fill", function(d) { return color(d.tags[0]); })
        .style("stroke", function(d){return d.bordercolor})
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
                    .on("click",function(d){//clearsvg();
            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/>"+"Tag : " + d.tags[0])
                    d3.select(this)
                      .style("stroke", "black")
                      .style("stroke-width", "5px")
                      .style("opacity", 1)
                    
                    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("'","").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.select(this)
                      .style("stroke", "white")
                      .style("stroke-width", "1.5px")
                      .style("opacity", 1);
                    tooltip.classed('hidden', true)
                    d3.selectAll("circle.surbrillance").attr("class", "")
                }); 
    
 
 /* 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("width", 18)
      .attr("height", 18)
      .style("fill", color);
​
  // draw legend text
  legend.append("text")
      .attr("x", 140)
      .attr("y", 9)
      .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>
    