Skip to content

Instantly share code, notes, and snippets.

@avimoondra

avimoondra/index.html

Last active August 29, 2015 14:09
Download ZIP
Simple Random Sample
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment