D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
simzou
Full window
Github gist
Kobe Bryant 2012-13 Game Log Multi Line Chart Using NVD3
<!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>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js