Top 100 NBA Players

by Robodude

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/938212/nba_team_info.js"></script>
<script src="https://dl.dropboxusercontent.com/u/938212/nba_stats_20141201.js"></script>        
<body>
    <div id="ToolBar">          
        <button id="EntireSet">Entire Set</button>    
        <button id="ByConference">By Conference</button>
        <button id="ByDivision">By Division</button>       
        <button id="ByTeam">By Team</button>
    </div>
    <br />
</body>

CSS

body {
                font: 10px sans-serif;
                background: #87e0fd; /* Old browsers */
                background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
            }

            .axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }

            .y.axis path {
                display: none;
            }

            .y.axis line {
                stroke: #777;
                stroke-dasharray: 2,2;
            }

            div.tooltip {   
                position: absolute;           
                text-align: left;           
                width: 200px;                  
                height: 60px;                 
                padding: 2px;             
                font: 12px sans-serif;        
                background: lightsteelblue;   
                border: 0px;      
                border-radius: 8px;           
                pointer-events: none;     
            }

JavaScript

$(document).ready(function () {
                for (var i = 0; i < data.length; i++) {
                    var player = data[i];
                    player.x = 0;
                    player.y = 0;
                    player.px = 0;
                    player.py = 0;
                    player.type = 0;
                    player.TeamInfo = teamInfo[player.Team];
                }

                var circleStrokeWidth = 1.5;
                var margin = { top: 50, right: 50, bottom: 50, left: 50 };
                var width = 1024 - margin.left - margin.right;
                var height = 768 - margin.top - margin.bottom;

                var force = d3.layout.force();

                var plusMinusExtent = d3.extent(data, function (d, i) { return d["Plus/Minus"]});
                var plusMinusScale = d3.scale.linear().domain(plusMinusExtent).range([1, 15]);

                var toolTip = d3.select("body").append("div")
                            .attr("class", "tooltip")
                            .style("opacity", 0);

                var svg = d3.select("body").append("svg")
                    .attr("id", "svgArea")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                var selection = svg.selectAll(".dataGroup")
                                    .data(data)
                                    .enter()
                                    .append("g")
                                        .attr("id", function (d, i) { return "player_" + i; })
                                        .attr("class", "dataGroup")
                                        .attr("transform", function (d, i) { return "translate(" + 0 + "," + 0 + ")"; })
                                        .each(function (d, i) { d.x = (width / 2); d.y =...