antibiotics-scatter.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <html>
  2. <head>
  3. <title>Antibiotic Effectiveness</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="antibiotics.js"></script>
  7. <style type="text/css">
  8. #fig {
  9. height: 638px;
  10. width: 608px;
  11. }
  12. </style>
  13. </head>
  14. <body><div id="center"><div id="fig">
  15. <script type="text/javascript+protovis">
  16. var s = 180,
  17. p = 20,
  18. z = pv.Scale.log(0.001, 1000).range(0, s),
  19. color = pv.colors("darkred", "darkblue").by(function(d) d.gram),
  20. ticks = pv.range(-2, 3).map(function(e) Math.pow(10, e));
  21. /* Root panel. */
  22. var vis = new pv.Panel()
  23. .height(s * antibiotics.length + p * (antibiotics.length - 1))
  24. .width(function() this.height())
  25. .top(14.5)
  26. .left(14.5)
  27. .bottom(44)
  28. .right(14);
  29. /* Cell for each antibiotic pair. */
  30. var cell = vis.add(pv.Panel)
  31. .data(antibiotics)
  32. .width(s)
  33. .left(function() (s + p) * this.index)
  34. .add(pv.Panel)
  35. .data(antibiotics)
  36. .height(s)
  37. .top(function() (s + p) * this.index);
  38. /* Label. */
  39. cell.anchor("center").add(pv.Label)
  40. .visible(function(d, y, x) x == y)
  41. .font("bold 14px sans-serif")
  42. .text(function(d, y, x) x);
  43. /* Dot plot and frame. */
  44. var plot = cell.add(pv.Panel)
  45. .data(function(y, x) [x])
  46. .visible(function(x, y) x != y)
  47. .strokeStyle("#aaa");
  48. /* Ticks. */
  49. var tick = new pv.Rule()
  50. .visible(function(d, x, y) x != y)
  51. .data(ticks)
  52. .strokeStyle("#ddd");
  53. /* X-axis ticks. */
  54. var xtick = plot.add(pv.Rule)
  55. .extend(tick)
  56. .left(z);
  57. /* Bottom and top labels. */
  58. xtick.anchor("bottom").add(pv.Label)
  59. .visible(function() cell.index == antibiotics.length - 1);
  60. xtick.anchor("top").add(pv.Label)
  61. .visible(function() cell.index == 0);
  62. /* Y-axis ticks. */
  63. var ytick = plot.add(pv.Rule)
  64. .extend(tick)
  65. .bottom(z);
  66. /* Bottom and top labels. */
  67. ytick.anchor("right").add(pv.Label)
  68. .visible(function() cell.parent.index == antibiotics.length - 1)
  69. .textAngle(Math.PI / 2)
  70. .textBaseline("bottom")
  71. .textAlign("center");
  72. ytick.anchor("left").add(pv.Label)
  73. .visible(function() cell.parent.index == 0)
  74. .textAngle(-Math.PI / 2)
  75. .textBaseline("bottom")
  76. .textAlign("center");
  77. /* Dot plot. */
  78. var dot = plot.add(pv.Dot)
  79. .data(bacteria)
  80. .strokeStyle(color)
  81. .fillStyle(function() this.strokeStyle().alpha(.2))
  82. .left(function(d, x, y) z(d[x]))
  83. .bottom(function(d, x, y) z(d[y]))
  84. .title(function(d) d.name);
  85. /* Legend. */
  86. vis.add(pv.Dot)
  87. .extend(dot)
  88. .data([{gram:"positive"}, {gram:"negative"}])
  89. .bottom(-30)
  90. .left(function() this.index * 100)
  91. .title(null)
  92. .anchor("right").add(pv.Label)
  93. .text(function(d) "Gram-" + d.gram);
  94. vis.render();
  95. </script>
  96. </div></div></body>
  97. </html>