Rotating a bar chart into a column chart largely involves swapping x with y.
However, a number of smaller incidental changes are also required.
This is the cost of working directly with SVG rather than using a high-level visualization grammar
like ggplot2
On the other hand, SVG offers greater customizability; and SVG is a web standard,
so we can use the browser’s developer tools like the element inspector, and use SVG for things beyond visualization.
When renaming the x scale to the y scale, the range becomes [height, 0] rather than [0, width]. This is because the origin of SVG’s coordinate system is in the top-left corner. We want the zero-value to be positioned at the bottom of the chart, rather than the top. Likewise this means that we need to position the bar rects by setting the "y" and "height" attributes, whereas before we only needed to set "width". (The default value of the "x" attribute is zero, and the old bars were left-aligned.)
var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.range([0, 1, 2, 3, 4, 5]);
It would be tedious to enumerate the positions of each bar by hand, so instead we can convert a continuous range into a discrete set of values using rangeBands or rangePoints. The rangeBands method computes range values so as to divide the chart area into evenly-spaced, evenly-sized bands, as in a bar chart. The similar rangePoints method computes evenly-spaced range values as in a scatterplot.
For example:
var x = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F"])
.rangeBands([0, width]);
For more information Click http://bost.ocks.org/mike/bar/3/