nba2.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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 uses noniles per dimension. */
  27. var fill = pv.dict(cols, function(f) pv.Scale.quantile()
  28. .quantiles(9)
  29. .domain(nba.map(function(d) d[f]))
  30. .range("#dee", "steelblue"));
  31. /* The cell dimensions. */
  32. var w = 24, h = 13;
  33. var vis = new pv.Panel()
  34. .width(cols.length * w)
  35. .height(nba.length * h)
  36. .top(30.5)
  37. .left(100.5)
  38. .right(.5)
  39. .bottom(.5);
  40. vis.add(pv.Panel)
  41. .data(cols)
  42. .left(function() this.index * w)
  43. .width(w)
  44. .add(pv.Panel)
  45. .data(nba)
  46. .top(function() this.index * h)
  47. .height(h)
  48. .strokeStyle("white")
  49. .lineWidth(1)
  50. .fillStyle(function(d, f) fill[f](d[f]))
  51. .title(function(d, f) d.Name + "'s " + f + ": " + d[f]);
  52. vis.add(pv.Label)
  53. .data(cols)
  54. .left(function() this.index * w + w / 2)
  55. .textAngle(-Math.PI / 2)
  56. .textBaseline("middle");
  57. vis.add(pv.Label)
  58. .data(nba)
  59. .top(function() this.index * h + h / 2)
  60. .textAlign("right")
  61. .textBaseline("middle")
  62. .text(function(d) d.Name);
  63. vis.render();
  64. </script>
  65. <div style="text-align:right;">
  66. Source: <a href="http://flowingdata.com/2010/01/21/how-to-make-a-heatmap-a-quick-and-easy-solution/">FlowingData</a><br>
  67. Implementation: <a href="http://protovis.org">Protovis</a>
  68. </div>
  69. </body>
  70. </html>