Horizon chart not visible when using d3.scale.log()

Question

I've successfully drawn horizon charts using the default linear scale, and they look great. Unfortunately, when I try to use the d3.scale.log() scaler, the chart never shows up; no error, just nothing. I had thought that the problem was with zeros in the input data, but even when my metrics return a single non-zero value, this occurs. Here's an example:

context = cubism.context(), horizon = context.horizon();
horizon.scale(d3.scale.log());
var flatMetric = context.metric(function(start, stop, step, callback) {
  var values = [];

  // convert start & stop to milliseconds
  start = +start;
  stop = +stop;

  while (start < stop) {
    start += step;
    values.push(10);
  }

  callback(null, values);
});
d3.select("body").selectAll(".horizon")
  .data([flatMetric]).enter().append("div")
  .attr("class", "horizon")
  .call(horizon);

If I simply replace the log scale with the linear scale, everything works fine.

Answer 1

Area charts (of which a horizon chart is a special case) don't make sense on a log scale: zero is at infinity. In practice, this manifests itself as a rendering error because the coordinates are ±Infinity or NaN.

If you want to use a log scale, you'll need a different chart type without a zero baseline, such as a line chart. A comparison chart might also work. If you want to keep the horizon charts and you don't want to use a linear scale, try a sqrt (or more generally, pow) scale.