From e46b1615a10fef9e56cf62fc581feb5a135b383e Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Tue, 28 Feb 2012 17:52:16 -0800 Subject: [PATCH] Update histogram example. --- examples/histogram/histogram-chart.js | 83 +++++++++++++++++++++++ examples/histogram/histogram.html | 95 ++++++++------------------- 2 files changed, 112 insertions(+), 66 deletions(-) create mode 100644 examples/histogram/histogram-chart.js diff --git a/examples/histogram/histogram-chart.js b/examples/histogram/histogram-chart.js new file mode 100644 index 00000000..33b27ff5 --- /dev/null +++ b/examples/histogram/histogram-chart.js @@ -0,0 +1,83 @@ +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; +} diff --git a/examples/histogram/histogram.html b/examples/histogram/histogram.html index b0aa398b..e6abb007 100644 --- a/examples/histogram/histogram.html +++ b/examples/histogram/histogram.html @@ -1,79 +1,42 @@ - - - Histogram - - - - - + + - - +