Sample Sizes

index.html

<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>