tamc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A Cates plot in d3

A Cates plot in d3, styled after that of David Spiegelhalter.
Licence

The MIT License (MIT)
© 2014 Tom Counsell
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>A Cates Plot</title>
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
}

g.face {
  cursor: pointer;
}

circle.face {
  stroke: lightgrey;
}

circle.eye {
  stroke: #000;
  stroke-width: 1px;
  fill: none;
}

path.mouth {
  stroke: #000;
  stroke-width: 1px;
  fill: none;
}

text {
  text-anchor: middle;
}

text.subtitle {
  font-size: smaller;
  fill: lightgrey;
}

div#legend {
  position: absolute;
  left: 480px;
  top: 25px;
  width: 200px;
  height: 400px;
  font-size: smaller;
}

p.reference {
  font-size:smaller;
  width: 450px;
  padding-left: 15px;
}


</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
  <div id='legend'>
    <p id='frequency'></p>
  </div>
<script>

  var width = 500,
      height = 500,
      duration = 3000,
      change_interval = 5000,
      margin = { left: 20, right: 20, top: 40, bottom: 20 },
      total,
      control_data,
      intervention_data
      data;

  var control_frequencies = [
    {
      name: "would have died of a heart attack",
      colour: "white",
      smile: -1,
      count: 20
    },
    {
      name: "would have been healthy",
      colour: "chartreuse",
      smile: 1,
      count: 180
    }
  ];

  var intervention_frequencies = [
    {
      name: "may still die of a heart attack",
      colour: "white",
      smile: -1,
      count: 16
    },
    {
      name: "might have died of a heart attack but didn't",
      colour: "yellow",
      smile: 1,
      count: 4
    },
    {
      name: "would have been healthy, but are now a bit unhappy about taking drugs every day",
      colour: "lightgreen",
      smile: 0,
      count: 174
    },
    {
    name: "would have been healthy, but now have aches and pains ",
          colour: "lightskyblue",
          smile: -0.5,
          count: 5
    },
    {
    name: "would have been healthy, but now have diabetes – maybe earlier than otherwise",
          colour: "royalblue",
          smile: -0.5,
          count: 1
    }
  ];

  var data_from_frequencies = function(frequencies) {
    d = [];
    frequencies.forEach(function(outcome) {
        for(i=0; i < outcome.count; i++) {
        d.push(outcome);
        }
        });
    return d;
  };

  control_data = data_from_frequencies(control_frequencies);
  intervention_data = data_from_frequencies(intervention_frequencies);

  total = control_frequencies.reduce(function(count, outcome) { return count + outcome.count; }, 0);
  var side = Math.ceil(Math.sqrt(total));

  var x = d3.scale.ordinal().domain(d3.range(side)).rangeRoundBands([margin.left, width - margin.right], 0.2);
  var y = d3.scale.ordinal().domain(d3.range(side)).rangeRoundBands([margin.top, height - margin.top], 0.2);

  var size = x.rangeBand()/2;
  var smile_size = d3.scale.linear().domain([-1,1]).range([-size/2,+size/2]);

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

  var title = svg.append("text")
      .attr("class", "title")
      .attr("x", width/2)
      .attr("y", margin.top/3);

  var subtitle = svg.append("text")
      .attr("class", "subtitle")
      .attr("x", width/2)
      .attr("y", (4*(margin.top/5)))
      .text("Move your mouse over each face to find out what happens to it");

  var mouth_path = function(d,i) {
            dx = size/2;
            s = smile_size(d.smile);
            dyt = (size/3)-(s/3);
            dyb = (size/3)+(2*s/3);
            return "M"+(-dx)+","+dyt+" Q0,"+dyb+" "+dx+","+dyt;
            };

  var face_position = function(d,i) { return "translate("+x(i % side)+","+y(Math.floor(i/side))+")"; };

  var group = undefined;
  var selected = undefined;
  var data = undefined;

  var updateLegend = function() {
    if(selected == undefined) {
      d3.select("#frequency").transition().style("opacity", 0);
    } else {
      d = data[selected];
      d3.select("#frequency").text("Out of "+group+", "+d.count+" "+d.name+".").transition().style("opacity", 1);
    }
  }


  var draw = function(new_data) {
    title.text(group);

    data = new_data;

    updateLegend();

    faces = svg.selectAll("g.face")
      .data(data);

    newfaces = faces.enter().append("g")
      .classed("face",true)
      .attr("transform", face_position )
      .on("mouseenter", function(d,i) {
          selected = i;
          updateLegend();
          })
      .on("mouseleave", function(d,i) {
          selected = undefined;
          updateLegend();
          });

    newfaces.append("circle")
      .classed("face", true)
      .attr("r", size)
      .attr("fill", function(d,i) { return d.colour; })
      .attr("cx", 0)
      .attr("cy", 0);

    newfaces.append("circle")
      .classed("eye",true)
      .attr("r", size/8)
      .attr("cx", -size/3)
      .attr("cy", -size/4);

    newfaces.append("circle")
      .classed("eye",true)
      .attr("r", size/8)
      .attr("cx", +size/3)
      .attr("cy", -size/4);

    newfaces.append("path")
      .classed("mouth", true)
      .attr("d", mouth_path);

    faces.transition()
      .duration(duration)
      .attr("transform", face_position);

    faces.select("circle.face")
        .attr("class", function(d,i) { return "face "+d.colour+" "+((selected != undefined && data[selected].colour == d.colour) ? "hover" : ""); })
      .transition()
        .duration(duration)
        .attr("fill", function(d,i) { return d.colour; });


    faces.select("path.mouth").transition()
        .duration(duration)
        .attr("d", mouth_path);
  };

  var control_displayed = true;
        group = ""+total+" people not taking statins";
  draw(control_data);

  setInterval(function() {
      if(control_displayed) {
        control_displayed = false;
        group = ""+total+" people taking statins";
        draw(intervention_data);
      } else {
        control_displayed = true;
        group = ""+total+" people not taking statins";
        draw(control_data);
      }
      }, change_interval);

</script>
<p class='reference'>There are no agreed rates even for accepted side effects of statins. In the diagram for those taking statins the risk of diabetes was estimated from an RCT, Ridker PM, Danielson E, Fonseca FA, Genest J, Gotto AM, Kastelein JJ et al (2008) Rosuvastatin to prevent vascular events in men and women with elevated C-reactive protein. New England Journal of Medicine 359:2195-207. Muscle problems are an accepted risk, occur in less than 1 in 200 people according to trials. However they are linked to drug interactions, which one would expect to be minimal within a trial, and have therefore been estimated here from an observational study, Buettner C, Davis RB, Leveille SG, Mittlean MA, Mukamal KJ. (2008) Prevalence of musculoskeletal pain and statin use. Journal of General Internal Medicine 23:1182-6. </p>
<p class='reference'>Source code for this page available under an open source licence from <a href='https://gist.github.com/tamc/024168df8660eeca26aa'>https://gist.github.com/tamc/024168df8660eeca26aa</a>.</p>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>A Cates Plot</title>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: relative;
	}

	g.face {
	cursor: pointer;
	}

	circle.face {
	stroke: lightgrey;
	}

	circle.eye {
	stroke: #000;
	stroke-width: 1px;
	fill: none;
	}

	path.mouth {
	stroke: #000;
	stroke-width: 1px;
	fill: none;
	}

	text {
	text-anchor: middle;
	}

	text.subtitle {
	font-size: smaller;
	fill: lightgrey;
	}

	div#legend {
	position: absolute;
	left: 480px;
	top: 25px;
	width: 200px;
	height: 400px;
	font-size: smaller;
	}

	p.reference {
	font-size:smaller;
	width: 450px;
	padding-left: 15px;
	}


	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<body>
	<div id='legend'>
	<p id='frequency'></p>
	</div>
	<script>

	var width = 500,
	height = 500,
	duration = 3000,
	change_interval = 5000,
	margin = { left: 20, right: 20, top: 40, bottom: 20 },
	total,
	control_data,
	intervention_data
	data;

	var control_frequencies = [
	{
	name: "would have died of a heart attack",
	colour: "white",
	smile: -1,
	count: 20
	},
	{
	name: "would have been healthy",
	colour: "chartreuse",
	smile: 1,
	count: 180
	}
	];

	var intervention_frequencies = [
	{
	name: "may still die of a heart attack",
	colour: "white",
	smile: -1,
	count: 16
	},
	{
	name: "might have died of a heart attack but didn't",
	colour: "yellow",
	smile: 1,
	count: 4
	},
	{
	name: "would have been healthy, but are now a bit unhappy about taking drugs every day",
	colour: "lightgreen",
	smile: 0,
	count: 174
	},
	{
	name: "would have been healthy, but now have aches and pains ",
	colour: "lightskyblue",
	smile: -0.5,
	count: 5
	},
	{
	name: "would have been healthy, but now have diabetes – maybe earlier than otherwise",
	colour: "royalblue",
	smile: -0.5,
	count: 1
	}
	];

	var data_from_frequencies = function(frequencies) {
	d = [];
	frequencies.forEach(function(outcome) {
	for(i=0; i < outcome.count; i++) {
	d.push(outcome);
	}
	});
	return d;
	};

	control_data = data_from_frequencies(control_frequencies);
	intervention_data = data_from_frequencies(intervention_frequencies);

	total = control_frequencies.reduce(function(count, outcome) { return count + outcome.count; }, 0);
	var side = Math.ceil(Math.sqrt(total));

	var x = d3.scale.ordinal().domain(d3.range(side)).rangeRoundBands([margin.left, width - margin.right], 0.2);
	var y = d3.scale.ordinal().domain(d3.range(side)).rangeRoundBands([margin.top, height - margin.top], 0.2);

	var size = x.rangeBand()/2;
	var smile_size = d3.scale.linear().domain([-1,1]).range([-size/2,+size/2]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	var title = svg.append("text")
	.attr("class", "title")
	.attr("x", width/2)
	.attr("y", margin.top/3);

	var subtitle = svg.append("text")
	.attr("class", "subtitle")
	.attr("x", width/2)
	.attr("y", (4*(margin.top/5)))
	.text("Move your mouse over each face to find out what happens to it");

	var mouth_path = function(d,i) {
	dx = size/2;
	s = smile_size(d.smile);
	dyt = (size/3)-(s/3);
	dyb = (size/3)+(2*s/3);
	return "M"+(-dx)+","+dyt+" Q0,"+dyb+" "+dx+","+dyt;
	};

	var face_position = function(d,i) { return "translate("+x(i % side)+","+y(Math.floor(i/side))+")"; };

	var group = undefined;
	var selected = undefined;
	var data = undefined;

	var updateLegend = function() {
	if(selected == undefined) {
	d3.select("#frequency").transition().style("opacity", 0);
	} else {
	d = data[selected];
	d3.select("#frequency").text("Out of "+group+", "+d.count+" "+d.name+".").transition().style("opacity", 1);
	}
	}


	var draw = function(new_data) {
	title.text(group);

	data = new_data;

	updateLegend();

	faces = svg.selectAll("g.face")
	.data(data);

	newfaces = faces.enter().append("g")
	.classed("face",true)
	.attr("transform", face_position )
	.on("mouseenter", function(d,i) {
	selected = i;
	updateLegend();
	})
	.on("mouseleave", function(d,i) {
	selected = undefined;
	updateLegend();
	});

	newfaces.append("circle")
	.classed("face", true)
	.attr("r", size)
	.attr("fill", function(d,i) { return d.colour; })
	.attr("cx", 0)
	.attr("cy", 0);

	newfaces.append("circle")
	.classed("eye",true)
	.attr("r", size/8)
	.attr("cx", -size/3)
	.attr("cy", -size/4);

	newfaces.append("circle")
	.classed("eye",true)
	.attr("r", size/8)
	.attr("cx", +size/3)
	.attr("cy", -size/4);

	newfaces.append("path")
	.classed("mouth", true)
	.attr("d", mouth_path);

	faces.transition()
	.duration(duration)
	.attr("transform", face_position);

	faces.select("circle.face")
	.attr("class", function(d,i) { return "face "+d.colour+" "+((selected != undefined && data[selected].colour == d.colour) ? "hover" : ""); })
	.transition()
	.duration(duration)
	.attr("fill", function(d,i) { return d.colour; });


	faces.select("path.mouth").transition()
	.duration(duration)
	.attr("d", mouth_path);
	};

	var control_displayed = true;
	group = ""+total+" people not taking statins";
	draw(control_data);

	setInterval(function() {
	if(control_displayed) {
	control_displayed = false;
	group = ""+total+" people taking statins";
	draw(intervention_data);
	} else {
	control_displayed = true;
	group = ""+total+" people not taking statins";
	draw(control_data);
	}
	}, change_interval);

	</script>
	<p class='reference'>There are no agreed rates even for accepted side effects of statins. In the diagram for those taking statins the risk of diabetes was estimated from an RCT, Ridker PM, Danielson E, Fonseca FA, Genest J, Gotto AM, Kastelein JJ et al (2008) Rosuvastatin to prevent vascular events in men and women with elevated C-reactive protein. New England Journal of Medicine 359:2195-207. Muscle problems are an accepted risk, occur in less than 1 in 200 people according to trials. However they are linked to drug interactions, which one would expect to be minimal within a trial, and have therefore been estimated here from an observational study, Buettner C, Davis RB, Leveille SG, Mittlean MA, Mukamal KJ. (2008) Prevalence of musculoskeletal pain and statin use. Journal of General Internal Medicine 23:1182-6. </p>
	<p class='reference'>Source code for this page available under an open source licence from <a href='https://gist.github.com/tamc/024168df8660eeca26aa'>https://gist.github.com/tamc/024168df8660eeca26aa</a>.</p>
	</body>