0

I am trying to make an axis of 24 hours with a separation of 1 hour in cubism.

var context = cubism.context()
    .serverDelay(30*1000)
    .step(10 * 60 * 1000) //The step size is 10 mins
    .size(window_width - 200);

d3.select("#viz").selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(d3.time.hours, 1).orient(d)); });

This line context.axis().ticks(d3.time.hours, 1).orient(d) is somehow wrong. Since the axis text gets overlapped and nothing is visible. I tried many combinations like 60 mins, 1 Day but nothing seems to work. Can anyone please help me.

Dan
  • 801
  • 2
  • 14
  • 29
  • What happens if you specify a constant number of ticks (12 in this case)? –  Jul 06 '13 at 16:59
  • for ticks(12) it shows Days with 12pm in between. Like Fri 05, 12 PM, Sat 06, 12PM – Dan Jul 06 '13 at 17:10
  • Did you do something like this: ticks(12) or did you do ticks(d3.time.hours, 12)? The first one is what I meant. –  Jul 06 '13 at 17:22
  • i did the first one i.e ticks(12) – Dan Jul 06 '13 at 18:09

1 Answers1

1

You're misunderstanding what size does. size does not indicate the number pixels you have available on the screen. It indicates to the number of data points you have, which in turn is the number of pixels you need to show your data. The number of data points determines size, not the other way around.

You mentioned that you have data over an interval of 24 hours with a value every 10 minutes. This makes your graph 144 px wide, not window_width - 200 as you're specifying in the size.

This also explains why despite your best efforts you can't get more labels on the axes. Cubism does not want to clutter your tiny graph so it's only allowing you a maximum of 3 or 4 labels.

The best way to solve this problem would be to increase the number of data points. You can do this in 2 ways:

  • Reduce your step to 1 or 2 minutes to get a wider graph (1 minute gives a 1440px wide image, and 2 minutes a 720px wide image).
  • In case that's not possible, increase your time window to a week (1008 px).