Question

For the simplest use case, a bar chart with values ranging from -10 to 10, how does one go about coding this cleanly using the Protovis JavaScript charting library?

By cleanly I mean centering the axis, showing x and y axis labels, and representing the column values of the chart where negative values fall below the y axis and positive values exceed the y axis.

Answer 1

Here’s a working example: http://jsfiddle.net/nrabinowitz/yk5By/3/

The important parts of this are as follows:

• Make an x-axis scale going from your min value to your max value (in your case, it would be pv.Scale.linear(-10,10).range(0,w); in my example, I calculate min and max based on the data).

• Base the width of the bar on the absolute distance of the datum from 0:

  .width(function(d) { return Math.abs(x(d) - x(0)); })
  

• Then adjust the .left() property based on whether the datum is positive or negative:

  .left(function(d) { return d > 0 ? x(0) : x(0) - this.width(); });
  

• Because we’re using a simple x-axis scale, the adding axis labels is super-easy:

  vis.add(pv.Label)
      .data(x.ticks()) // you could also use pv.range(min, max, 1) here
      .left(x);