See in action http://bl.ocks.org/3766585
This simple column chart shows how to handle negative values on the y axis. It handles ordinal values for the X axis only.
I started with this gist from Mike Bostock: https://gist.github.com/2368837 see it on blocks: http://bl.ocks.org/2368837
borrowed a bit from the histogram example in D3: https://github.com/mbostock/d3/tree/master/examples/histogram
and used the reusable chart convention from: http://bost.ocks.org/mike/chart/
| function columnChart() { | |
| var margin = {top: 30, right: 10, bottom: 50, left: 50}, | |
| width = 420, | |
| height = 420, | |
| xRoundBands = 0.2, | |
| xValue = function(d) { return d[0]; }, | |
| yValue = function(d) { return d[1]; }, | |
| xScale = d3.scale.ordinal(), | |
| yScale = d3.scale.linear(), | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"), | |
| xAxis = d3.svg.axis().scale(xScale); | |
| function chart(selection) { | |
| selection.each(function(data) { | |
| // Convert data to standard representation greedily; | |
| // this is needed for nondeterministic accessors. | |
| data = data.map(function(d, i) { | |
| return [xValue.call(data, d, i), yValue.call(data, d, i)]; | |
| }); | |
| // Update the x-scale. | |
| xScale | |
| .domain(data.map(function(d) { return d[0];} )) | |
| .rangeRoundBands([0, width - margin.left - margin.right], xRoundBands); | |
| // Update the y-scale. | |
| yScale | |
| .domain(d3.extent(data.map(function(d) { return d[1];} ))) | |
| .range([height - margin.top - margin.bottom, 0]) | |
| .nice(); | |
| // 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", "y axis"); | |
| gEnter.append("g").attr("class", "x axis"); | |
| gEnter.append("g").attr("class", "x axis zero"); | |
| // 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("class", function(d, i) { return d[1] < 0 ? "bar negative" : "bar positive"; }) | |
| .attr("x", function(d) { return X(d); }) | |
| .attr("y", function(d, i) { return d[1] < 0 ? Y0() : Y(d); }) | |
| .attr("width", xScale.rangeBand()) | |
| .attr("height", function(d, i) { return Math.abs( Y(d) - Y0() ); }); | |
| // x axis at the bottom of the chart | |
| g.select(".x.axis") | |
| .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")") | |
| .call(xAxis.orient("bottom")); | |
| // zero line | |
| g.select(".x.axis.zero") | |
| .attr("transform", "translate(0," + Y0() + ")") | |
| .call(xAxis.tickFormat("").tickSize(0)); | |
| // Update the y-axis. | |
| g.select(".y.axis") | |
| .call(yAxis); | |
| }); | |
| } | |
| // The x-accessor for the path generator; xScale ∘ xValue. | |
| function X(d) { | |
| return xScale(d[0]); | |
| } | |
| function Y0() { | |
| return yScale(0); | |
| } | |
| // The x-accessor for the path generator; yScale ∘ yValue. | |
| function Y(d) { | |
| return yScale(d[1]); | |
| } | |
| 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; | |
| }; | |
| chart.x = function(_) { | |
| if (!arguments.length) return xValue; | |
| xValue = _; | |
| return chart; | |
| }; | |
| chart.y = function(_) { | |
| if (!arguments.length) return yValue; | |
| yValue = _; | |
| return chart; | |
| }; | |
| return chart; | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v2.min.js?2.10.0"></script> | |
| <script type="text/javascript" src="../d3.v2.js" charset="utf-8" ></script> | |
| <script type="text/javascript" src="column-chart.js"></script> | |
| <style> | |
| .chart rect { | |
| stroke: white; | |
| fill-opacity: .6; | |
| fill: steelblue; | |
| } | |
| .bar.positive { | |
| fill: steelblue; | |
| } | |
| .bar.negative { | |
| fill: brown; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="example"></div> | |
| <script> | |
| var data = [["A",0.012], ["B",-0.025], ["C",0.008], ["D",0.023], ["E",-0.009], ["F", 0.005]]; | |
| d3.select("#example") | |
| .datum(data) | |
| .call(columnChart() | |
| .width(960) | |
| .height(500) | |
| .x(function(d, i) { return d[0]; }) | |
| .y(function(d, i) { return d[1]; })); | |
| </script> | |
| </body> | |
| </html> |
There's an issue where if the data set does not include a zero datapoint, the graphs end up in weird offsets (sometimes going off the edge of the graph). The yScale definition should include an extra zero point to scale properly:
// Update the y-scale.
yScale
.domain(d3.extent((data.concat([['',0]])).map(function(d) { return d[1];} )))
.range([height - margin.top - margin.bottom, 0])
.nice();
This is a fantastic time saver! Thanks! Is it possible to modify ticks and tick format? I'm new to D3, still getting my head around how to get at these.