avimoondra/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
</head>
<body>

<style type="text/css">
    #svgWrapper {
        display: inline-block;
    }
    #panelWrapper {
        width: 200px;
        border: solid #808080 1px;
        padding: 10px;
        display: inline-block;
        position: fixed;
        margin-top: 10px;
    }
    .separator {
        margin-bottom: 10px;
        height: 1px;
        background-color: #808080;
    }
</style>

<div class="asdf">
    <div id="svgWrapper">
        <svg></svg>
    </div>
    <div id="panelWrapper">
        <div>
            <p> Simple Random Sampling </p>
            <div class="separator"></div>
            <p> Randomly select 24 cases out of a population of 100:
                <button id="button_resample" type="button" class="btn btn-primary btn-xs"> Sample </button>
            </p>
        </div>
    </div>
</div>

<script type="text/javascript">

    blue = "#569BBD";
    green = "#4C721D";
    black = "#000000";
    yellow = "#F4DC00";
    colors = [blue, green, black, yellow]
    red = "#F05133";

    populationSize = 100
    sampleSize = 24
    var dataset = [];
    for (var i = 0; i < populationSize; i++) {
        dataset.push(colors[Math.floor(Math.random()*colors.length)]);
    }

    var svgViewBoxWidth = 800; //internal coordinate system for width, height
    var svgViewBoxHeight = 400;
    var svgWidth = (848 - 200); // actual width, height
    var svgHeight = (svgViewBoxHeight / svgViewBoxWidth) * (svgWidth)

    var svg = d3.select("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight)
        .attr("viewBox","0 0 " + svgViewBoxWidth + " " + svgViewBoxHeight);

    pointRadius = 3;

    var xScale = d3.scale.linear()
        .domain([0, svgViewBoxWidth])
        .range([pointRadius, svgViewBoxWidth - pointRadius]);

    var yScale = d3.scale.linear()
        .domain([0, svgViewBoxHeight])
        .range([pointRadius, svgViewBoxHeight - pointRadius]);

    var circles = svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle");

    circles.attr("cx", function(d, i) {
            x_coord = Math.random() * svgViewBoxWidth;
            return xScale(x_coord); })
       .attr("cy", function(d, i) {
            y_coord = Math.random() * svgViewBoxHeight;
            return yScale(y_coord); })
       .attr("r", pointRadius)
       .style("fill", function(d, i){
            return d; });

    var select_samples = function(svg){

        svg.selectAll(".selected_point_fill").remove();
        svg.selectAll(".selected_point_stroke").remove();

        var circles = svg.selectAll("circle");

        for(var i = 0; i < sampleSize; i++){
            index_in_circles = Math.floor(Math.random()*circles[0].length);
            selected_point = d3.select(circles[0][index_in_circles])

            svg.append("circle")
                .attr("class", "selected_point_fill")
                .attr("cx", selected_point.attr("cx"))
                .attr("cy", selected_point.attr("cy"))
                .attr("r", pointRadius)
                .style("fill",red);

            svg.append("circle")
                .attr("class", "selected_point_stroke")
                .attr("cx", selected_point.attr("cx"))
                .attr("cy", selected_point.attr("cy"))
                .attr("r", pointRadius + (2/3)*pointRadius)
                .style("fill-opacity", 0)
                .style("stroke-width",1)
                .style("stroke",red);
        }
    }

    d3.select("#button_resample").on("click", function(){
        var svg = d3.select("svg");
        select_samples(svg);
    });

</script>

</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	</head>
	<body>

	<style type="text/css">
	#svgWrapper {
	display: inline-block;
	}
	#panelWrapper {
	width: 200px;
	border: solid #808080 1px;
	padding: 10px;
	display: inline-block;
	position: fixed;
	margin-top: 10px;
	}
	.separator {
	margin-bottom: 10px;
	height: 1px;
	background-color: #808080;
	}
	</style>

	<div class="asdf">
	<div id="svgWrapper">
	<svg></svg>
	</div>
	<div id="panelWrapper">
	<div>
	<p> Simple Random Sampling </p>
	<div class="separator"></div>
	<p> Randomly select 24 cases out of a population of 100:
	<button id="button_resample" type="button" class="btn btn-primary btn-xs"> Sample </button>
	</p>
	</div>
	</div>
	</div>

	<script type="text/javascript">

	blue = "#569BBD";
	green = "#4C721D";
	black = "#000000";
	yellow = "#F4DC00";
	colors = [blue, green, black, yellow]
	red = "#F05133";

	populationSize = 100
	sampleSize = 24
	var dataset = [];
	for (var i = 0; i < populationSize; i++) {
	dataset.push(colors[Math.floor(Math.random()*colors.length)]);
	}

	var svgViewBoxWidth = 800; //internal coordinate system for width, height
	var svgViewBoxHeight = 400;
	var svgWidth = (848 - 200); // actual width, height
	var svgHeight = (svgViewBoxHeight / svgViewBoxWidth) * (svgWidth)

	var svg = d3.select("svg")
	.attr("width", svgWidth)
	.attr("height", svgHeight)
	.attr("viewBox","0 0 " + svgViewBoxWidth + " " + svgViewBoxHeight);

	pointRadius = 3;

	var xScale = d3.scale.linear()
	.domain([0, svgViewBoxWidth])
	.range([pointRadius, svgViewBoxWidth - pointRadius]);

	var yScale = d3.scale.linear()
	.domain([0, svgViewBoxHeight])
	.range([pointRadius, svgViewBoxHeight - pointRadius]);

	var circles = svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle");

	circles.attr("cx", function(d, i) {
	x_coord = Math.random() * svgViewBoxWidth;
	return xScale(x_coord); })
	.attr("cy", function(d, i) {
	y_coord = Math.random() * svgViewBoxHeight;
	return yScale(y_coord); })
	.attr("r", pointRadius)
	.style("fill", function(d, i){
	return d; });

	var select_samples = function(svg){

	svg.selectAll(".selected_point_fill").remove();
	svg.selectAll(".selected_point_stroke").remove();

	var circles = svg.selectAll("circle");

	for(var i = 0; i < sampleSize; i++){
	index_in_circles = Math.floor(Math.random()*circles[0].length);
	selected_point = d3.select(circles[0][index_in_circles])

	svg.append("circle")
	.attr("class", "selected_point_fill")
	.attr("cx", selected_point.attr("cx"))
	.attr("cy", selected_point.attr("cy"))
	.attr("r", pointRadius)
	.style("fill",red);

	svg.append("circle")
	.attr("class", "selected_point_stroke")
	.attr("cx", selected_point.attr("cx"))
	.attr("cy", selected_point.attr("cy"))
	.attr("r", pointRadius + (2/3)*pointRadius)
	.style("fill-opacity", 0)
	.style("stroke-width",1)
	.style("stroke",red);
	}
	}

	d3.select("#button_resample").on("click", function(){
	var svg = d3.select("svg");
	select_samples(svg);
	});

	</script>

	</body>