This block is an interactive visualization of the probability density function of a normal distribution. By adjusting the slider bars you can see how the mean and standard deviation parameters effect the distribution shape.
-
-
Save johnpoole/b98aba9730570420ac25c089d1d78174 to your computer and use it in GitHub Desktop.
Normal Distribution Probability Density Block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 600 | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Probability Density: Normal Distribution</title> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/jstat/latest/jstat.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/rangeslider.js/2.3.0/rangeslider.min.js"></script> | |
<link rel="stylesheet" type="text/css" href="main.css"> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/rangeslider.js/2.3.0/rangeslider.css"> | |
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> | |
</head> | |
<body> | |
<div id=meanDiv> | |
<p id=meanValDisplay></p> | |
<input id="meanSlider" class="paramSlider" type="range" min="-3" max="3" step="0.1" value="0" data-orientation="vertical" > | |
</div> | |
<div id=sdDiv> | |
<p id=sdValDisplay></p> | |
<input id="sdSlider" class="paramSlider" type="range" min="1" max="3" step="0.1" value="1" data-orientation="vertical" > | |
</div> | |
<p></p> | |
<script> | |
var numDataPoints = 1000; | |
var interval = 0.05 | |
var upper_bound = 10.0; | |
var lower_bound = -10.0; | |
var mean = 0; | |
var std = 1; | |
var margin = {top: 20, right: 10, bottom: 20, left: 40}; | |
var width = 960 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
//create data points | |
var sdLabel = "Standard Deviation: " + std; | |
var meanLabel = "Mean: " + mean; | |
document.getElementById("meanValDisplay").innerHTML = meanLabel; | |
document.getElementById("sdValDisplay").innerHTML = sdLabel; | |
var dataset = create_data(interval, upper_bound, lower_bound, mean, std); | |
////// Define Scales ///////////////// | |
var xScale = d3.scaleLinear() | |
.domain([d3.min(dataset, function(d) { | |
return d.x; | |
}), d3.max(dataset, function(d) { | |
return d.x; | |
})]) | |
.range([0,width]); | |
var yScale = d3.scaleLinear() | |
.domain([ | |
d3.min(dataset, function(d) { | |
return (d.y); | |
}), | |
d3.max(dataset, function(d) { | |
return d.y; | |
}) | |
]) | |
.range([height,0]); | |
/////// Define Axis ////////////////////////////// | |
var xAxis = d3.axisBottom() | |
.scale(xScale); | |
var yAxis = d3.axisLeft() | |
.scale(yScale) | |
.ticks(8); | |
// create svg | |
// var svg = d3.select("body") | |
// .append("svg") | |
// .attr("width", w) | |
// .attr("height", h); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
// append data points | |
svg.append("g") | |
.attr("id", "circles") | |
// .attr("clip-path", "url(#chart-area)") | |
.selectAll("circle") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr("class", "dot") | |
.attr("cx", function(d) { | |
return xScale(d.x); | |
}) | |
.attr("cy", function(d) { | |
return yScale(d.y); | |
}) | |
.attr("r", 3.0); | |
// append Axes /////////////////////////// | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("x", -10) | |
.attr("dy", "0.71em") | |
.attr("fill", "#000") | |
.text("Probability Density");; | |
d3.selectAll(".paramSlider") | |
.on("input", function(){ | |
var mean = d3.select('#meanSlider').property('value'); | |
var std = d3.select('#sdSlider').property('value'); | |
var sdLabel = "Standard Deviation: " + std; | |
var meanLabel = "Mean: " + mean; | |
document.getElementById("meanValDisplay").innerHTML = meanLabel; | |
document.getElementById("sdValDisplay").innerHTML = sdLabel; | |
// create new data | |
// dataset = create_data(numDataPoints); | |
var dataset = create_data(interval, upper_bound, lower_bound, mean, std); | |
var dur = 50; | |
//Update scale domains | |
xScale.domain([d3.min(dataset, function(d) { | |
return d.x; | |
}), | |
d3.max(dataset, function(d) { | |
return d.x; | |
}) | |
]); | |
yScale.domain([ | |
d3.min(dataset, function(d) { | |
return d.y; | |
}), | |
d3.max(dataset, function(d) { | |
return d.y; | |
}) | |
]); | |
// update data points | |
svg.selectAll("circle") | |
.data(dataset) | |
.transition() | |
.duration(dur) | |
.attr("cx", function(d) { | |
return xScale(d.x); | |
}) | |
.attr("cy", function(d) { | |
return yScale(d.y); | |
}); | |
// update axis | |
svg.select(".x.axis") | |
.transition() | |
.duration(dur) | |
.call(xAxis); | |
svg.select(".y.axis") | |
.transition() | |
.duration(dur) | |
.call(yAxis); | |
}); | |
function create_data(interval, upper_bound, lower_bound, mean, std) { | |
var n = Math.ceil((upper_bound - lower_bound) / interval) | |
var data = []; | |
x_position = lower_bound; | |
for (i = 0; i < n; i++) { | |
data.push({ | |
"y": jStat.normal.pdf(x_position, mean, std), | |
"x": x_position | |
}) | |
x_position += interval | |
} | |
return (data); | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
p{ | |
font-family: 'Roboto Slab', serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-size: 10px; | |
font-family: 'Roboto Slab', serif; | |
} | |
.text-label { | |
font-size: 10px; | |
font-family: 'Roboto Slab', serif; | |
/*font-family: sans-serif;*/ | |
} | |
.dot { | |
stroke: #293b47; | |
fill: #7A99AC | |
} | |
#ex1Slider .slider-selection { | |
background: #BABABA; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment