using log() scale for bar chart y-axis

[jjguy]

Using 2.0.0-dev pulled on or about 1 Dec.

I've got a working chart with y-axis defined as

 .y(d3.scale.linear().domain([0, max_y_value]))

but the range of values are too diverse for the height of the graph. I changed to log scale:

 .y(d3.scale.log().domain([0, max_y_value]))

and the graph disappears - each bar is plotted with y=0 and height=0:

<rect class="bar" fill="#CFEAF3" x="92.96428571428571" y="0" width="47" height="0"></rect>

I presume this is since log(0) == -Infinity, so I convert the domain lower bound to 1:

.y(d3.scale.log().domain([1, max_y_value]))

that results in seemingly-accurate y-values but a height of Infinity:

<rect class="bar" fill="#CFEAF3" x="92.96428571428571" y="24.240901843984844" width="47" height="Infinity"></rect>

Infinity is from this block of code:

function barHeight(d) {
    return dc.utils.safeNumber(Math.abs(_chart.y()(d.y + d.y0) - _chart.y()(d.y0)));
}

_chart.y() is log() and d.y0 is always 0 - resulting in height="Infinity" for each bar.

I can't find any docs on y0, nor any assignment in the source. Is it a bug? Do I have to set the domain/range elsewhere?

Thanks in advance.

[jrideout]

y0 is the baseline value for the bar - to bottom of the bar. It is created by using d3.layout.stack and is zero by default, but can be different if your are using stacked bars. We should be able to support log bar charts, so I'll tag this issue as a bug.

[jjguy]

Thanks. I tried simply removing the - _chart.y()(d.y0) from barHeight(), but still ended up with unexpected results. The domain and range were unrelated to what I specified, resulting in inaccurate calculations for y(d.y). I spent time digging through d3.js, but couldn't identify what was going on. I ended up fixing up height and y in a renderlet:

        this.the_bar_chart.renderlet(function(chart) {
            chart.selectAll("g .bar")
                .attr("y", function(d) {
                    return (maxBarHeight - 1) - (pixPerUnit*Math.log(d.y));
                })
                .attr("height", function(d) {
                    return pixPerUnit*Math.log(d.y);
                });
        });

I'm not happy with that little hack, but the graph is accurate and has log scale bars.

[robertfeldt]

I really need log scales but can't get your renderlet to work. How did you calc the maxBarHeight and pixPerUnit values? Or should they be available in the scope of the renderlet func, already?

[jjguy]

@robertfeldt I was too embarrassed to put it out there in public with my name attached, but here you go. Don't judge:

260             // 30 pix actual vert height after the axis label
261             // TODO this is an ugly hack.
262             var maxBarHeight = 30;
263             var pixPerUnit = maxBarHeight / Math.log(max_y_value);

[robertfeldt]

Thanks, but the y axis scale will not be adapted by this right?

[vprus]

Is there a solution for this? Using today's github master, calling 'y' does not appear to have any effect at all. Thanks in advance.

[vprus]

Looks like it did not work because I had elasticY set, and it appears to disable custom y scale. With that off, I can get (.y(d3.scale.sqrt().domain([-600, 600]))) to work - which is what I was after.

[gordonwoodhull]

Hey Volodya! Good to see a fellow Booster here.

Yes the elastic settings override the scales entirely. It might make more sense if they just overrided the domain.

[vprus]

Hi Gordon! Seems like Boosters are everywhere ;-)

I suppose it would be even better if I could pass scale without computing the domain, i.e. just do .y(d3.scale.sqrt) - though I don't know whether it's implementable.

[gordonwoodhull]

EDIT: keeping this comment for historical reasons. See below for corrected answer.

Okay, I figured out a decent workaround, at least when there are no zeroes in the data - if we can find a reliable way to detect log-based scales, we can put something like this into dc.js 2.1.

The main problem, as explained above, is that the stack algorithm returns d.y0 === 0 for the first stack. Since this is just a baseline, if all our values are greater than one, why not just map the baseline to 1?

We can do this without a renderlet or modifications to dc.js by wrapping d3.layout.stack:

          var oldStack = chart.stackLayout();
          var newStack = function() {
              var stacked = oldStack.apply(oldStack, arguments);
              stacked[0].values.forEach(function(v) {
                  v.y0 = 1;
              });
              return stacked;
          };
          newStack.values = function(v) {
              return arguments.length ? oldStack.values(v) : oldStack.values();
          };
          chart.stackLayout(newStack);

Example fiddle (not good enough to create an official example):
http://jsfiddle.net/gordonwoodhull/uxxune6f/7/

Remaining questions:

0. what to do about values that are actually zero?
1. what to do about values between 0 and 1 - drawing as negative bars would be nice, do we need to special case?
2. what to do about negative values - technically the log is imaginary, but in practice people are usually happy with negating the value and then taking the log, and then inverting the result.
3. Does this affect any of the other scales? I've never properly understood the difference between power scales and log scales.
4. yAxisPadding does not work with numbers because it's applied to both top and bottom (independent padding #1203 / option for elastic max only, keeping min at zero #924) - it works with a percentage, but with numbers, the bars disappear. This can be further worked around with chart.yAxisMin = function() { return 1; }; but yuck.

[akuji1993]

I found another solution to do this (at least in my particular case), so I thought, someone here might be interested:

http://stackoverflow.com/a/41806303/4436514

[gordonwoodhull]

My attempt above did not deal with stacks potentially having empty values.

It only corrected the bottom stack. If the bottom stack is zero you also have to set the y0 of the next one, and so on.

It's simplest just to change any y0 = 0 into y0 = 1

          var oldStack = chart.stackLayout();
          var newStack = function() {
              var stacked = oldStack.apply(oldStack, arguments);
              stacked.forEach(function(stack) {
                stack.values.forEach(function(v) {
                  if(v.y0 === 0) v.y0 = 1;
                });
              })
              return stacked;
          };
          newStack.values = function(v) {
              return arguments.length ? oldStack.values(v) : oldStack.values();
          };
          chart.stackLayout(newStack);

I don't think it's a bad solution at all. Of course it won't work if any values are less than 1, but I haven't seen anyone try to use log scales for fractional values so we can cross that bridge when we come to it.

I still need to port it to d3v4 and DCv3 and create an example.

I'll keep this open until I create the example. This code has the potential to be added to the library, too.

The fiddle was also broken due to the upgrade to dc 3. Here's a corrected fiddle, with a pie chart to test filtering:

https://jsfiddle.net/gordonwoodhull/eg392fvx/84/