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
forked from Naram22's block: projet v11
forked from Naram22's block: projet v16
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; }
.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]);
var xAxis2 = d3.svg.axis()
.scale(x2)
.orient("bottom")
var yAxis2 = d3.svg.axis()
.scale(y2)
.orient("left")
.ticks(10);
var svg2 = d3.select("body").append("svg")
.attr("width", width2 + margin2.left + margin2.right)
.attr("height", height + margin2.top + margin2.bottom)
.append("g")
.attr("transform",
"translate(" + margin2.left + "," + margin2.top + ")");
x2.domain(tab_performance.map(function(d) { return d.round; }));
y2.domain([0, 100]);
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis2)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "1.5em")
.attr("dy", ".9em")
//.attr("transform", "rotate(-90)" );
svg2.append("g")
.attr("class", "y axis")
.call(yAxis2)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Percentage ($)");
svg2.selectAll("bar")
.data(tab_performance)
.enter()
.append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x2(d.round); })
.attr("width", x2.rangeBand())
.attr("y", function(d) { return y2(d.percentage); })
.attr("height", function(d) { return height - y2(d.percentage); })
.on("mouseover", function (d) {m=d3.event;
div
.style("opacity", 1)
.html(d.number+"/"+num_player)
.style("left", (m.pageX) + "px")
.style("top", (m.pageY - 28) + "px");})
.on("mouseout", function (d) {div.style("opacity", 0);});
var select=svg.selectAll(".line_sel")
.on("mouseover", function () {d3.select(this).style("stroke", "red");d3.select(this).style("stroke-width",3);})
.on("mouseout", function () {d3.select(this).style("stroke", "steelblue");d3.select(this).style("stroke-width",0.5);});
//console.log(donnees2)
console.log(select)
// zooming functions
function zoomed() {
//console.log(d3.event.translate); // display information in the logging console of the browser (using developping tools)
//console.log(d3.event.scale);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.select(".y.grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
chartBody.selectAll(".line1")
.attr("class", "line1")
.attr("d", line);
svg.selectAll(".line2")
.attr("class", "line2")
.attr("d", line);
}
function zoomed2() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
}
d3.select("button").on("click", reset);
function reset() {
d3.transition().duration(1000).tween("zoom", function() {
var //ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
iy = d3.interpolate(y.domain(), [-200, 200]);
return function(t) {
zoom.y(y.domain(iy(t)));
zoomed();
};
});
}
});
</script>
</body>
https://d3js.org/d3.v3.min.js