kf0jvt · September 14, 2013 04:20
diff --git a/responsive_d3_example.html b/responsive_d3_example.html
 <!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>
	<!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>