idan · January 3, 2012 21:53 · guiomie · Jan 5, 2012
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Histogram</title>
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.17.0/d3.js"></script> 
    <script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.17.0/d3.layout.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style>
        body {
            width: 500px;
            margin: 100px auto;
        }

        rect {
            fill: #444;
            stroke: #fff;
            shape-rendering: crispEdges;
            -webkit-transition: fill 0.3s;
            -moz-transition: fill 0.3s;
            -o-transition: fill 0.3s;
            -ms-transition: fill 0.3s;
            transition: fill 0.3s;
        }
        rect:hover {
            fill: #777;
        }
        line {
            stroke: #ccc;
            shape-rendering: crispEdges;
        }
        text {
            fill: #666;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>
 </head>
 <body>


 <script>

    // A jQuery plugin which creates histograms using d3.js
    (function( $ ) {
        $.fn.d3histogram = function(settings) {
            settings = jQuery.extend({
                data: [],
                width: null, // uses the width of the containing element
                height: null, // uses the height of the containing element
                bins: 10,
                bottompad: 10, // pixels of room to leave at the bottom for binlabels
                labelsize: null, // uses the height of the padding - 2 for font size

                // function which generates bin labels
                // by default it labels the bins from 1 to N, where N is the number of bins
                labelGenerator: function(d, i) { return i+1+""; } 
            }, settings);
            return this.each(function() {

                var $this = $(this);
                var w = settings.width === null ? $this.width() : settings.width;
                var h = settings.height === null ? $this.height() : settings.height;
                var ls = settings.labelsize === null ? settings.bottompad - 2 : settings.labelsize;
                
                d3.select(this).each(function(d, i) {

                    var histogram = d3.layout.histogram().bins(settings.bins)
                        (settings.data);
                    
                    var x = d3.scale.ordinal()
                        .domain(histogram.map(function(d) { return d.x; }))
                        .rangeRoundBands([0, w]);
                     
                    var y = d3.scale.linear()
                        .domain([0, d3.max(histogram, function(d) { return d.y; })])
                        .range([0, h - settings.bottompad]);
                    
                    var vis = d3.select(this).append("svg:svg")
                        .attr("class", "chart")
                        .attr("width", w)
                        .attr("height", h);
                    
                    vis.selectAll("rect")
                        .data(histogram)
                        .enter().append("svg:rect")
                            // move the bars down by their total height, so they animate up (not down)
                            .attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y) - settings.bottompad) + ")"; })
                            .attr("width", x.rangeBand())
                            // they all start at zero height
                            .attr("y", function(d) { return y(d.y); })
                            .attr("height", 0)
                        .transition()
                            .duration(750)
                            // they all animate up to the top of their context, which would be the top
                            // of the chart if not for the transform above.
                            .attr("y", 0)
                            .attr("height", function(d) { return y(d.y); });

                    // bottom line
                    vis.append("svg:line")
                        .attr("x1", 0)
                        .attr("x2", w)
                        .attr("y1", h - settings.bottompad)
                        .attr("y2", h - settings.bottompad);

                    // bucket numbers
                    vis.selectAll("text")
                        .data(histogram)
                        .enter().append("svg:text")
                            .attr("x", function(d, i) { return x(d.x) + x.rangeBand() / 2; })
                            .attr("y", h)
                            .attr("width", x.rangeBand())
                            .attr("text-anchor", function(d) { return "middle"; })
                            .attr("font-size", ls)
                            .text(settings.labelGenerator);
                });
            });
        };
    })( jQuery );

    var n = 10000, // number of trials
    m = 10,    // number of random variables
    data = [];

    // Generate an Irwin-Hall distribution.
    for (var i = 0; i < n; i++) {
      for (var s = 0, j = 0; j < m; j++) {
        s += Math.random();
      }
      data.push(s);
    }

    settings = {
        'data': data,
        'height': 80,
        'bins': 20,
        'bottompad': 15,
        'labelsize': 10,
        // label each bin with the percent of the total population in that bin
        'labelGenerator': function(d, i) { 
            var val = d3.round(d.y * 100.0);
            if (val == 0) {
                return '-';
            } else {
                return val + "%";
            }
        }
    };

    $(function() {
        $("body").d3histogram(settings);
    });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Histogram</title>
	<script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.17.0/d3.js"></script>
	<script type="text/javascript" src="https://github.com/mbostock/d3/raw/v1.17.0/d3.layout.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<style>
	body {
	width: 500px;
	margin: 100px auto;
	}

	rect {
	fill: #444;
	stroke: #fff;
	shape-rendering: crispEdges;
	-webkit-transition: fill 0.3s;
	-moz-transition: fill 0.3s;
	-o-transition: fill 0.3s;
	-ms-transition: fill 0.3s;
	transition: fill 0.3s;
	}
	rect:hover {
	fill: #777;
	}
	line {
	stroke: #ccc;
	shape-rendering: crispEdges;
	}
	text {
	fill: #666;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	</style>
	</head>
	<body>


	<script>

	// A jQuery plugin which creates histograms using d3.js
	(function( $ ) {
	$.fn.d3histogram = function(settings) {
	settings = jQuery.extend({
	data: [],
	width: null, // uses the width of the containing element
	height: null, // uses the height of the containing element
	bins: 10,
	bottompad: 10, // pixels of room to leave at the bottom for binlabels
	labelsize: null, // uses the height of the padding - 2 for font size

	// function which generates bin labels
	// by default it labels the bins from 1 to N, where N is the number of bins
	labelGenerator: function(d, i) { return i+1+""; }
	}, settings);
	return this.each(function() {

	var $this = $(this);
	var w = settings.width === null ? $this.width() : settings.width;
	var h = settings.height === null ? $this.height() : settings.height;
	var ls = settings.labelsize === null ? settings.bottompad - 2 : settings.labelsize;

	d3.select(this).each(function(d, i) {

	var histogram = d3.layout.histogram().bins(settings.bins)
	(settings.data);

	var x = d3.scale.ordinal()
	.domain(histogram.map(function(d) { return d.x; }))
	.rangeRoundBands([0, w]);

	var y = d3.scale.linear()
	.domain([0, d3.max(histogram, function(d) { return d.y; })])
	.range([0, h - settings.bottompad]);

	var vis = d3.select(this).append("svg:svg")
	.attr("class", "chart")
	.attr("width", w)
	.attr("height", h);

	vis.selectAll("rect")
	.data(histogram)
	.enter().append("svg:rect")
	// move the bars down by their total height, so they animate up (not down)
	.attr("transform", function(d) { return "translate(" + x(d.x) + "," + (h - y(d.y) - settings.bottompad) + ")"; })
	.attr("width", x.rangeBand())
	// they all start at zero height
	.attr("y", function(d) { return y(d.y); })
	.attr("height", 0)
	.transition()
	.duration(750)
	// they all animate up to the top of their context, which would be the top
	// of the chart if not for the transform above.
	.attr("y", 0)
	.attr("height", function(d) { return y(d.y); });

	// bottom line
	vis.append("svg:line")
	.attr("x1", 0)
	.attr("x2", w)
	.attr("y1", h - settings.bottompad)
	.attr("y2", h - settings.bottompad);

	// bucket numbers
	vis.selectAll("text")
	.data(histogram)
	.enter().append("svg:text")
	.attr("x", function(d, i) { return x(d.x) + x.rangeBand() / 2; })
	.attr("y", h)
	.attr("width", x.rangeBand())
	.attr("text-anchor", function(d) { return "middle"; })
	.attr("font-size", ls)
	.text(settings.labelGenerator);
	});
	});
	};
	})( jQuery );

	var n = 10000, // number of trials
	m = 10, // number of random variables
	data = [];

	// Generate an Irwin-Hall distribution.
	for (var i = 0; i < n; i++) {
	for (var s = 0, j = 0; j < m; j++) {
	s += Math.random();
	}
	data.push(s);
	}

	settings = {
	'data': data,
	'height': 80,
	'bins': 20,
	'bottompad': 15,
	'labelsize': 10,
	// label each bin with the percent of the total population in that bin
	'labelGenerator': function(d, i) {
	var val = d3.round(d.y * 100.0);
	if (val == 0) {
	return '-';
	} else {
	return val + "%";
	}
	}
	};

	$(function() {
	$("body").d3histogram(settings);
	});
	</script>
	</body>
	</html>