eyes.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <html>
  2. <head>
  3. <title>My God, it's full of eyes!</title>
  4. <link rel="stylesheet" type="text/css" href="../ex.css"/>
  5. <script type="text/javascript" src="../../protovis-r3.2.js"></script>
  6. <style type="text/css">
  7. body {
  8. background: #222;
  9. }
  10. #fig {
  11. width: 200px;
  12. height: 200px;
  13. }
  14. </style>
  15. </head>
  16. <body><div id="center"><div id="fig">
  17. <script type="text/javascript+protovis">
  18. var vis = new pv.Panel()
  19. .width(200)
  20. .height(200)
  21. .fillStyle("#666")
  22. .strokeStyle("#ccc");
  23. vis.add(pv.Panel)
  24. .data([{x:50, y:16, r:40},
  25. {x:64, y:85, r:20},
  26. {x:90, y:200, r:60},
  27. {x:150, y:44, r:20},
  28. {x:175, y:120, r:40}])
  29. .left(function(d) d.x)
  30. .top(function(d) d.y)
  31. .add(pv.Dot)
  32. .fillStyle("#fff")
  33. .strokeStyle(null)
  34. .radius(function(d) d.r)
  35. .add(pv.Dot)
  36. .def("v", function(d) this.mouse().norm().times(d.r / 2))
  37. .fillStyle("#aaa")
  38. .left(function(d) this.v().x)
  39. .top(function(d) this.v().y)
  40. .radius(function(d) d.r / 2);
  41. vis.render();
  42. pv.listen(window, "mousemove", function() vis.render());
  43. </script>
  44. </div></div></body>
  45. </html>