xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{
font: 10px sans-serif;
}
.axis path,
.axis line{
fill:none;
stroke:#000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: black;
stroke-width: 3.5px;
}
.legend{
padding: 5px;
font: 10px sans-serif;
border: .5em solid black;
}
.team line{
stroke: black;
}
</style>
<title>ACC Tournament, Cumulative Wins</title>
<body>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
</head>
<script type="text/javascript">
var teams = [
"Clemson",
"Duke",
"Maryland",
"North Carolina",
"NC State",
"Virginia",
"Wake Forest",
];
var colors = [
"#FF6300",
"#00009C",
"#FF0000",
"#99BADD",
"#CE1126",
"#0D3268",
"#CFB53B",
];
var abbrDict={"Clem":"Clemson","Duke":"Duke","MD":"Maryland","UNC":"North Carolina", "NCS":"NC State", "UVA":"Virginia","WF":"Wake Forest"};
var dataset=0;
var w=950;
var h=440;
var padding = 30;
var color = d3.scale.ordinal() //custom color scale for teams
.range(colors)
.domain(teams);
d3.csv("basketball_data2.csv",function(data){
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));
data.forEach(function(d) {
d.Year = +d.Year;
d.Clem = +d.Clem;
d.Duke = +d.Duke;
d.MD = +d.MD;
d.UNC = +d.UNC;
d.NCS = +d.NCS;
d.UVA = +d.UVA;
d.WF = +d.WF;
});
var teams = color.domain().map(function(name) {
return {
name: name,
sort_value: 0,
values: data.map(function(d) {
return {date: d.Year, wins: d[name]};
})
};
});
//teams in order of most cumulative wins
teams.sort(function(a,b){
return parseFloat(b.values[49].wins)-parseFloat(a.values[49].wins);
});
console.log(teams);
visualize(teams);
});
var visualize = function(team_dict){
var xScale = d3.scale.linear().range([padding,w-padding]);
var yScale = d3.scale.linear().range([h,padding]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(d3.format("04d"));
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function(d){
if(xScale(d.date)<0){ //quick fix to ensure Wake Forest wasn't extending into negatives
return padding;
}
else{
return padding+xScale(d.date);
}
})
.y(function(d){
return yScale(d.wins);
})
var svg = d3.select("body").append("svg")
.attr("width",w + padding*2)
.attr("height",h + padding*2)
.append("g")
.attr("transform", "translate(" + padding + "," + padding + ")");
xScale.domain([1954,2001]);
yScale.domain([
d3.min(team_dict, function(c) { return d3.min(c.values, function(v) { return v.wins; }); }),
d3.max(team_dict, function(c) { return d3.max(c.values, function(v) { return v.wins; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+padding+"," + h + ")")
.call(xAxis)
.append("text")
.attr("y",30)
.attr("x",w/2)
.style("font-size",16+"px")
.text("Year");
svg.append("g")
.attr("class", "y axis")
.attr("transform","translate("+padding/2+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
//.style("text-anchor", "end")
.attr("x",-h/1.4)
.style("font-size",16+"px")
.text("Cumulative Number of Wins");
var team = svg.selectAll("g.team")
.data(team_dict)
.enter()
.append("g")
.attr("class", "team");
team.append("path")
.attr("class", "team line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
//border for legend
//not apart of the g group/legend class because Clemson's orange square disappears when I do that
svg.append("rect")
.attr("x",padding)
.attr("y",-15)
.attr("width",200)
.attr("height",100)
.attr("style","fill-opacity:0;stroke:black;stroke-width:1.5px");
var legend = svg.append("g")
.attr("class","legend")
.attr("width",200)
.attr("height",100);
//create elements inside of the legend
var gs = legend.selectAll("g.keybox")
.data(team_dict).enter().append("g")
.attr("class","keybox").attr("width",80).attr("height",15).attr("x",function(d,i){
if(i<4){return 65;}
else{return 150;}
})
.attr("y",function(d,i){
if(i<4){return i*20;}
else{return (i-4) * 20;}
});
gs.append("text")
.attr("class","keybox").attr("x",function(d,i){
if(i<4){return 80;}
else{return 163;}
})
//alternate boxes between two columns
.attr("y",function(d,i){
if(i<4){return i*20 +9;}
else{return (i-4)*20 +9;}
})
.text(function(d){
return abbrDict[d.name];
});
gs.append("rect")
.attr("x",function(d,i){
if(i<4){return 65;}
else{return 150;}
})
.attr("y",function(d,i){
if(i<4){return i*20;}
else{return (i-4) * 20;}
})
.attr("width",10)
.attr("height",10)
.style("fill",function(d){
return color(d.name);
});
svg.selectAll("g.keybox").on("mouseover",function(){
var keepName = this.textContent;
var selectedLine_box;
svg.selectAll("path.team.line").style("stroke", function(d){
if(abbrDict[d.name]!=keepName){
return "#C0C0C0";
}
else{
selectedLine_box = d3.select(this);
return color(d.name);
}
});
var pathNode = selectedLine_box.node();
var len = pathNode.getTotalLength();
var pos = pathNode.getPointAtLength(len);
svg.append("text")
.attr("id","tooltip")
.attr("x",w-55)
.attr("y",pos.y-3)
.text(keepName)
.style("font-family","sans-serif")
.style("font-size",14+"px");
var node = selectedLine_box.node();
console.log(node);
var parent = node.parentNode;
var grandparent = node.parentNode.parentNode;
console.log(parent);
console.log(grandparent);
console.log(parent.childNodes);
grandparent.removeChild(parent);
grandparent.appendChild(parent);
});
svg.selectAll("g.keybox").on("mouseout",function(){
d3.select("#tooltip").remove();
svg.selectAll("path.team.line").style("stroke",function(d){
return color(d.name);
});
});
svg.selectAll("g.team")
.on("mouseover",function(d){
var lineName;
svg.selectAll("path.team.line").style("stroke","#C0C0C0"); //set all to gray
var selectedGroup = d3.select(this);
console.log(this);
var selectedLine = selectedGroup.select("path.team.line");
selectedLine.style("stroke",function(d){ //let active keep color
lineName = abbrDict[d.name]; //full name to be at end of line
return color(d.name);
});
//get position of end of line
var pathNode = selectedLine.node(); //grab the node from the selection
var len = pathNode.getTotalLength();
var pos = pathNode.getPointAtLength( len );
//append text to end of line
svg.append("text")
.attr("id","tooltip")
.attr("x",pos.x-55)
.attr("y",pos.y)
.text(lineName)
.style("font-family","sans-serif")
.style("font-size",13+"px"); //**
this.parentNode.appendChild(this); //brings team to front, must select the path's g parent to reorder it
})
.on("mouseout",function(){
d3.select("#tooltip").remove();
d3.selectAll("path.team").transition().style("stroke",function(d){
return color(d.name);
});
});
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js