| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <html>
- <head>
- <title>Antibiotic Effectiveness</title>
- <link type="text/css" rel="stylesheet" href="../ex.css"/>
- <script type="text/javascript" src="../../protovis-r3.2.js"></script>
- <script type="text/javascript" src="antibiotics.js"></script>
- <style type="text/css">
- body {
- background: rgb(240, 225, 210);
- }
- #fig {
- height: 800px;
- width: 700px;
- }
- </style>
- </head>
- <body><div id="center"><div id="fig">
- <script type="text/javascript+protovis">
- /* Basic dimensions. */
- var width = 700,
- height = 700,
- innerRadius = 90,
- outerRadius = 300 - 10;
- /* Colors. */
- var drugColor = {
- Penicillin: "rgb(10, 50, 100)",
- Streptomycin: "rgb(200, 70, 50)",
- Neomycin: "black"
- }, gramColor = {
- positive: "rgba(174, 174, 184, .8)",
- negative: "rgba(230, 130, 110, .8)"
- };
- /* Burtin's radius encoding is, as far as I can tell, sqrt(log(mic)). */
- var min = Math.sqrt(Math.log(.001 * 1E4)),
- max = Math.sqrt(Math.log(1000 * 1E4)),
- a = (outerRadius - innerRadius) / (min - max),
- b = innerRadius - a * max,
- radius = function(mic) a * Math.sqrt(Math.log(mic * 1E4)) + b;
- /*
- * The pie is split into equal sections for each bacteria, with a blank
- * section at the top for the grid labels. Each wedge is further
- * subdivided to make room for the three antibiotics, equispaced.
- */
- var bigAngle = 2.0 * Math.PI / (bacteria.length + 1),
- smallAngle = bigAngle / 7;
- /* The root panel. */
- var vis = new pv.Panel()
- .width(width)
- .height(height)
- .bottom(100);
- /* Background wedges to indicate gram staining color. */
- var bg = vis.add(pv.Wedge)
- .data(bacteria) // assumes Burtin's order
- .left(width / 2)
- .top(height / 2)
- .innerRadius(innerRadius)
- .outerRadius(outerRadius)
- .angle(bigAngle)
- .startAngle(function(d) this.index * bigAngle + bigAngle / 2 - Math.PI / 2)
- .fillStyle(function(d) gramColor[d.gram]);
- /* Antibiotics. */
- bg.add(pv.Wedge)
- .angle(smallAngle)
- .startAngle(function(d) bg.startAngle() + smallAngle)
- .outerRadius(function(d) radius(d.penicillin))
- .fillStyle(drugColor.Penicillin)
- .add(pv.Wedge)
- .startAngle(function(d) this.proto.startAngle() + 2 * smallAngle)
- .outerRadius(function(d) radius(d.streptomycin))
- .fillStyle(drugColor.Streptomycin)
- .add(pv.Wedge)
- .outerRadius(function(d) radius(d.neomycin))
- .fillStyle(drugColor.Neomycin);
- /* Circular grid lines. */
- bg.add(pv.Dot)
- .data(pv.range(-3, 4))
- .fillStyle(null)
- .strokeStyle("#eee")
- .lineWidth(1)
- .size(function(i) Math.pow(radius(Math.pow(10, i)), 2))
- .anchor("top").add(pv.Label)
- .visible(function(i) i < 3)
- .textBaseline("middle")
- .text(function(i) Math.pow(10, i).toFixed((i > 0) ? 0 : -i));
- /* Radial grid lines. */
- bg.add(pv.Wedge)
- .data(pv.range(bacteria.length + 1))
- .innerRadius(innerRadius - 10)
- .outerRadius(outerRadius + 10)
- .fillStyle(null)
- .strokeStyle("black")
- .angle(0);
- /* Labels. */
- bg.anchor("outer").add(pv.Label)
- .textAlign("center")
- .text(function(d) d.bacteria);
- /* Antibiotic legend. */
- vis.add(pv.Bar)
- .data(pv.keys(drugColor))
- .right(width / 2 + 3)
- .top(function() height / 2 - 28 + this.index * 18)
- .fillStyle(function(d) drugColor[d])
- .width(36)
- .height(12)
- .anchor("right").add(pv.Label)
- .textMargin(6)
- .textAlign("left");
- /* Gram-stain legend. */
- vis.add(pv.Dot)
- .data(pv.keys(gramColor))
- .left(width / 2 - 20)
- .bottom(function() -60 + this.index * 18)
- .fillStyle(function(d) gramColor[d])
- .strokeStyle(null)
- .size(30)
- .anchor("right").add(pv.Label)
- .textMargin(6)
- .textAlign("left")
- .text(function(d) "Gram-" + d);
- vis.render();
- </script>
- </center></body>
- </html>
|