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
forked from Naram22's block: projet
forked from Naram22's block: projet
forked from Naram22's block: projet v11
xxxxxxxxxx
<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; }
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: blue;
stroke-width: 2px;
}
</style>
</head>
<body>
<script>
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) {
// 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]="200";
}
}
for (var a=0;a<Object.keys(player).length;a++){
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=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[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[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[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[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[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[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
//Creation of the array we want to plot
var p=56; var donnees2=[];
for(var d=0;d<128;d++) {
var tab_inter=[]
for (var b=0;b<7;b++){
tab_inter.push({"x":result[Object.keys(player)[d]][b].Round,"y":result[Object.keys(player)[d]][b].difference})
}
donnees2.push(tab_inter)
}
console.log(donnees2[1][0])
// tracé du graph
//Margin Convention
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//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 + ")");
//var groupe= svg.append("g")
//.attr("transform", "translate(20,20)");
//var x = d3.scale.ordinal().rangeRoundBands([0, width]);
var x = d3.scale.ordinal().rangePoints([0, width]);
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([-100,100]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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");
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
for(var d=0;d<32;d++) {
svg.append("path")
.datum(donnees2[d])
.attr("class", "line")
.attr("d", line);
}
//svg.append("path")
//.datum(donnees2)
//.attr("x", function(d) { return x(d.letter); })
//.attr("y", function(d) { return y(d.frequency); })
//.attr("class", "line")
});
</script>
</body>
https://d3js.org/d3.v3.min.js