Built with blockbuilder.org
Last active
November 25, 2015 19:15
-
-
Save yassineAlouini/46f5fec6b5b3e1b28da8 to your computer and use it in GitHub Desktop.
gaussian-histogram
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> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.bar rect { | |
fill: #fe3838; | |
shape-rendering: crispEdges; | |
} | |
.bar text { | |
fill: #FFF; | |
} | |
.axis path, .axis line, .axis .tick{ | |
fill: none; | |
stroke: #47f6E96; | |
shape-rendering: crispEdges; | |
} | |
.line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
// This is inspired from this block: http://bl.ocks.org/mbostock/3048450 | |
// Generate a standard Gaussian distribution. | |
var myColorPalette = d3.range(samples).map(x => 'red'); | |
var samples = 100000; | |
var mu = 2, sigma= 1; | |
var GaussianGenerator = d3.random.normal(mu, sigma) | |
var GaussianCurve = d3.svg.line() | |
.x(function(d) { | |
return x(d.x); | |
}) | |
.y(function(d) { | |
return y(d.y); | |
}); | |
var values = d3.range(samples).map(GaussianGenerator); | |
// A formatter for counts. | |
var formatCount = d3.format(",.0f"); | |
// The layout dimensions | |
var margin = {top: 20, right: 10, bottom: 30, left: 30}, | |
width = 900 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
// The x scale generator (domain is [-6*sigma, 6*sigma]) | |
var x = d3.scale.linear() | |
.domain([-6*sigma, 6*sigma]) | |
.range([0, width]); | |
// Generate a histogram using nbins uniformly-spaced bins. | |
var nbins = 100 | |
var data = d3.layout.histogram().bins(x.ticks(nbins))(values); | |
var y = d3.scale.linear() | |
.domain([0, d3.max(data, function(d) { return d.y; })]) | |
.range([height, 0]); | |
// Create the x axis and orient it to the bottom | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
// Create the svg container and place it inside the DOM | |
var svg = d3.select("body") | |
.attr("bgcolor", "#19436E") | |
.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 +")"); | |
var translate = (function(){ | |
return function(d) { return "translate(" + x(d.x)+ "," + y(d.y) + ")";}})(); | |
var bar = svg.selectAll(".bar") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "bar") | |
.attr("transform", translate); | |
// Add the histogram rectangles | |
bar.append("rect") | |
.attr("x", 1) | |
.attr("width", 10) | |
.attr("height", function(d){return height - y(d.y)}) | |
.style("fill", function(d){return "#196496"}); | |
// Add the Gaussian curve (doesn't yet work) | |
/** | |
svg.append("path") | |
.attr("class", "line") | |
.attr("d", GaussianCurve); | |
*/ | |
// Add the xaxis | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment