Skip to content

Instantly share code, notes, and snippets.

@ndarville
Last active October 29, 2015 10:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ndarville/4b90c5f73f1ccc29b730 to your computer and use it in GitHub Desktop.
Save ndarville/4b90c5f73f1ccc29b730 to your computer and use it in GitHub Desktop.
Sample Sizes
<script
type="text/javascript"
charset="utf-8"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"
integrity="sha384-gOxMGMgqQH8iYyQE8rmgpaokSRE608gSIXXdC2a/yT+OywUqbNmTCQa3qNO4wvyc" crossorigin="anonymous">
</script>
<style>
svg {
display: block;
margin: 0 auto;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke-width: 1.5px;
}
</style>
<script>
// Define functions
// ================
// Standard error functions
function se68(p, n) {
p = parseFloat(p);
return Math.sqrt(p * (1-p) / n);
}
function se95(p, n) { return se68(p, n) * 1.96; }
function se98(p, n) { return se68(p, n) * 2.33; }
function se99(p, n) { return se68(p, n) * 2.575; }
// Generate data
// =============
// Create list of sample sizes 1..100
var sampleSizes = d3.range(1,101).map(function(d) { return d * 50; });
/**
// Create dictionary of sample-error margins
var sampleErrors = sampleSizes.map(function(d) {
return {
"sampleSize" : d,
"95" : se95(.5, d),
"98" : se98(.5, d),
"99" : se99(.5, d)
};
});
*/
var sampleErrors95 = sampleSizes.map(function(d) {
return {
"sampleSize" : d,
"confidence" : "95",
"standardError" : se95(.5, d)
};
});
var sampleErrors98 = sampleSizes.map(function(d) {
return {
"sampleSize" : d,
"confidence" : "98",
"standardError" : se98(.5, d)
};
});
var sampleErrors99 = sampleSizes.map(function(d) {
return {
"sampleSize" : d,
"confidence" : "99",
"standardError" : se99(.5, d)
};
});
var sampleErrors = sampleErrors95.concat(sampleErrors98, sampleErrors99);
// Config
// ======
var width = 440,
height = 400,
padding = 30;
var margin = {
"top" : padding,
"right" : 125,
"bottom" : padding,
"left" : padding
};
margin.hor = margin.left + margin.right;
margin.ver = margin.top + margin.bottom;
// Settings
// ========
var dataset = sampleErrors,
yAxisTitle = "Margin of standard error",
format = d3.format("%");
//>
var x = d3.scale.linear()
.domain([
sampleSizes[0],
sampleSizes[sampleSizes.length-1]
])
.range([0, width]);
var y = d3.scale.linear()
.domain([
0,
// Confidence of 95% has highest swings
d3.max(sampleErrors95, function(d) {
return d.standardError;
})
])
.range([height, 0]);
var color = d3.scale.category10()
.domain(["95", "98", "99"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("right") //! Change to "left"
.tickFormat(function(d) { return format(d); });
var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { return x(d.sampleSize); })
.y(function(d) { return y(d.standardError); });
// Create SVG container
var svg = d3.select("body").append("svg")
.attr({
"width" : width + margin.left + margin.right,
"height" : height + margin.top + margin.bottom
});
// Append x axis
svg.append("g")
.attr({
"class" : "x axis",
"transform" : "translate(0," + height + ")"
})
.call(xAxis);
// Append y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr({
"transform" : "rotate(-90)",
"y" : 6,
"dy" : ".71em"
})
.style("text-anchor", "end")
.text(yAxisTitle);
// Create graph container
var graph = svg.selectAll(".graph")
.data(dataset)
.enter()
.append("g")
.attr("class", "graph");
// Create graph
graph.append("path")
.attr({
"class" : "line",
"d" : line
})
.style("stroke", function(d) {
return color(d.confidence);
});
// Add labels
//###########
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment