nvd3 Bubble chart with log scale

I am using NVD3 scatter/ Bubble chart. This is a continuation from the question here. I am plotting the log base 2 values for the y axis. But I want the y axis to have the original values as labels corresponding to the log base 2 scale. I am unable to understand how to do so.

Edit

This is what I have for plotting

data[i].values.push({
    x: random()
  , y: log2(yValue)
  , size: Math.random()
  });

function log2(val) {
console.log("val = " + val + " : " + Math.log(val) / Math.LN2)
    return Math.log(val) / Math.LN2;
}

Now, the y axis ticks have the log2 values. I want to change the y axis ticks to have the original values displayed and not the log2 values.

Thanks,

Answers:

Answer

Instead of directly calculating the log when you create your data array, leave it as is and then use a log scale for your axis.

To use a custom scale in NVD3, you pass it as a parameter to the chart.yScale(scale) or chart.xScale(scale) methods.

var chart = nv.models.lineChart()
      .yScale( d3.scale.log() );

Just don't try to use a log scale for y values in a bar or area chart, since those automatically include 0 in the domain (and you'll get errors if you try to plot anything at log(0)!)

A couple warnings:

  • Tick formating functions work different on log scales than for other scales; you'll probably want to just leave it as the default. See the docs (link above) for more info.

  • The .nice() method doesn't seem to work very effectively on log scales; when I was playing around on the NVD3 live code site, a domain of [1,99] was resulting in a final tick value of 98.999999999 on the axis. You may want to explicitly check that the domain starts and ends at round numbers.

Also note that since you're never actually dealing with the calculated values for the logs (just with the relative positions on the scale) you don't need to specify a base to the logarithm. The docs mention a logScale.base(number) method but that seems to be obsolete...

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.