Old school D3 from simpler times

All examples By author By category About

Naram22

Full window Github gist

projet

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: simple line chart from dataset

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

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

forked from Naram22's block: projet

<!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; }
    .line {
      fill: none;
      stroke: blue;
      stroke-width: 2px;
    }
  </style>
</head>

<body>
  <script>
    
    var svg = d3.select("body").append("svg")
                               .attr("width", 940)
                               .attr("height", 500)

var width = 800;
    var height = 400;
 
    var player={};
    var result={};
    var axis_x=["1st Rnd","2nd Rnd","3rd Rnd","4th Rnd","Quarter","Semi","Finals"];
    
  d3.csv("test_atp.csv", function(data) {
      //data.forEach(function(d) {
      
  // Extract the name of the player and his ranking 
  	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].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]="500";
      }
      
   	}
    
    //console.log(Object.keys(player).length)
    //console.log(Object.keys(player)[a])
    //resultat.Object.keys(player)[a].push
	//({"Round": axis_x[j], "difference": data[i].WRank-data[i].LRank});
    
	for (var a=0;a<Object.keys(player).length;a++){
	//a=84;
    var j=0;
    var k=0;
    var m=0;
    result[Object.keys(player)[a]] = [];
    var rank=player[Object.keys(player)[a]];
    for (var i=0;i<data.length;i++){
      if (data[i].Winner == Object.keys(player)[a]){
       	result[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= "";
    
   		if (j<axis_x.length-1){
   			for (var l=k;k<data.length;k++){
         	if (data[k].Loser == Object.keys(player)[a]){
           result[Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[k].WRank-rank, "status":"L","opponent" 						:data[k].Winner});
        	j=j+1;
          m=k;
          player_inter=data[k].Winner;
          break;  
         	}  
  			}    
  		}
    
    if (j<axis_x.length-1){
    	while (j<axis_x.length){
   			for (var l=m+1;l<data.length;l++){
         	if (data[l].Winner == player_inter){
           result[Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          m=l;
          break;
         	} else if (data[l].Loser == player_inter){
            result[Object.keys(player)[a]].push
					({"Round": axis_x[j], "difference": data[l].WRank-rank, "status":"L","opponent" 						:data[l].Winner});
        	j=j+1;
          m=l;
          player_inter=data[m].Winner  
          break;  
          }  
  			}    
  		}
    
    } else if (j<axis_x.length){
      //for (var l=k;k<data.length;k++){
         	if (data[data.length-1].Loser == Object.keys(player)[a]){
           result[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;
          
         	}  
  			
      
    }
	
	}
       
    console.log(Object.keys(result).length)
    
    
    
    
    
    
   });
    
  </script>
</body>

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