antibiotics.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  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. body {
  9. background: rgb(240, 225, 210);
  10. }
  11. #fig {
  12. height: 800px;
  13. width: 700px;
  14. }
  15. </style>
  16. </head>
  17. <body><div id="center"><div id="fig">
  18. <script type="text/javascript+protovis">
  19. /* Basic dimensions. */
  20. var width = 700,
  21. height = 700,
  22. innerRadius = 90,
  23. outerRadius = 300 - 10;
  24. /* Colors. */
  25. var drugColor = {
  26. Penicillin: "rgb(10, 50, 100)",
  27. Streptomycin: "rgb(200, 70, 50)",
  28. Neomycin: "black"
  29. }, gramColor = {
  30. positive: "rgba(174, 174, 184, .8)",
  31. negative: "rgba(230, 130, 110, .8)"
  32. };
  33. /* Burtin's radius encoding is, as far as I can tell, sqrt(log(mic)). */
  34. var min = Math.sqrt(Math.log(.001 * 1E4)),
  35. max = Math.sqrt(Math.log(1000 * 1E4)),
  36. a = (outerRadius - innerRadius) / (min - max),
  37. b = innerRadius - a * max,
  38. radius = function(mic) a * Math.sqrt(Math.log(mic * 1E4)) + b;
  39. /*
  40. * The pie is split into equal sections for each bacteria, with a blank
  41. * section at the top for the grid labels. Each wedge is further
  42. * subdivided to make room for the three antibiotics, equispaced.
  43. */
  44. var bigAngle = 2.0 * Math.PI / (bacteria.length + 1),
  45. smallAngle = bigAngle / 7;
  46. /* The root panel. */
  47. var vis = new pv.Panel()
  48. .width(width)
  49. .height(height)
  50. .bottom(100);
  51. /* Background wedges to indicate gram staining color. */
  52. var bg = vis.add(pv.Wedge)
  53. .data(bacteria) // assumes Burtin's order
  54. .left(width / 2)
  55. .top(height / 2)
  56. .innerRadius(innerRadius)
  57. .outerRadius(outerRadius)
  58. .angle(bigAngle)
  59. .startAngle(function(d) this.index * bigAngle + bigAngle / 2 - Math.PI / 2)
  60. .fillStyle(function(d) gramColor[d.gram]);
  61. /* Antibiotics. */
  62. bg.add(pv.Wedge)
  63. .angle(smallAngle)
  64. .startAngle(function(d) bg.startAngle() + smallAngle)
  65. .outerRadius(function(d) radius(d.penicillin))
  66. .fillStyle(drugColor.Penicillin)
  67. .add(pv.Wedge)
  68. .startAngle(function(d) this.proto.startAngle() + 2 * smallAngle)
  69. .outerRadius(function(d) radius(d.streptomycin))
  70. .fillStyle(drugColor.Streptomycin)
  71. .add(pv.Wedge)
  72. .outerRadius(function(d) radius(d.neomycin))
  73. .fillStyle(drugColor.Neomycin);
  74. /* Circular grid lines. */
  75. bg.add(pv.Dot)
  76. .data(pv.range(-3, 4))
  77. .fillStyle(null)
  78. .strokeStyle("#eee")
  79. .lineWidth(1)
  80. .size(function(i) Math.pow(radius(Math.pow(10, i)), 2))
  81. .anchor("top").add(pv.Label)
  82. .visible(function(i) i < 3)
  83. .textBaseline("middle")
  84. .text(function(i) Math.pow(10, i).toFixed((i > 0) ? 0 : -i));
  85. /* Radial grid lines. */
  86. bg.add(pv.Wedge)
  87. .data(pv.range(bacteria.length + 1))
  88. .innerRadius(innerRadius - 10)
  89. .outerRadius(outerRadius + 10)
  90. .fillStyle(null)
  91. .strokeStyle("black")
  92. .angle(0);
  93. /* Labels. */
  94. bg.anchor("outer").add(pv.Label)
  95. .textAlign("center")
  96. .text(function(d) d.bacteria);
  97. /* Antibiotic legend. */
  98. vis.add(pv.Bar)
  99. .data(pv.keys(drugColor))
  100. .right(width / 2 + 3)
  101. .top(function() height / 2 - 28 + this.index * 18)
  102. .fillStyle(function(d) drugColor[d])
  103. .width(36)
  104. .height(12)
  105. .anchor("right").add(pv.Label)
  106. .textMargin(6)
  107. .textAlign("left");
  108. /* Gram-stain legend. */
  109. vis.add(pv.Dot)
  110. .data(pv.keys(gramColor))
  111. .left(width / 2 - 20)
  112. .bottom(function() -60 + this.index * 18)
  113. .fillStyle(function(d) gramColor[d])
  114. .strokeStyle(null)
  115. .size(30)
  116. .anchor("right").add(pv.Label)
  117. .textMargin(6)
  118. .textAlign("left")
  119. .text(function(d) "Gram-" + d);
  120. vis.render();
  121. </script>
  122. </center></body>
  123. </html>