nba.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <html>
  2. <head>
  3. <title>NBA per game performance of top 50 scorers</title>
  4. <script type="text/javascript" src="../../protovis-r3.2.js"></script>
  5. <script type="text/javascript" src="nba.js"></script>
  6. <style type="text/css">
  7. body {
  8. font: 12px/134% Helvetica Neue, sans-serif;
  9. width: 580px;
  10. }
  11. h1 {
  12. font-size: medium;
  13. padding-bottom: 10px;
  14. border-bottom: solid 1px #bbb;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>NBA per game performance of top 50 scorers</h1>
  20. 2008-2009 season<p>
  21. <script type="text/javascript+protovis">
  22. /* Convert from tabular format to array of objects. */
  23. var cols = nba.shift();
  24. nba = nba.map(function(d) pv.dict(cols, function() d[this.index]));
  25. cols.shift();
  26. /* The color scale ranges 3 standard deviations in each direction. */
  27. var x = pv.dict(cols, function(f) pv.mean(nba, function(d) d[f])),
  28. s = pv.dict(cols, function(f) pv.deviation(nba, function(d) d[f])),
  29. fill = pv.dict(cols, function(f) pv.Scale.linear()
  30. .domain(-3 * s[f] + x[f], 3 * s[f] + x[f])
  31. .range("white", "steelblue"));
  32. /* The cell dimensions. */
  33. var w = 24, h = 13;
  34. var vis = new pv.Panel()
  35. .width(cols.length * w)
  36. .height(nba.length * h)
  37. .top(30.5)
  38. .left(100.5)
  39. .right(.5)
  40. .bottom(.5);
  41. vis.add(pv.Panel)
  42. .data(cols)
  43. .left(function() this.index * w)
  44. .width(w)
  45. .add(pv.Panel)
  46. .data(nba)
  47. .top(function() this.index * h)
  48. .height(h)
  49. .strokeStyle("white")
  50. .lineWidth(1)
  51. .fillStyle(function(d, f) fill[f](d[f]))
  52. .title(function(d, f) d.Name + "'s " + f + ": " + d[f]);
  53. vis.add(pv.Label)
  54. .data(cols)
  55. .left(function() this.index * w + w / 2)
  56. .textAngle(-Math.PI / 2)
  57. .textBaseline("middle");
  58. vis.add(pv.Label)
  59. .data(nba)
  60. .top(function() this.index * h + h / 2)
  61. .textAlign("right")
  62. .textBaseline("middle")
  63. .text(function(d) d.Name);
  64. vis.render();
  65. </script>
  66. <div style="text-align:right;">
  67. Source: <a href="http://flowingdata.com/2010/01/21/how-to-make-a-heatmap-a-quick-and-easy-solution/">FlowingData</a><br>
  68. Implementation: <a href="http://protovis.org">Protovis</a>
  69. </div>
  70. </body>
  71. </html>