D3 Examples - Data Mining

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
  font-size: 20px;
}  
  
.links line {
  stroke: #999;
  stroke-opacity: 0.9;
}
​
.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
  
circle.surbrillance {
  stroke: black;
  stroke-width: 5px;
 }
  
  circle.retrait{
    color: grey;
    opacity: 0.4
  }
​
  
  .hidden {
        display: none;
    }
    div.tooltip {
        color: #b2008e;
        background: #f5f5f5;
        line-height: 1;
        padding: 6px;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
        font-size: 20px;
    }
 
​
</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 tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
 
svg.call(d3.zoom()
    .scaleExtent([1 / 2, 8])
    .on("zoom", zoomed));
​
function zoomed() {
    svg.attr("transform", d3.event.transform);
}  
   
​
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.film; }))
    .force("charge", d3.forceManyBody().distanceMax(1500))
    .force("center", d3.forceCenter(width / 2, height / 2));
  
d3.csv("recommandations.csv", function(data){
  // console.log("data " + data[2].Antecedent)
    var links = [];
    var nodes = new Set();
    for (var i=0; i< data.length; i++){
      var conse = data[i].Consequence ;
      // console.log("conse : " + conse)
      var reco = conse.split('[')
      var recom = reco[1].split('; ')
      var v  = data[i].Value ;
      var valu = v.split('[')
      var val = valu[1].split(';') 
      // console.log("recom[0] : " + recom[0])
      // console.log("val[0] : " + val[0])
      for (var j=0; j<10; j++){
        var va = parseFloat(val[j]);
        var vv = va/100 ;
        console.log("vv : " + vv)
        links.push({source: data[i].Antecedent, target: recom[j], value: vv})
        nodes.add(recom[j]);
      }
      nodes.add(data[i].Antecedent); 
    }
  
  var nodesArray = Array.from(nodes).map(function(e){return {film: e}});
  
  for (i=0; i<nodesArray.length; i++){
    recommandations=[];
    for (j=0; j<links.length;j++){
      if (nodesArray[i].film == links[j].source){
        recommandations.push(links[j].target)
      }
    }
    nodesArray[i].rec = recommandations ;
  }
​
  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .attr("stroke", "black");
  
  var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodesArray)
    .enter().append("circle")
    .attr("r", 10)
    .attr("fill", function(d) { return color(d.film); })
    .style("opacity", 1)
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))
      
    .on("click",function(d){
        d3.select(this)
          .attr("class", "surbrillance")
        for (var j=0; j<nodesArray.length; j++){
          if (nodesArray[j].film != d.film){
            svg.selectAll("#node" + nodesArray[j].film)
              .attr("class", "retrait");
          }
        }
            
        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].film)
                .attr("class", "surbrillance");
​
            }
          }
        }   
    })
  
    .on('mousemove', function(d) {
        d3.select(this)
          .attr("class", "surbrillance")
        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.film)
        d3.select(this).style("cursor","pointer");
    })
    .on('mouseout', function() {
            tooltip.classed('hidden', true)
        
        }) ;
  
   
  node.append("title")
      .text(function(d) { return d.film; });
  
  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;
    }
​
</script>
​
    