block by timelyportfolio 5086216

5086216

Full Screen

index.html

<!DOCTYPE html>
<script src="//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>