Created
July 20, 2012 06:31
-
-
Save morenoh149/3149057 to your computer and use it in GitHub Desktop.
normal distribution generator (press F5)
This file contains hidden or 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
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <style type="text/css"> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //based on scott murray's tutorial http://alignedleft.com/tutorials/d3/ | |
| //both axis adjust dynamically to fit the data | |
| //@author Harry Moreno (morenoh149) | |
| var dataset = []; | |
| var normalDist = []; //temporarily holds normally generated numbers | |
| var numbers = {}; //hash object for finding number frequency | |
| var numDataPoints = 1000; | |
| var xRange = Math.random() * 500; | |
| var distGenerator = d3.random.normal(xRange/2, xRange/10); | |
| //generate normal distribution | |
| for (var i = 0; i < numDataPoints; i++){ | |
| var newNumber1 = Math.round(distGenerator()); | |
| normalDist.push(newNumber1); | |
| } | |
| //count number frequencies | |
| for (var i = 0; i < numDataPoints; i++){ | |
| var number = normalDist[i]; | |
| if (typeof(numbers[number]) === "undefined"){ | |
| numbers[number] = 1; | |
| } else { | |
| numbers[number]++; | |
| } | |
| } | |
| //pin frequency to corresponding value | |
| for (var i = 0; i < numDataPoints; i++){ | |
| dataset.push([normalDist[i],numbers[normalDist[i]]]); | |
| } | |
| var h = 500; | |
| var w = 900; | |
| var padding = 30; | |
| var xScale = d3.scale.linear() | |
| .domain([d3.min(dataset, function(d){ | |
| return d[0]; | |
| }), d3.max(dataset, function(d){ | |
| return d[0]; | |
| })]) | |
| .range([padding, w - padding]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d){ | |
| return d[1]; | |
| })]) | |
| .range([h - padding, padding]); | |
| var rScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d){ | |
| return d[1]; | |
| })]) | |
| .range([3, 3]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(5); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(5); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d){ | |
| return xScale(d[0]); | |
| }) | |
| .attr("cy", function(d){ | |
| return yScale(d[1]); | |
| }) | |
| .attr("r", function(d){ | |
| return rScale(d[1]); | |
| }); | |
| svg.append("g") | |
| .attr("class", "axis") //Assign "axis" class | |
| .attr("transform", "translate(0," + (h - padding) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(" + padding + ",0)") | |
| .call(yAxis); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment