JSFiddle - React, Tailwind, and code Playground

by SamHasler

HTML

<script src="http://worrydream.com/Tangle/Tangle.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Kite+One&amp;dummy=.css">
<link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css">
<script src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>
<h1>Survival rates</h1>

Source: <a href="http://www.bbc.co.uk/news/magazine-28166019">Do doctors understand test results?</a>
<p>
(click and drag the numbers below)
</p>
<div id="survivalRates">
<ul>
    <li>The probability that a woman has breast cancer is 
        <span class="TKAdjustableNumber" data-var="prevalencePercent"data-min="0" data-max="100">%</span> ("prevalence")</li>
<li>If a woman has breast cancer, the probability that she tests positive is 
    <span class="TKAdjustableNumber" data-var="sensitivityPercent"data-min="0" data-max="100">%</span> ("sensitivity")</li>
<li>If a woman does not have breast cancer, the probability that she nevertheless tests positive is 
    <span class="TKAdjustableNumber" data-var="falseAlarmRatePercent"data-min="0" data-max="100">%</span> ("false alarm rate")</li>
    </ul>
    
<div class='tree'>
    <div><b>1000 Women</b></div>
  <div class='left'>
    <b data-var="haveCancer"> have cancer</b>
      <div class='tree'>
        <div class='left'>
          <b data-var="haveTestPositive"> test positive</b>
        </div><div class='right'>
          <b data-var="haveTestNegative"> test negative</b>
        </div>
      </div>
    </div><div class='right'>
      <b data-var="dontHaveCancer"> don't</b>
      <div class='tree'>
        <div class='left'>
          <b data-var="dontTestPositive"> test positive</b>
        </div><div class='right'>
          <b data-var="dontTestNegative">...

CSS

body { font-family: 'Kite One'} 

.tree {
  text-align: center;  
}
.left, .right {
    display: inline-block;
    width: 49%;
    position:relative;
    padding-top: 1em;
}
.left:before, .right:before {
    content: "";
    display: inline-block;
    position:absolute;
    border-top: 1px solid grey;
    width: 50%;
    top: 0;
}
.left:before{
    left:50%;
}
.right:before{
    left:0;
}

.left:after, .right:after {
    content: "";
    display: inline-block;
    position:absolute;
    border-left: 1px solid grey;
    width: 50%;
    top:0;
    height: 1em;
    left:50%;
}

footer {
    margin-top: 2em;
}

JavaScript

var tangle = new Tangle (document.getElementById("survivalRates"), {
    initialize: function () {
        this.prevalencePercent = 1;
        this.sensitivityPercent = 90;
        this.falseAlarmRatePercent = 9;
    },
    update: function () {
        var total = 1000;
        this.haveCancer = this.prevalencePercent * total / 100;
    this.dontHaveCancer = (100 - this.prevalencePercent) * total / 100;
  this.haveTestPositive = Math.round(this.haveCancer * this.sensitivityPercent /100);
  this.haveTestNegative = Math.round(this.haveCancer * (100 - this.sensitivityPercent) /100);
  this.dontTestPositive = Math.round(this.dontHaveCancer * this.falseAlarmRatePercent /100);
  this.dontTestNegative = Math.round(this.dontHaveCancer * (100 - this.falseAlarmRatePercent) /100);
        this.totalTestPositive = this.haveTestPositive + this.dontTestPositive;
        this.totalTestNegative = this.haveTestNegative + this.dontTestNegative;
    }
});