ahwolf/d3_visual.js

## d3_visual.js
var data = [];
var width = 700;
var height = 500;


d3.csv("output.csv", function(csv_data) {

  // make the data into an x y graph

  var xy_data = [{
    key: "C",
    values: []
  }, {
    key: "PF",
    values: []
  }]
  console.log(csv_data);

  _.each(csv_data, function(d, i) {

    var values = {
      x: +d.PER,
      y: +d.Salary,
      player: d.Player,
      size: d.WS_48
    }

    if (d.Position === "PF") {
      xy_data[1].values.push(values)
    } else {
      xy_data[0].values.push(values)
    }
  });

  nv.addGraph(function() {

    var chart = nv.models.scatterChart()
      .showDistX(true)
      .showDistY(true)
      .width(width)
      .height(height)
      .margin({
        top: 50,
        right: 50,
        bottom: 50,
        left: 100
      })
      .useVoronoi(false)
    //.interactive(false)

    chart.xAxis
      .axisLabel('PER')
      .tickFormat(d3.format('.1f'));

    chart.yAxis
      .axisLabel('Salary ($mm)')
      .tickFormat(d3.format('.1f'));

    chart.tooltipContent(function(key, x, y, point) {
      console.log("key is: ", key, x, y, point)
      return '<h2>' + point.point.player + '</h2>Win share: ' + point.point.size;
    });

    d3.select('#chart svg')
      .attr('width', width)
      .attr('height', height)
      .datum(xy_data)
      .transition().duration(500)
      .call(chart);

    return chart;


    // chart.xAxis
    //     .axisLabel('Time (ms)')
    //     .tickFormat(d3.format(',r'));

    // chart.yAxis
    //     .axisLabel('Voltage (v)')
    //     .tickFormat(d3.format('.02f'));

    return chart;
  });

});


// _.each(data, function(d,i){
// 	var modulus = i % 11;
// 	d.color = colorbrewer.RdYlGn[11][modulus]
// 	console.log(d,modulus);
// })

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>NBA Bigs</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.css">
</head>
<body>

  <div id="chart">
    <svg></svg>
  </div>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>

  <script src="d3_visual.js"></script>

</body>

</html>

## output.csv

          
            Player
            Position
            Minutes
            PER
            WS_48
            Salary

            
              Anthony Davis
              C
              537
              28.4
              0.250
              5.3758

            
              DeMarcus Cousins
              C
              459
              25.3
              0.146
              4.9170

            
              Ryan Anderson
              PF
              275
              24.5
              0.231
              8.3085

            
              Andre Drummond
              C
              584
              23.3
              0.209
              2.4624

            
              Kenneth Faried
              PF
              431
              20.8
              0.187
              1.3676

            
              DeJuan Blair
              PF
              395
              20.2
              0.171
              0.9479

            
              Spencer Hawes
              C
              566
              19.9
              0.149
              6.5000

            
              Nikola Vucevic
              C
              565
              19.7
              0.140
              1.7935

            
              Markieff Morris
              PF
              442
              19.4
              0.155
              2.0918

            
              Jordan Hill
              PF
              396
              19.2
              0.162
              3.5636

            
              John Henson
              PF
              424
              19.1
              0.120
              1.9054

            
              Timofey Mozgov
              C
              321
              19.0
              0.159
              4.4000

            
              Jared Sullinger
              PF
              461
              18.6
              0.126
              1.3657

            
              Andray Blatche
              PF
              409
              18.1
              0.063
              1.3756

            
              Terrence Jones
              PF
              365
              18.1
              0.160
              1.5518

            
              Greg Monroe
              PF
              613
              18.0
              0.122
              4.0865

            
              Derrick Favors
              PF
              617
              17.9
              0.102
              6.0082

            
              Jeff Adrien
              PF
              176
              17.7
              0.209
              0.9161

            
              Boris Diaw
              PF
              390
              17.4
              0.172
              4.7025

            
              Mason Plumlee
              PF
              266
              17.4
              0.150
              1.2986

            
              Ed Davis
              PF
              225
              17.2
              0.144
              3.1539

            
              Chris Andersen
              C
              307
              17.2
              0.189
              1.3995

            
              Samuel Dalembert
              C
              446
              17.1
              0.161
              3.7007

            
              Marcin Gortat
              C
              614
              17.1
              0.134
              7.7273

            
              Thaddeus Young
              PF
              531
              17.0
              0.090
              8.8500

            
              Kyle O'Quinn
              C
              140
              16.8
              0.140
              0.7889

            
              Taj Gibson
              PF
              415
              16.3
              0.125
              7.5500

            
              Omri Casspi
              PF
              391
              15.9
              0.136
              0.9479

            
              Andrew Nicholson
              PF
              370
              15.8
              0.119
              1.4820

            
              Marvin Williams
              PF
              338
              15.6
              0.114
              7.5000

            
              Channing Frye
              PF
              483
              15.4
              0.139
              6.4000

            
              Miles Plumlee
              C
              528
              15.2
              0.082
              1.1215

            
              Tyler Hansbrough
              PF
              362
              15.1
              0.159
              3.1830

            
              Brandon Bass
              PF
              583
              15.1
              0.118
              6.4500
	var data = [];
	var width = 700;
	var height = 500;


	d3.csv("output.csv", function(csv_data) {

	// make the data into an x y graph

	var xy_data = [{
	key: "C",
	values: []
	}, {
	key: "PF",
	values: []
	}]
	console.log(csv_data);

	_.each(csv_data, function(d, i) {

	var values = {
	x: +d.PER,
	y: +d.Salary,
	player: d.Player,
	size: d.WS_48
	}

	if (d.Position === "PF") {
	xy_data[1].values.push(values)
	} else {
	xy_data[0].values.push(values)
	}
	});

	nv.addGraph(function() {

	var chart = nv.models.scatterChart()
	.showDistX(true)
	.showDistY(true)
	.width(width)
	.height(height)
	.margin({
	top: 50,
	right: 50,
	bottom: 50,
	left: 100
	})
	.useVoronoi(false)
	//.interactive(false)

	chart.xAxis
	.axisLabel('PER')
	.tickFormat(d3.format('.1f'));

	chart.yAxis
	.axisLabel('Salary ($mm)')
	.tickFormat(d3.format('.1f'));

	chart.tooltipContent(function(key, x, y, point) {
	console.log("key is: ", key, x, y, point)
	return '<h2>' + point.point.player + '</h2>Win share: ' + point.point.size;
	});

	d3.select('#chart svg')
	.attr('width', width)
	.attr('height', height)
	.datum(xy_data)
	.transition().duration(500)
	.call(chart);

	return chart;


	// chart.xAxis
	// .axisLabel('Time (ms)')
	// .tickFormat(d3.format(',r'));

	// chart.yAxis
	// .axisLabel('Voltage (v)')
	// .tickFormat(d3.format('.02f'));

	return chart;
	});

	});


	// _.each(data, function(d,i){
	// var modulus = i % 11;
	// d.color = colorbrewer.RdYlGn[11][modulus]
	// console.log(d,modulus);
	// })
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>NBA Bigs</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.css">
	</head>
	<body>

	<div id="chart">
	<svg></svg>
	</div>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>

	<script src="d3_visual.js"></script>

	</body>

	</html>
Player	Position	Minutes	PER	WS_48	Salary
Anthony Davis	C	537	28.4	0.250	5.3758
DeMarcus Cousins	C	459	25.3	0.146	4.9170
Ryan Anderson	PF	275	24.5	0.231	8.3085
Andre Drummond	C	584	23.3	0.209	2.4624
Kenneth Faried	PF	431	20.8	0.187	1.3676
DeJuan Blair	PF	395	20.2	0.171	0.9479
Spencer Hawes	C	566	19.9	0.149	6.5000
Nikola Vucevic	C	565	19.7	0.140	1.7935
Markieff Morris	PF	442	19.4	0.155	2.0918
Jordan Hill	PF	396	19.2	0.162	3.5636
John Henson	PF	424	19.1	0.120	1.9054
Timofey Mozgov	C	321	19.0	0.159	4.4000
Jared Sullinger	PF	461	18.6	0.126	1.3657
Andray Blatche	PF	409	18.1	0.063	1.3756
Terrence Jones	PF	365	18.1	0.160	1.5518
Greg Monroe	PF	613	18.0	0.122	4.0865
Derrick Favors	PF	617	17.9	0.102	6.0082
Jeff Adrien	PF	176	17.7	0.209	0.9161
Boris Diaw	PF	390	17.4	0.172	4.7025
Mason Plumlee	PF	266	17.4	0.150	1.2986
Ed Davis	PF	225	17.2	0.144	3.1539
Chris Andersen	C	307	17.2	0.189	1.3995
Samuel Dalembert	C	446	17.1	0.161	3.7007
Marcin Gortat	C	614	17.1	0.134	7.7273
Thaddeus Young	PF	531	17.0	0.090	8.8500
Kyle O'Quinn	C	140	16.8	0.140	0.7889
Taj Gibson	PF	415	16.3	0.125	7.5500
Omri Casspi	PF	391	15.9	0.136	0.9479
Andrew Nicholson	PF	370	15.8	0.119	1.4820
Marvin Williams	PF	338	15.6	0.114	7.5000
Channing Frye	PF	483	15.4	0.139	6.4000
Miles Plumlee	C	528	15.2	0.082	1.1215
Tyler Hansbrough	PF	362	15.1	0.159	3.1830
Brandon Bass	PF	583	15.1	0.118	6.4500