Created
January 24, 2016 08:47
-
-
Save jltran/bcd2a30fd9c08f8b9f87 to your computer and use it in GitHub Desktop.
Histogram Overlayed with CDF
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| font: 10px sans-serif; | |
| } | |
| .bar rect { | |
| fill: steelblue; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: purple; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| //Set dimensions | |
| var m = {top: 50, right: 50, bottom: 50, left: 50} | |
| , h = 500 - m.top - m.bottom | |
| , w = 960 - m.left - m.right | |
| , numBins = 50 | |
| , n = 10000; | |
| //Generate random numbers | |
| var norm = d3.range(n).map(d3.random.normal(0, 1)); | |
| var x = d3.scale.linear().domain([-3, 3]).range([0, w]); | |
| var data = d3.layout.histogram().bins(x.ticks(numBins))(norm); | |
| //Calculative cdf | |
| var last = 0; | |
| for(var i=0; i < data.length; i++){ | |
| data[i]['cum'] = last + data[i].y; | |
| last = data[i]['cum']; | |
| data[i]['cum'] = data[i]['cum']/n; | |
| } | |
| //Axes and scales | |
| var yhist = d3.scale.linear() | |
| .domain([0, d3.max(data, function(d) { return d.y; })]) | |
| .range([h, 0]); | |
| var ycum = d3.scale.linear().domain([0, 1]).range([h, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient('bottom'); | |
| var yAxis = d3.svg.axis() | |
| .scale(yhist) | |
| .orient('left'); | |
| var yAxis2 = d3.svg.axis() | |
| .scale(ycum) | |
| .orient('right'); | |
| //Draw svg | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", w + m.left + m.right) | |
| .attr("height", h + m.top + m.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + m.left + "," + m.top + ")"); | |
| //Draw histogram | |
| var bar = svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "bar") | |
| .attr("transform", function(d) { return "translate(" + x(d.x) + "," + yhist(d.y) + ")"; }); | |
| bar.append("rect") | |
| .attr("x", 1) | |
| .attr("width", w/numBins/1.3) | |
| .attr("height", function(d) { return h - yhist(d.y); }); | |
| //Draw CDF line | |
| var guide = d3.svg.line() | |
| .x(function(d){ return x(d.x) }) | |
| .y(function(d){ return ycum(d.cum) }) | |
| .interpolate('basis'); | |
| var line = svg.append('path') | |
| .datum(data) | |
| .attr('d', guide) | |
| .attr('class', 'line'); | |
| //Draw axes | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + h + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Count (Histogram)"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + [w, 0] + ")") | |
| .call(yAxis2) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 4) | |
| .attr("dy", "-.71em") | |
| .style("text-anchor", "end") | |
| .text("CDF"); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment