D3 Examples - Kobe Bryant 2012-13 Game Log Multi Line Chart Using NVD3

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Kobe Bryant 2012-13 Game Log Line Graph Using NVD3</title>
<link rel="stylesheet" type="text/css" href="nv.d3.css">
</head>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="nv.d3.js"></script>
​
<script>
​
var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var parseDate = d3.time.format("%Y-%m-%d").parse;
​
var color = d3.scale.category20();
​
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 + ")");
​
d3.csv("kobegamelog.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { 
    var exclude = ["Rk","G","Date","Age","Tm","","Opp","","GS"], // blacklist
        include = ["MP","FG","FGA","FG%","3P","3PA","FT","FTA",
                  "ORB","DRB","TRB","AST","STL","BLK","TOV","PF","PTS","GmSc"]; // whitelist
​
    return (include.indexOf(key) >= 0); 
  }));
​
  data.forEach(function(d) {
    d.Date = parseDate(d.Date);
  });
​
  var categories = color.domain().map(function(name) {
    return {
      key: name,
      values: data.map(function(d) {
        return {
          date: d.Date, 
          stat: parseFloat(d[name]),
          result: d.Res,
          opponent: d.Opp,
          };
      })
      //visible: (name === "PTS" ? true : false)
    };
  }); // end of categories
​
  nv.addGraph(function() {
    var chart = nv.models.lineWithFocusChart()
      .x(function(d) { return d.date; })
      .y(function(d) { return d.stat; })
      .width(width)
      .height(height)
      .margin(margin)
​
    chart.xAxis.tickFormat(function(d) {
          return d3.time.format('%m/%d/%y')(new Date(d))
        });
    chart.x2Axis.tickFormat(function(d) {
          return d3.time.format('%m/%d/%y')(new Date(d))
        });
​
    svg.datum(categories)
      .call(chart);
​
    //nv.utils.windowResize(chart.update);
​
    return chart;
  }); // end of nv.addGraph
​
}); // end of d3.csv
​
​
</script>
</html>
    