Skip to content

Instantly share code, notes, and snippets.

@simzou
Last active December 22, 2015 07:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simzou/6439398 to your computer and use it in GitHub Desktop.
Save simzou/6439398 to your computer and use it in GitHub Desktop.
Kobe Bryant 2012-13 Game Log Line Graph

This graph shows a multi series line graph for the game log of Kobe Bryant's 2012-2013 season using D3.js.

Different stats can be toggled on and off by clicking the legend boxes on the right and the y axis will adjust accordingly.

See graph here

###Credits:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Kobe Bryant 2012-13 Game Log Line Graph</title>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.legend-box {
cursor: pointer;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.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 xScale = d3.time.scale()
.range([0, width]);
var yScale = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.stat); });
var maxY;
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 {
name: 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)
};
});
xScale.domain(d3.extent(data, function(d) { return d.Date; }));
yScale.domain([0,
d3.max(categories, function(c) { return d3.max(c.values, function(v) { return v.stat; }); })
]);
// draw line graph
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Stat");
var statistic = svg.selectAll(".statistic")
.data(categories)
.enter().append("g")
.attr("class", "statistic");
statistic.append("path")
.attr("class", "line")
.attr("id", function(d) {
return "line-" + d.name.replace("%", "P");
})
.attr("d", function(d) {
return d.visible ? line(d.values) : null;
})
.style("stroke", function(d) { return color(d.name); });
// draw legend
statistic.append("rect")
.attr("height",10)
.attr("width", 25)
.attr("x",width+10)
.attr("y",function(d,i) {return i * 20 - 8;})
.attr("stroke", function(d) { return color(d.name); })
.attr("fill",function(d) {
return d.visible ? color(d.name) : "white";
})
.attr("class", "legend-box")
.on("click", function(d){
d.visible = !d.visible;
maxY = findMaxY(categories);
yScale.domain([0,maxY]);
svg.select(".y.axis")
.transition()
.call(yAxis);
statistic.select("path").transition()
.attr("d", function(d){
return d.visible ? line(d.values) : null;
})
statistic.select("rect")
.transition()
.attr("fill", function(d) {
return d.visible ? color(d.name) : "white";
});
})
.on("mouseover", function(d){
d3.select("#line-" + d.name.replace("%", "P"))
.transition()
.style("stroke-width", 3);
})
.on("mouseout", function(d){
d3.select("#line-" + d.name.replace("%", "P"))
.transition()
.style("stroke-width", 1.5);
})
statistic.append("text")
.attr("x", function (d) {
return width + 25 + 15
})
.attr("y", function(d,i) {
return i * 20;
})
.text(function(d) { return d.name; })
});
function findMaxY(data){
var maxValues = data.map(function(d) {
if (d.visible){
return d3.max(d.values, function(value) {
return value.stat; })
}
});
return d3.max(maxValues);
}
</script>
</html>
Rk G Date Age Tm Loc Opp Res GS MP FG FGA FG% 3P 3PA 3P% FT FTA FT% ORB DRB TRB AST STL BLK TOV PF PTS GmSc
1 1 2012-10-30 34-068 LAL DAL L (-8) 1 34:52 11 14 .786 0 0 0 0 0 1 1 0 1 0 2 3 22 14.7
2 2 2012-10-31 34-069 LAL @ POR L (-10) 1 38:29 10 20 .500 4 9 .444 6 7 .857 2 4 6 3 0 0 7 5 30 15.3
3 3 2012-11-02 34-071 LAL LAC L (-10) 1 42:55 14 23 .609 2 3 .667 10 10 1.000 2 4 6 1 2 0 6 1 40 28.4
4 4 2012-11-04 34-073 LAL DET W (+29) 1 31:43 5 10 .500 3 5 .600 2 2 1.000 0 7 7 8 1 0 1 4 15 16.1
5 5 2012-11-07 34-076 LAL @ UTA L (-9) 1 37:17 7 17 .412 0 4 .000 15 17 .882 0 5 5 4 3 0 6 3 29 19.2
6 6 2012-11-09 34-078 LAL GSW W (+24) 1 32:43 10 18 .556 2 4 .500 5 6 .833 1 8 9 7 2 0 4 2 27 23.2
7 7 2012-11-11 34-080 LAL SAC W (+13) 1 33:30 6 15 .400 2 5 .400 6 6 1.000 2 4 6 6 1 0 2 2 20 16.9
8 8 2012-11-13 34-082 LAL SAS L (-2) 1 38:05 12 19 .632 2 4 .500 2 2 1.000 0 4 4 8 1 0 2 0 28 25.3
9 9 2012-11-16 34-085 LAL PHO W (+12) 1 38:26 10 24 .417 1 5 .200 10 11 .909 1 1 2 6 1 0 1 2 31 22.2
10 10 2012-11-18 34-087 LAL HOU W (+11) 1 35:12 9 18 .500 1 3 .333 3 5 .600 1 10 11 11 3 0 3 4 22 22.0
11 11 2012-11-20 34-089 LAL BRK W (+5) 1 38:36 8 15 .533 1 4 .250 8 10 .800 0 4 4 5 1 0 3 4 25 18.0
12 12 2012-11-21 34-090 LAL @ SAC L (-16) 1 38:46 11 20 .550 5 9 .556 11 13 .846 0 3 3 3 2 0 7 3 38 24.4
13 13 2012-11-23 34-092 LAL @ MEM L (-8) 1 37:29 7 23 .304 3 8 .375 13 14 .929 0 3 3 4 1 0 2 4 30 17.4
14 14 2012-11-24 34-093 LAL @ DAL W (+26) 1 33:16 6 11 .545 1 2 .500 6 8 .750 1 2 3 5 1 0 6 3 19 11.5
15 15 2012-11-27 34-096 LAL IND L (-2) 1 43:44 12 28 .429 5 11 .455 11 13 .846 0 10 10 3 3 0 10 2 40 21.7
16 16 2012-11-30 34-099 LAL DEN W (+19) 1 37:10 5 15 .333 0 3 .000 4 4 1.000 1 1 2 8 2 0 4 5 14 8.1
17 17 2012-12-02 34-101 LAL ORL L (-10) 1 38:43 12 27 .444 0 2 .000 10 11 .909 1 6 7 5 1 0 2 2 34 23.7
18 18 2012-12-04 34-103 LAL @ HOU L (-2) 1 34:53 14 31 .452 2 9 .222 9 12 .750 1 5 6 2 2 0 3 4 39 22.7
19 19 2012-12-05 34-104 LAL @ NOH W (+16) 1 33:53 10 17 .588 1 4 .250 8 9 .889 1 5 6 4 3 0 1 1 29 27.3
20 20 2012-12-07 34-106 LAL @ OKC L (-6) 1 43:30 11 24 .458 4 5 .800 9 10 .900 0 3 3 7 3 2 5 5 35 25.4
21 21 2012-12-09 34-108 LAL UTA L (-7) 1 43:03 9 24 .375 4 9 .444 12 14 .857 0 0 0 3 1 0 2 2 34 20.3
22 22 2012-12-11 34-110 LAL @ CLE L (-6) 1 40:43 16 28 .571 3 9 .333 7 10 .700 1 4 5 2 1 1 5 1 42 27.2
23 23 2012-12-13 34-112 LAL @ NYK L (-9) 1 44:02 10 24 .417 5 11 .455 6 6 1.000 2 8 10 6 1 1 5 5 31 20.9
24 24 2012-12-14 34-113 LAL @ WAS W (+6) 1 43:36 9 29 .310 1 8 .125 11 13 .846 3 4 7 7 2 1 3 1 30 20.0
25 25 2012-12-16 34-115 LAL @ PHI W (+13) 1 40:02 12 21 .571 2 6 .333 8 9 .889 0 4 4 6 1 0 5 0 34 25.1
26 26 2012-12-18 34-117 LAL CHA W (+1) 1 43:17 11 24 .458 2 5 .400 6 7 .857 0 6 6 7 1 1 2 1 30 23.2
27 27 2012-12-22 34-121 LAL @ GSW W (+3) 1 43:39 16 41 .390 2 8 .250 0 1 .000 3 7 10 5 1 0 3 5 34 15.0
28 28 2012-12-25 34-124 LAL NYK W (+6) 1 43:37 14 24 .583 1 5 .200 5 7 .714 1 4 5 1 0 1 1 2 34 23.5
29 29 2012-12-26 34-125 LAL @ DEN L (-12) 1 44:01 13 24 .542 5 9 .556 9 11 .818 0 4 4 6 0 2 2 2 40 31.6
30 30 2012-12-28 34-127 LAL POR W (+17) 1 30:40 9 18 .500 1 6 .167 8 11 .727 2 3 5 4 2 0 1 3 27 21.7
31 31 2013-01-01 34-131 LAL PHI L (-4) 1 42:25 14 29 .483 1 6 .167 7 10 .700 4 2 6 0 1 0 3 2 36 20.7
32 32 2013-01-04 34-134 LAL @ LAC L (-5) 1 43:39 15 25 .600 1 6 .167 7 8 .875 0 0 0 3 5 0 1 3 38 31.0
33 33 2013-01-06 34-136 LAL DEN L (-7) 1 42:12 11 26 .423 3 8 .375 4 4 1.000 1 4 5 7 0 0 2 2 29 19.2
34 34 2013-01-08 34-138 LAL @ HOU L (-13) 1 41:26 8 22 .364 2 8 .250 2 2 1.000 2 3 5 7 3 0 5 3 20 11.8
35 35 2013-01-09 34-139 LAL @ SAS L (-3) 1 38:43 10 24 .417 3 8 .375 4 7 .571 0 4 4 5 0 0 1 3 27 15.5
36 36 2013-01-11 34-141 LAL OKC L (-15) 1 35:03 8 23 .348 2 8 .250 10 13 .769 0 4 4 3 2 0 1 2 28 17.4
37 37 2013-01-13 34-143 LAL CLE W (+20) 1 27:58 9 14 .643 3 4 .750 2 4 .500 0 2 2 6 0 0 4 4 23 15.2
38 38 2013-01-15 34-145 LAL MIL W (+16) 1 36:40 12 19 .632 3 5 .600 4 4 1.000 1 1 2 6 1 0 1 2 31 26.9
39 39 2013-01-17 34-147 LAL MIA L (-9) 1 42:55 8 25 .320 4 9 .444 2 2 1.000 1 3 4 1 1 0 6 4 22 3.4
40 40 2013-01-20 34-150 LAL @ TOR L (-5) 1 42:53 10 32 .313 3 12 .250 3 3 1.000 0 4 4 5 2 1 6 1 26 8.6
41 41 2013-01-21 34-151 LAL @ CHI L (-12) 1 41:58 7 22 .318 0 6 .000 2 3 .667 0 4 4 5 0 0 3 2 16 3.9
42 42 2013-01-23 34-153 LAL @ MEM L (-13) 1 38:34 11 23 .478 0 1 .000 7 8 .875 0 3 3 3 1 0 2 1 29 18.5
43 43 2013-01-25 34-155 LAL UTA W (+18) 1 34:44 7 10 .700 0 0 0 0 0 9 9 14 3 1 3 0 14 23.0
44 44 2013-01-27 34-157 LAL OKC W (+9) 1 38:47 8 12 .667 0 0 5 6 .833 0 9 9 14 1 1 3 1 21 26.2
45 45 2013-01-29 34-159 LAL NOH W (+5) 1 34:23 5 12 .417 0 4 .000 4 4 1.000 3 5 8 11 0 0 2 1 14 16.5
46 46 2013-01-30 34-160 LAL @ PHO L (-6) 1 38:40 7 17 .412 0 3 .000 3 4 .750 0 5 5 9 2 0 6 0 17 11.3
47 47 2013-02-01 34-162 LAL @ MIN W (+11) 1 38:30 4 13 .308 1 4 .250 8 10 .800 2 10 12 8 0 0 4 2 17 13.9
48 48 2013-02-03 34-164 LAL @ DET W (+1) 1 37:05 8 20 .400 0 3 .000 2 3 .667 0 3 3 5 2 0 3 0 18 10.2
49 49 2013-02-05 34-166 LAL @ BRK W (+9) 1 37:16 9 24 .375 0 2 .000 3 3 1.000 1 7 8 4 4 1 5 1 21 12.7
50 50 2013-02-07 34-168 LAL @ BOS L (-21) 1 29:41 9 15 .600 0 1 .000 9 9 1.000 3 4 7 0 0 0 4 2 27 18.6
51 51 2013-02-08 34-169 LAL @ CHA W (+7) 1 37:33 6 15 .400 0 2 .000 8 8 1.000 0 7 7 8 0 1 3 0 20 17.3
52 52 2013-02-10 34-171 LAL @ MIA L (-10) 1 37:03 11 19 .579 0 0 6 8 .750 1 5 6 9 1 0 4 2 28 23.0
53 53 2013-02-12 34-173 LAL PHO W (+6) 1 35:46 1 8 .125 0 4 .000 2 2 1.000 1 4 5 9 1 1 8 1 4 0.3
54 54 2013-02-14 34-175 LAL LAC L (-24) 1 38:39 7 13 .538 0 0 6 6 1.000 3 2 5 11 0 0 6 2 20 17.3
55 55 2013-02-20 34-181 LAL BOS W (+14) 1 32:49 5 15 .333 0 4 .000 6 7 .857 1 3 4 7 0 0 3 5 16 8.6
56 56 2013-02-22 34-183 LAL POR W (+4) 1 35:51 15 23 .652 1 3 .333 9 9 1.000 2 5 7 4 2 0 5 1 40 32.2
57 57 2013-02-24 34-185 LAL @ DAL W (+4) 1 38:16 13 21 .619 4 5 .800 8 10 .800 1 11 12 7 0 1 5 2 38 31.5
58 58 2013-02-25 34-186 LAL @ DEN L (-11) 1 38:44 12 23 .522 0 1 .000 5 6 .833 0 6 6 9 0 0 4 3 29 20.2
59 59 2013-02-28 34-189 LAL MIN W (+22) 1 31:33 13 22 .591 4 8 .500 3 7 .429 1 4 5 5 2 0 3 1 33 25.2
60 60 2013-03-03 34-192 LAL ATL W (+1) 1 39:00 13 27 .481 2 5 .400 6 8 .750 1 5 6 4 2 0 5 1 34 21.1
61 61 2013-03-05 34-194 LAL @ OKC L (-17) 1 39:24 8 19 .421 3 7 .429 11 12 .917 1 2 3 2 0 0 2 3 30 19.0
62 62 2013-03-06 34-195 LAL @ NOH W (+6) 1 41:57 14 21 .667 3 7 .429 11 14 .786 0 7 7 12 0 1 6 0 42 36.9
63 63 2013-03-08 34-197 LAL TOR W (+2) 1 43:47 11 22 .500 5 10 .500 14 16 .875 1 5 6 12 2 0 9 0 41 32.8
64 64 2013-03-10 34-199 LAL CHI W (+9) 1 39:35 7 16 .438 1 4 .250 4 6 .667 1 6 7 9 2 0 2 2 19 17.8
65 65 2013-03-12 34-201 LAL @ ORL W (+9) 1 36:27 4 14 .286 2 6 .333 1 2 .500 1 6 7 8 2 0 3 1 11 9.1
66 66 2013-03-13 34-202 LAL @ ATL L (-4) 1 38:12 11 33 .333 2 8 .250 7 8 .875 1 6 7 5 2 0 5 1 31 14.5
67 67 2013-03-15 34-204 LAL @ IND W (+6) 1 12:00 0 4 .000 0 1 .000 0 0 0 1 1 2 0 0 1 1 0 -2.5
68 68 2013-03-22 34-211 LAL WAS L (-3) 1 37:53 8 18 .444 1 2 .500 4 7 .571 1 3 4 11 2 0 6 3 21 14.5
69 69 2013-03-25 34-214 LAL @ GSW L (-6) 1 41:54 11 27 .407 2 10 .200 12 16 .750 1 7 8 3 0 0 0 1 36 24.4
70 70 2013-03-27 34-216 LAL @ MIN W (+3) 1 37:47 12 21 .571 3 7 .429 4 6 .667 0 3 3 7 1 1 6 4 31 20.2
71 71 2013-03-28 34-217 LAL @ MIL L (-10) 1 36:28 6 17 .353 0 3 .000 18 20 .900 0 2 2 3 0 0 6 2 30 15.6
72 72 2013-03-30 34-219 LAL @ SAC W (+5) 1 47:37 5 18 .278 0 4 .000 9 11 .818 1 8 9 14 2 0 1 2 19 20.7
73 73 2013-04-02 34-222 LAL DAL W (+20) 1 47:04 8 18 .444 0 3 .000 7 8 .875 1 10 11 11 4 2 4 3 23 24.8
74 74 2013-04-05 34-225 LAL MEM W (+2) 1 42:32 10 23 .435 0 5 .000 4 4 1.000 0 5 5 9 1 0 4 3 24 15.5
75 75 2013-04-07 34-227 LAL @ LAC L (-14) 1 47:20 6 19 .316 1 5 .200 12 14 .857 1 6 7 10 0 0 4 3 25 17.6
76 76 2013-04-09 34-229 LAL NOH W (+8) 1 41:06 9 18 .500 2 7 .286 10 11 .909 1 5 6 6 5 1 5 2 30 26.9
77 77 2013-04-10 34-230 LAL @ POR W (+7) 1 48:00 14 27 .519 1 5 .200 18 18 1.000 0 8 8 5 3 4 1 4 47 42.8
78 78 2013-04-12 34-232 LAL GSW W (+2) 1 44:54 9 21 .429 4 8 .500 12 16 .750 0 5 5 4 0 0 5 3 34 19.4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment