Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 22 You must be signed in to star a gist
  • Fork 16 You must be signed in to fork a gist
  • Save rduplain/2414111 to your computer and use it in GitHub Desktop.
Save rduplain/2414111 to your computer and use it in GitHub Desktop.
Responsive d3.js D3 Javascript Histogram Example
<!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>
@afedulov
Copy link

afedulov commented Jul 7, 2013

This example helped me a LOT! Thanks for sharing!

@amytych
Copy link

amytych commented Oct 17, 2013

Same here, thanks for this gist, helped me a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment