horizon.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <html>
  2. <head>
  3. <title>Horizon Explorer</title>
  4. <script type="text/javascript" src="../../protovis-d3.2.js"></script>
  5. <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
  6. <script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
  7. <link type="text/css" href="ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet"/>
  8. <link type="text/css" href="../../tests/style.css" rel="stylesheet"/>
  9. <style type="text/css">
  10. .ui-slider {
  11. font-size: 10px;
  12. width: 300px;
  13. margin-top: 5px;
  14. }
  15. .ui-state-focus {
  16. outline: none;
  17. }
  18. #slider {
  19. width: 300px;
  20. display: inline-block;
  21. margin-left: 10px;
  22. margin-right: 10px;
  23. }
  24. #bands {
  25. display: inline-block;
  26. width: 20px;
  27. text-align: right;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <h3>Horizon Explorer</h3>
  33. <div style="width:600px;">
  34. bands: <span id="slider"></span><span id="bands">1</span>
  35. <span style="float:right;">
  36. mode: <input type="radio" id="mirror" name="mode" value="mirror">
  37. <label for="mirror">mirror</label>
  38. <input type="radio" checked id="offset" name="mode" value="offset">
  39. <label for="offset">offset</label>
  40. </span>
  41. </div><p>
  42. <script type="text/javascript+protovis">
  43. var w = 600,
  44. h = 70,
  45. bands = 1,
  46. mode = "offset",
  47. data = pv.range(101).map(function(d) Math.sin(d / 2) + Math.sin(d / 7)),
  48. x = pv.Scale.linear(data, pv.index).range(0, w).by(pv.index),
  49. y = pv.Scale.linear(data).range(-h, h);
  50. var vis = new pv.Panel()
  51. .width(w)
  52. .height(function() h / bands);
  53. vis.add(pv.Layout.Horizon)
  54. .bands(function() bands)
  55. .mode(function() mode)
  56. .band.add(pv.Area)
  57. .data(data)
  58. .left(x)
  59. .height(y);
  60. vis.render();
  61. $(slider).slider({
  62. min: 1, max: 10, slide: function(e, ui) {
  63. $("#bands").html(bands = ui.value);
  64. vis.render();
  65. }
  66. });
  67. $([mirror, offset]).change(function() {
  68. mode = this.value;
  69. vis.render();
  70. });
  71. </script>
  72. </body>
  73. </html>