Built with blockbuilder.org
forked from srinivashavanur's block: Visual Implementation 10
Built with blockbuilder.org
forked from srinivashavanur's block: Visual Implementation 10
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
font: 10px sans-serif; | |
padding: 10px; | |
} | |
.axis, | |
.frame { | |
shape-rendering: crispEdges; | |
} | |
.axis line { | |
stroke: #ddd; | |
} | |
.axis path { | |
display: none; | |
} | |
.cell text { | |
font-weight: bold; | |
text-transform: capitalize; | |
} | |
.frame { | |
fill: none; | |
stroke: #aaa; | |
} | |
circle { | |
fill-opacity: .7; | |
} | |
circle.hidden { | |
fill: #ccc !important; | |
} | |
.extent { | |
fill: #000; | |
fill-opacity: .125; | |
stroke: #fff; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var width = 1360, | |
size = 230, | |
padding = 20; | |
var x = d3.scale.linear() | |
.range([padding / 2, size - padding / 2]); | |
var y = d3.scale.linear() | |
.range([size - padding / 2, padding / 2]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.ticks(6); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.ticks(6); | |
var color = d3.scale.category10(); | |
d3.csv("passing-stats-2014.csv", function(error, data) { | |
if (error) throw error; | |
var domainByTrait = {}, | |
traits = d3.keys(data[0]).filter(function(d) { return d !== "Groupings"; }), | |
n = traits.length; | |
traits.forEach(function(trait) { | |
domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; }); | |
}); | |
xAxis.tickSize(size * n); | |
yAxis.tickSize(-size * n); | |
var brush = d3.svg.brush() | |
.x(x) | |
.y(y) | |
.on("brushstart", brushstart) | |
.on("brush", brushmove) | |
.on("brushend", brushend); | |
var svg = d3.select("body").append("svg") | |
.attr("width", size * n + padding) | |
.attr("height", size * n + padding) | |
.append("g") | |
.attr("transform", "translate(" + padding + "," + padding / 2 + ")"); | |
svg.selectAll(".x.axis") | |
.data(traits) | |
.enter().append("g") | |
.attr("class", "x axis") | |
.attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; }) | |
.each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); }); | |
svg.selectAll(".y.axis") | |
.data(traits) | |
.enter().append("g") | |
.attr("class", "y axis") | |
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) | |
.each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); }); | |
var cell = svg.selectAll(".cell") | |
.data(cross(traits, traits)) | |
.enter().append("g") | |
.attr("class", "cell") | |
.attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) | |
.each(plot); | |
// Titles for the diagonal. | |
cell.filter(function(d) { return d.i === d.j; }).append("text") | |
.attr("x", padding) | |
.attr("y", padding) | |
.attr("dy", ".71em") | |
.text(function(d) { return d.x; }); | |
cell.call(brush); | |
function plot(p) { | |
var cell = d3.select(this); | |
x.domain(domainByTrait[p.x]); | |
y.domain(domainByTrait[p.y]); | |
cell.append("rect") | |
.attr("class", "frame") | |
.attr("x", padding / 2) | |
.attr("y", padding / 2) | |
.attr("width", size - padding) | |
.attr("height", size - padding); | |
cell.selectAll("circle") | |
.data(data) | |
.enter().append("circle") | |
.attr("cx", function(d) { return x(d[p.x]); }) | |
.attr("cy", function(d) { return y(d[p.y]); }) | |
.attr("r", 4) | |
.style("fill", function(d) { return color(d.Groupings); }); | |
} | |
var brushCell; | |
// Clear the previously-active brush, if any. | |
function brushstart(p) { | |
if (brushCell !== this) { | |
d3.select(brushCell).call(brush.clear()); | |
x.domain(domainByTrait[p.x]); | |
y.domain(domainByTrait[p.y]); | |
brushCell = this; | |
} | |
} | |
// Highlight the selected circles. | |
function brushmove(p) { | |
var e = brush.extent(); | |
svg.selectAll("circle").classed("hidden", function(d) { | |
return e[0][0] > d[p.x] || d[p.x] > e[1][0] | |
|| e[0][1] > d[p.y] || d[p.y] > e[1][1]; | |
}); | |
} | |
// If the brush is empty, select all circles. | |
function brushend() { | |
if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false); | |
} | |
d3.select(self.frameElement).style("height", size * n + padding + 20 + "px"); | |
}); | |
function cross(a, b) { | |
var c = [], n = a.length, m = b.length, i, j; | |
for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); | |
return c; | |
} | |
</script> |
PassingAttempts | PassingTD | RushingAttempts | RushingTD | Groupings | |
---|---|---|---|---|---|
372 | 38 | 117 | 14 | Big Five | |
386 | 32 | 53 | 0 | Group of Five | |
330 | 23 | 67 | 3 | Group of Five | |
355 | 26 | 73 | 6 | Big Five | |
349 | 20 | 139 | 8 | Big Five | |
323 | 22 | 45 | 2 | Big Five | |
314 | 34 | 171 | 11 | Big Five | |
381 | 22 | 147 | 8 | Group of Five | |
377 | 26 | 77 | 5 | Big Five | |
414 | 37 | 84 | 6 | Group of Five | |
358 | 22 | 107 | 5 | Big Five | |
344 | 24 | 195 | 13 | Big Five | |
307 | 20 | 43 | 3 | Big Five | |
345 | 25 | 24 | 1 | Big Five | |
510 | 44 | 37 | 2 | Group of Five | |
413 | 36 | 52 | 2 | Big Five | |
271 | 18 | 146 | 11 | Big Five | |
422 | 24 | 50 | 3 | Big Five | |
185 | 16 | 47 | 0 | Big Five | |
364 | 30 | 57 | 1 | Group of Five | |
321 | 23 | 52 | 0 | Big Five | |
368 | 21 | 148 | 8 | Big Five | |
307 | 21 | 108 | 1 | Group of Five | |
416 | 29 | 113 | 8 | Independent | |
295 | 17 | 78 | 4 | Group of Five | |
273 | 13 | 91 | 4 | Group of Five | |
462 | 30 | 141 | 8 | Big Five | |
252 | 15 | 102 | 3 | Big Five | |
417 | 24 | 60 | 3 | Big Five | |
337 | 20 | 38 | 0 | Group of Five | |
294 | 19 | 133 | 5 | Big Five | |
279 | 14 | 66 | 5 | Big Five | |
551 | 28 | 87 | 6 | Group of Five | |
509 | 35 | 55 | 0 | Big Five | |
419 | 18 | 42 | 1 | Big Five | |
339 | 20 | 103 | 3 | Group of Five | |
333 | 17 | 84 | 5 | Big Five | |
269 | 19 | 47 | 3 | Group of Five | |
186 | 12 | 26 | 0 | Big Five | |
436 | 23 | 41 | 0 | Group of Five | |
429 | 23 | 73 | 2 | Group of Five | |
344 | 29 | 34 | 2 | Group of Five | |
263 | 20 | 40 | 4 | Big Five | |
243 | 13 | 36 | 1 | Big Five | |
244 | 20 | 86 | 3 | Big Five | |
455 | 30 | 80 | 2 | Group of Five | |
420 | 29 | 50 | 2 | Group of Five | |
300 | 22 | 71 | 4 | Independent | |
221 | 12 | 22 | 0 | Big Five | |
206 | 10 | 117 | 10 | Big Five | |
526 | 32 | 29 | 0 | Big Five | |
367 | 18 | 100 | 10 | Group of Five | |
358 | 12 | 78 | 0 | Group of Five | |
345 | 24 | 17 | 1 | Big Five | |
277 | 12 | 60 | 1 | Big Five | |
233 | 14 | 16 | 0 | Big Five | |
391 | 20 | 178 | 12 | Big Five | |
291 | 16 | 109 | 4 | Big Five | |
236 | 9 | 104 | 6 | Group of Five | |
458 | 23 | 157 | 6 | Group of Five | |
401 | 15 | 147 | 5 | Group of Five | |
401 | 19 | 194 | 11 | Group of Five | |
321 | 16 | 124 | 6 | Group of Five | |
280 | 9 | 24 | 0 | Group of Five | |
211 | 11 | 170 | 10 | Big Five | |
376 | 22 | 167 | 6 | Group of Five | |
337 | 16 | 65 | 3 | Big Five | |
491 | 27 | 114 | 1 | Big Five | |
453 | 15 | 48 | 1 | Big Five | |
330 | 11 | 57 | 3 | Group of Five | |
315 | 17 | 120 | 7 | Group of Five | |
299 | 17 | 145 | 8 | Group of Five | |
287 | 17 | 103 | 2 | Big Five | |
244 | 9 | 67 | 4 | Big Five | |
184 | 9 | 133 | 4 | Group of Five | |
393 | 14 | 145 | 6 | Big Five | |
213 | 10 | 100 | 0 | Big Five | |
365 | 12 | 49 | 0 | Group of Five | |
344 | 22 | 110 | 3 | Big Five | |
270 | 11 | 100 | 5 | Group of Five | |
242 | 8 | 29 | 0 | Group of Five | |
225 | 11 | 76 | 2 | Group of Five | |
462 | 23 | 77 | 3 | Group of Five | |
316 | 18 | 36 | 2 | Big Five | |
281 | 10 | 98 | 4 | Big Five | |
378 | 11 | 82 | 1 | Group of Five | |
359 | 13 | 103 | 3 | Big Five | |
311 | 12 | 133 | 3 | Group of Five | |
262 | 12 | 83 | 4 | Group of Five | |
395 | 23 | 97 | 1 | Big Five | |
197 | 10 | 31 | 0 | Group of Five | |
498 | 28 | 70 | 0 | Big Five | |
327 | 13 | 148 | 7 | Big Five | |
202 | 6 | 42 | 2 | Group of Five | |
501 | 14 | 110 | 3 | Group of Five | |
444 | 13 | 57 | 2 | Group of Five | |
435 | 19 | 69 | 2 | Group of Five | |
412 | 22 | 101 | 3 | Group of Five | |
376 | 18 | 164 | 13 | Group of Five | |
261 | 10 | 35 | 2 | Big Five | |
252 | 12 | 45 | 3 | Big Five | |
417 | 17 | 75 | 2 | Big Five | |
209 | 9 | 27 | 2 | Group of Five | |
414 | 13 | 109 | 1 | Group of Five | |
401 | 14 | 59 | 2 | Group of Five | |
379 | 13 | 106 | 3 | Group of Five | |
274 | 14 | 97 | 4 | Group of Five | |
270 | 14 | 85 | 3 | Group of Five | |
202 | 3 | 65 | 3 | Group of Five | |
434 | 8 | 85 | 0 | Big Five | |
452 | 18 | 125 | 3 | Big Five | |
422 | 17 | 88 | 5 | Big Five | |
266 | 6 | 61 | 0 | Big Five | |
336 | 12 | 35 | 0 | Group of Five | |
391 | 7 | 68 | 5 | Big Five | |
382 | 9 | 46 | 1 | Group of Five | |
353 | 11 | 104 | 0 | Big Five | |
195 | 9 | 66 | 4 | Big Five | |
174 | 6 | 32 | 1 | Group of Five | |
272 | 10 | 61 | 5 | Big Five | |
181 | 2 | 40 | 0 | Group of Five |