projet final

Built with blockbuilder.org

forked from romsson's block: simple line chart from dataset

forked from anonymous's block: simple line chart from dataset

forked from Naram22's block: simple line chart from dataset

forked from Naram22's block: projet

forked from Naram22's block: projet v11

forked from Naram22's block: projet v16

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

.node{
      opacity: 1;
      stroke: steelblue;
    }
    
.plot {
    fill: rgba(250, 250, 255, 0.6);
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}    
   
.grid path {
    stroke-width: 0;
}
    
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line_sel {

}
    
.line1 {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
}
  
.line2 {
      fill: none;
      stroke: steelblue;
      stroke-width: 0.5px;
      stroke-dasharray: 10;
}

button {
  position: absolute;
  right: 30px;
  top: 30px;
}    
    
div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 28px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    			
}
  </style>
</head>

<body>
  <button>Reset</button>
  <script>
    
    var player={};
    var result={};
    var axis_x=["1st Rnd","2nd Rnd","3rd Rnd","4th Rnd","Quarter","Semi","Finals"];
    
    var tab_tournament =["Australian Open", "French Open", "Wimbledon", "US Open"]; 
    var tab_year=[2015, 2016];
    var year = 2016;
    var tournament=tab_tournament[0];
    var rank_min=17;
    var rank_max=32;
    var num_player=rank_max-rank_min+1;
  d3.csv("resultat_atp_test.csv", function(data) {
    for (var i=0;i<data.length;i++){
      if(data[i].Date.split("/")[2]==year){
        var line_year=i;
        break;
      }
    }
    for (var i=line_year;i<line_year+508;i++){
      if(data[i].Tournament==tournament){
        var line_tour=i;
        console.log(data[line_tour+126].Tournament);
        break;
      } 
    }
  });
    
  d3.csv("test_atp.csv", function(data) {
      
  // Extract the name of the player and his ranking
    var r=0;
  	for (var i=0;i<data.length;i++){
     	if (isNaN(player[data[i].Winner]) && data[i].WRank !== "N/A"){
       	player[data[i].Winner]=data[i].WRank;
      }
     
      if (isNaN(player[data[i].Winner]) && data[i].WRank == "N/A"){
       	player[data[i].Loser]=700+r;
        data[i].WRank = 700+r; 
        r=r+1;
      }
      if (isNaN(player[data[i].Loser]) && data[i].LRank !== "N/A"){
       	player[data[i].Loser]=data[i].LRank;
      }
	  if (isNaN(player[data[i].Loser]) && data[i].LRank == "N/A"){
       	player[data[i].Loser]=700+r;
        data[i].LRank = 700+r;
        r=r+1;
      }
      
   	}
    
    
   //console.log(player[Object.keys(player)[0]]) 
	for (var a=0;a<Object.keys(player).length;a++){
	
    var j=0;
    var k=0;
    var m=0;
    
    var rank=player[Object.keys(player)[a]];
    result[rank+ " "+Object.keys(player)[a]] = [];
    for (var i=0;i<data.length;i++){
      if (data[i].Winner == Object.keys(player)[a]){
       	result[rank+ " "+Object.keys(player)[a]].push
				({"Round": axis_x[j], "difference": data[i].LRank-rank, "status":"V", "opponent" 						:data[i].Loser});
        j=j+1;
        k=i;
      }  
    }
    
	var player_inter=Object.keys(player)[a];
 if(j>0){
    if (j<axis_x.length-1){
    	while (j<axis_x.length){
   			for (var l=k+1;l<data.length;l++){
			
         	if (data[l].Winner == player_inter){
			//console.log("Winner" + " " +data[l].Winner)
           result[rank+ " "+Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          k=l;
          break;
         	} else if (data[l].Loser == player_inter){
			//console.log("Loser" + " " +data[l].Winner)
            result[rank+ " "+Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          k=l;
          player_inter=data[l].Winner  
          break;  
          }  
  			}    
  		}
    
    } else if (j<axis_x.length){
      //for (var l=k;l<data.length;l++){
         	if (data[data.length-1].Loser == Object.keys(player)[a]){
           result[rank+ " "+Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[data.length-1].WRank-rank, "status":"L","opponent" 						:data[data.length-1].Winner});
        	j=j+1;
          
         	}  
  			
      
    }
 }else{//console.log(j);
       for (var l=k;l<data.length;l++){
       if (data[l].Loser == player_inter){
			//console.log("Loser" + " " +data[l].Winner)
            result[rank+ " "+Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          k=l;
          player_inter=data[l].Winner  
          break;  
          }
       }
       while (j<axis_x.length){
   			for (var l=k+1;l<data.length;l++){
			
         	if (data[l].Winner == player_inter){
			//console.log("Winner" + " " +data[l].Winner)
           result[rank+ " "+Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          k=l;
          break;
         	} else if (data[l].Loser == player_inter){
			//console.log("Loser" + " " +data[l].Winner)
            result[rank+ " "+Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          k=l;
          player_inter=data[l].Winner  
          break;  
          }  
  			}    
  		}
      }
    
	} // loop for
    
    //console.log(Object.keys(result)[0].split(" ")[0]);
    
    
   var p=56; var donnees2=[];
   for(var d=0;d<128;d++) {
   //d=2; 
   var tab_reel=[];
   var tab_prev=[]; 
   var u=0;   
	 for (var b=0;b<7;b++){ 
   if(result[Object.keys(result)[d]][b].status == "V"){
     //console.log("reel_1")
	 tab_reel.push({"x":result[Object.keys(result)[d]][b].Round,"y":result[Object.keys(result)[d]][b].difference,"z":result[Object.keys(result)[d]][b].status})
   }
   if(u>0 && result[Object.keys(result)[d]][b].status == "L"){
     tab_prev.push({"x":result[Object.keys(result)[d]][b].Round,"y":result[Object.keys(result)[d]][b].difference,"z":result[Object.keys(result)[d]][b].status});
   }
   if(u==0 && result[Object.keys(result)[d]][b].status == "L"){
     	 tab_reel.push({"x":result[Object.keys(result)[d]][b].Round,"y":result[Object.keys(result)[d]][b].difference});
       tab_prev.push({"x":result[Object.keys(result)[d]][b].Round,"y":result[Object.keys(result)[d]][b].difference});
     u=u+1;
   }  
   }  
   
   if(tab_reel.length<axis_x.length){
   var perf=axis_x[tab_reel.length-1];  
   }else if(tab_reel.length=axis_x.length){
     if(tab_reel[axis_x.length-1].z== "V"){
       var perf="Winner";
     } else{
       var perf=axis_x[tab_reel.length-1];
     }  
   }  
     
     
     
    donnees2.push({"player" : Object.keys(result)[d].split(" ")[1]+" "+Object.keys(result)[d].split(" ")[2] , "rank" : Object.keys(result)[d].split(" ")[0] , "reel":tab_reel , "prev":tab_prev, "perf":perf})
   } 
    
    //console.log(donnees2)
    
// Trier les joueurs par clé
    
     var sort_by = function(field, reverse, primer){

var key = function (x) {return primer ? primer(x[field]) : x[field]};

return function (a,b) {
       var A = key(a), B = key(b);
       return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];                  
   		}
		}
     
    donnees2.sort(sort_by('rank', true, parseInt)); 
    function sortByRank(key1, key2){
   return key1.rank > key2.rank;
		}
    //donnees2.sort(sortByRank);
    console.log(donnees2[1])
    
    var winner;
    var finalist;
    for (var d=0;d<128;d++){
      if(donnees2[d].perf=="Winner"){
        winner=donnees2[d].player;
        break;
      }
    }
     for (var d=0;d<128;d++){
      if(donnees2[d].perf=="Finals"){
        finalist=donnees2[d].player;
        break;
      }
    }
    
   // console.log(winner +" " +finalist)
   
    
   var tab_performance=[];
   var round=[0,0,0,0,0,0,0];
    //var axis_x=["1st Rnd","2nd Rnd","3rd Rnd","4th Rnd","Quarter","Semi","Finals"]
   for (var d=rank_min-1;d<rank_max;d++){
     if (donnees2[d].perf=="1st Rnd"){
       round[0]=round[0]+1;
     }else if(donnees2[d].perf=="2nd Rnd"){
       round[1]=round[1]+1;
     }else if(donnees2[d].perf=="3rd Rnd"){
       round[2]=round[2]+1;
     }else if(donnees2[d].perf=="4th Rnd"){
       round[3]=round[3]+1;
     }else if(donnees2[d].perf=="Quarter"){
       round[4]=round[4]+1;
     }else if(donnees2[d].perf=="Semi"){
       round[5]=round[5]+1;
     }else{
       round[6]=round[6]+1;
     }
   }
   
    if (rank_max-rank_min>-1){
	for (var i=0;i<7;i++){
	tab_performance.push({"round":axis_x[i],"percentage":100*(round[i]/(rank_max+1-rank_min)),"number":round[i]});
	}
}

console.log(tab_performance)
   
    
    
    
  //*******************************************// 
  
    
    
    
  //*******************************************//   
   
    
    
    
    //Margin Convention
     var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960/1.7 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    //Range of xaxis
    var x = d3.scale.ordinal().rangePoints([0, width]);
    //x.domain(axis_x)
    x.domain(axis_x)
    var xAxis = d3.svg.axis().scale(x).orient("bottom");
    
    //y scale
		var y = d3.scale.linear()
							.range([height, 0]);
    //y.domain(d3.extent(donnees2, function(d) { return d.y; }));
    y.domain([-200,200]);
    
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
    
    var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });	
    
    // defines the function to call when zooming
var zoom = d3.behavior.zoom()
    //.x(x)
    .y(y)
    .on("zoom", zoomed);
    
    //create the SVG container	
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);
  
  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot");
    
   // two functions uses for the zoom
var make_x_axis = function () {
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(10);
};

var make_y_axis = function () {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);
}; 
    //var groupe= svg.append("g")
    //.attr("transform", "translate(20,20)");
    
    //var x = d3.scale.ordinal().rangeRoundBands([0, width]);
    
    
    
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height/2 + ")")
    .call(xAxis);
    
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Rank diff");
    
svg.append("g")
    .attr("class", "x grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat(""));
   
svg.append("g")
    .attr("class", "y grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat(""));

// objects for the zooming
var clip = svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);
    
    var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");
    
 //*******************   
   var div = d3.select("body")
	.append("div")  // declare the tooltip div 
	.attr("class", "tooltip")              // apply the 'tooltip' class
	.style("opacity", 0);                  // set the opacity to nil
    //console.log
    for(var d=rank_min-1;d<rank_max;d++) {
    
    var selection=chartBody.append("g").attr("class", "line_sel");  
    //d=0;
    selection.append("path")
    .datum(donnees2[d].reel)
    .attr("class", "line1")
    .attr("d", line)
    .on("mouseover", function () {console.log("ok");m=d3.event;
                                  div
                                  .style("opacity", 1)
                                  .html(donnees2[d-1].player)
                                  .style("left", (m.pageX) + "px")
                                  .style("top", (m.pageY - 28) + "px");})
        
//.on("mouseout", function () {d3.select(this).style("stroke", //"steelblue");d3.select(this).style("stroke-width",1.5); tooltip.style("opacity", 0);});
    
    selection.append("path")
    .datum(donnees2[d].prev)
    .attr("class", "line2")
    .attr("d", line)
    
    }
    
    //*************************************
    
    // tracé du graph  
     var margin2 = {top: 20, right: 20, bottom: 30, left: 50},
         width2 = 960/2.5 - margin2.left - margin2.right,
         height = 500 - margin2.top - margin2.bottom;
    
     var x2 = d3.scale.ordinal().rangeRoundBands([0, width2], .05);
     var y2 = d3.scale.linear().range([height, 0]);

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