-
-
Save rduplain/2414111 to your computer and use it in GitHub Desktop.
Responsive d3.js D3 Javascript Histogram Example
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> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| rect { | |
| fill: steelblue; | |
| stroke: white; | |
| } | |
| line { | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <div class='histogram' style="width:50%" > | |
| </div> | |
| </body> | |
| <script> | |
| // Generate an Irwin-Hall distribution. | |
| function gen_ih_dist(trails, variables) | |
| { | |
| data = []; | |
| for (var i = 0; i < trails; i++) { | |
| for (var s = 0, j = 0; j < variables; j++) { | |
| s += Math.random(); | |
| } | |
| data.push(s); | |
| } | |
| return data; | |
| } | |
| var div_name = "div.histogram"; | |
| pos_data = gen_ih_dist(1000, 10); | |
| neg_data = gen_ih_dist(1000, 10); | |
| draw_histogram(div_name, pos_data, neg_data); | |
| //The drawing of the histogram has been broken out from the data retrial | |
| // or computation. (In this case the 'Irwin-Hall distribution' computation above) | |
| function draw_histogram(reference, pos_data, neg_data){ | |
| $(reference).empty() | |
| //The drawing code needs to reference a responsive elements dimneions | |
| var width = $(reference).width(); | |
| // var width = $(reference).empty().width(); we can chain for effeicanecy as jquery returns jquery. | |
| var height = 250; // We don't want the height to be responsive. | |
| var histogram = d3.layout.histogram() (pos_data); | |
| var neg_histogram = d3.layout.histogram()(neg_data); | |
| var x = d3.scale.ordinal() | |
| .domain(histogram.map(function(d) { return d.x; })) | |
| .rangeRoundBands([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(histogram.map(function(d) { return d.y; }))]) | |
| .range([0, height]); | |
| var ny = d3.scale.linear() | |
| .domain([0, d3.max(neg_histogram.map(function(d) { return d.y; }))]) | |
| .range([0, height]); | |
| var svg = d3.select(reference).append("svg") | |
| .attr("width", width) | |
| .attr("height", 2 * height); | |
| svg.selectAll("rect") | |
| .data(histogram) | |
| .enter().append("rect") | |
| .attr("width", x.rangeBand()) | |
| .attr("x", function(d) { return x(d.x); }) | |
| .attr("y", function(d) { return height - y(d.y); }) | |
| .attr("height", function(d) { return y(d.y); }); | |
| svg.selectAll("rect-neg") | |
| .data(neg_histogram) | |
| .enter().append("rect") | |
| .style("fill", "red") | |
| .attr("width", x.rangeBand()) | |
| .attr("x", function(d) { return x(d.x); }) | |
| .attr("y", function(d) { return height}) | |
| .attr("height", function(d) { return ny(d.y); }); | |
| svg.append("line") | |
| .attr("x1", 0) | |
| .attr("x2", width) | |
| .attr("y1", height) | |
| .attr("y2", height); | |
| }; | |
| //Bind the window resize to the draw method. | |
| //A simple bind example is | |
| //$(window).resize(function() { | |
| // draw_histogram(div_name, pos_data, neg_data); | |
| //}); | |
| //A better idom for binding with resize is to debounce | |
| var debounce = function(fn, timeout) | |
| { | |
| var timeoutID = -1; | |
| return function() { | |
| if (timeoutID > -1) { | |
| window.clearTimeout(timeoutID); | |
| } | |
| timeoutID = window.setTimeout(fn, timeout); | |
| } | |
| }; | |
| var debounced_draw = debounce(function() { | |
| draw_histogram(div_name, pos_data, neg_data); | |
| }, 125); | |
| $(window).resize(debounced_draw); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Same here, thanks for this gist, helped me a lot!