hotel.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <html>
  2. <head>
  3. <title>Hotel Stays</title>
  4. <link type="text/css" rel="stylesheet" href="../ex.css"/>
  5. <script type="text/javascript" src="../../protovis-r3.2.js"></script>
  6. <script type="text/javascript" src="hotel.js"></script>
  7. <style type="text/css">
  8. #fig {
  9. width: 520px;
  10. height: 520px;
  11. }
  12. </style>
  13. </head>
  14. <body><div id="center"><div id="fig">
  15. <script type="text/javascript+protovis">
  16. /* Scales and size parameters. */
  17. var w = 270,
  18. h = 480,
  19. x = pv.Scale.ordinal(pv.range(24)).splitBanded(0, w),
  20. y = pv.Scale.ordinal(order).splitBanded(0, h, 4 / 5);
  21. /* Compute the mean per metric. */
  22. var type = pv.nest(hotel).key(function(d) d.type),
  23. mean = type.rollup(function(values) pv.mean(values, function(d) d.count));
  24. /* The root panel. */
  25. var vis = new pv.Panel()
  26. .width(w)
  27. .height(h)
  28. .top(40)
  29. .right(200);
  30. /* A panel per type... */
  31. var panel = vis.add(pv.Panel)
  32. .data(type.entries())
  33. .top(y.by(pv.index))
  34. .height(y.range().band);
  35. /* ... with a label ... */
  36. panel.anchor("right").add(pv.Label)
  37. .font("13px Georgia")
  38. .textAlign("left")
  39. .textMargin(8)
  40. .text(function(x, d) d.key);
  41. /* ... and bar chart. */
  42. panel.add(pv.Bar)
  43. .def("y", function(d) pv.Scale.linear()
  44. .domain(0, pv.max(d.values, function(d) d.count))
  45. .range(0, this.parent.height()))
  46. .data(function(d) pv.repeat(d.values))
  47. .left(x.by(pv.index))
  48. .bottom(0)
  49. .width(x.range().band)
  50. .height(function(d) this.y()(d.count))
  51. .antialias(false)
  52. .fillStyle(function(d) (d.count > mean[d.type]) ? "#000" : null)
  53. .strokeStyle("#000")
  54. .lineWidth(1);
  55. /* Month labels. */
  56. vis.add(pv.Label)
  57. .data(pv.repeat("JFMAMJJASOND".split("")))
  58. .top(function() (this.index % 6) > 2 ? 0 : -2)
  59. .left(function() x(this.index) + x.range().band / 2)
  60. .textAlign("center")
  61. .font("bold 15px Arial");
  62. vis.render();
  63. </script>
  64. </div></div></body>
  65. </html>