function histogramChart() { var margin = {top: 0, right: 0, bottom: 20, left: 0}, width = 960, height = 500; var histogram = d3.layout.histogram(), x = d3.scale.ordinal(), y = d3.scale.linear(), xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0); function chart(selection) { selection.each(function(data) { // Compute the histogram. data = histogram(data); // Update the x-scale. x .domain(data.map(function(d) { return d.x; })) .rangeRoundBands([0, width - margin.left - margin.right], .1); // Update the y-scale. y .domain([0, d3.max(data, function(d) { return d.y; })]) .range([height - margin.top - margin.bottom, 0]); // Select the svg element, if it exists. var svg = d3.select(this).selectAll("svg").data([data]); // Otherwise, create the skeletal chart. var gEnter = svg.enter().append("svg").append("g"); gEnter.append("g").attr("class", "bars"); gEnter.append("g").attr("class", "x axis"); // Update the outer dimensions. svg .attr("width", width) .attr("height", height); // Update the inner dimensions. var g = svg.select("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Update the bars. var bar = svg.select(".bars").selectAll(".bar").data(data); bar.enter().append("rect"); bar.exit().remove(); bar .attr("width", x.rangeBand()) .attr("x", function(d) { return x(d.x); }) .attr("y", function(d) { return y(d.y); }) .attr("height", function(d) { return y.range()[0] - y(d.y); }) .order(); // Update the x-axis. g.select(".x.axis") .attr("transform", "translate(0," + y.range()[0] + ")") .call(xAxis); }); } chart.margin = function(_) { if (!arguments.length) return margin; margin = _; return chart; }; chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; // Expose the histogram's value, range and bins method. d3.rebind(chart, histogram, "value", "range", "bins"); // Expose the x-axis' tickFormat method. d3.rebind(chart, xAxis, "tickFormat"); return chart; }