Create a gist now

Instantly share code, notes, and snippets.

@tamc /README.md
Last active Aug 29, 2015

What would you like to do?
A Cates plot in d3

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.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment