ACC Basketball Line Chart

<!DOCTYPE html>
<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]);

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