can't show y-ticks on dc.js / d3.js line graph

Question

I have some sample market data of the form:

"pair","date","a","b"
EUR/GBP,20130101 21:59:59.592,0.81156,0.81379
EUR/GBP,20130101 21:59:59.595,0.81163,0.81373

I am looking to graph a line chart of the average of "a' on a per minute basis. The chart seems to be working mostly OK, but I cannot get it to display any y-ticks.

Reading the data in:

d3.csv("./EURGBP-chop.csv", function (data) {
    /* since its a csv file we need to format the data a bit */
    var dateFormat = d3.time.format("%Y%m%d %H:%M:%S.%L");
    var numberFormat = d3.format(".2f");

    data.forEach(function(d) {
      d.dd = dateFormat.parse(d.date);
      d.minute = d3.time.minute(d.dd);
      d.a = +d.a; //coerce to number
      d.b = +d.b;
    });

Creating a crossfilter, dimension and group (reduced to average):

var ndx = crossfilter(data);
var dateDimension = ndx.dimension(function (d) {
    return d.minute;
});

var group = dateDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);

function reduceAdd(p, v) {
  ++p.count;
  p.total += v.a;
  return p;
}

function reduceRemove(p, v) {
  --p.count;
  p.total -= v.a;
  return p;
}

function reduceInitial() {
  return {count: 0, total: 0};
}

Min/Max calcs for setting the domain of y-axis:

min = dateDimension.bottom(1)[0].a;
max = dateDimension.top(1)[0].b;

//Want a graph that has a y-scale with head room above and below min/max
//Calculate this as 20% of difference between min and max
adj = (max-min)*0.2; 
console.log("adj:" + adj);

Setting up the line chart:

timeChart.width(960)
  .height(150)
  .margins({top: 10, right: 10, bottom: 20, left: 40})
  .dimension(dateDimension)
  .group(group)
  .valueAccessor(function(p) { return p.value.count > 0 ? p.value.total / p.value.count : 0; })
  .brushOn(false)
  .renderArea(true)
  .transitionDuration(500)
//  .elasticY(true)
  .x(d3.time.scale().domain([new Date(2013,0,2), new Date(2013, 0, 3)]))
  //y-axis is set with headroom below min and above max vals
  .y(d3.time.scale().domain([(min-adj), (max+adj)]));

I think the problem is related to the fact my y-axis data is actually from the valueAccessor? I tried various options of using yAxis().tickFormat() but still got no ticks.

Eventually I decided to just try and print the value in tick format to console, just to investigate: (I'm not sure this is a valid thing to do)

.yAxis().tickFormat(function (v) { console.log(v); return v; });

However, when doing this I noticed in fact it was printing out a date, where I would have expected a decimal in range of around 0.81.

Output to console:

Thu Jan 01 1970 00:00:00 GMT+0000 (BST)

This is how the chart currently renders: How the chart renders currently

Question is, how can I get y-ticks to show?

jonowzz jonowzz · Accepted Answer · 2014-08-07T04:51:51

In the line .y(d3.time.scale().domain([(min-adj), (max+adj)])); you are setting your y axis to use a time scale, when I assume you want it to show a decimal.

Try switching that to something like.y(d3.scale.linear().domain([(min-adj), (max+adj)])); or similar. I'm pretty sure that would likely be why no values are showing.

can't show y-ticks on dc.js / d3.js line graph

1 Answers