0

Attempting to write a simple visualization using Cubism and D3. Admittedly, I'm fairly new to using Cubism and D3 and the Cubism documentation is very hard to understand.

Polling a URL for a numerical value to retrieve the 'rate' and then pushing the value onto an array like in the examples. The canvas stuff does not render and initially, neither does the numerical value as in the Cubism.js examples. After a while a number shows up reflecting the latest polled value. Debugging the JavaScript does show the array expanding with values over time.

Any help in understanding the problem better would be appreciated.

render: function() {
  var thatElement = this.el;

  function update(model) {
    var values = [];

    return context.metric(function(start, stop, step, callback) {
      model.fetch();
      var data = model.toJSON();
      if (data[0]) values.push(parseInt(data[0]));
      callback(null, values = values.slice(-context.size()));
    }, "Rate");
  }

  var context = cubism.context()
                .serverDelay(0)
                .clientDelay(0)
                .step(5000);

  var foo = update(this.model);

  d3.select(thatElement).append("div").call(function(div) {
    div.append("div")
      .attr("class", "axis")
      .call(content.axis().orient("top"));

    div.selectAll(".horizon")
        .data([foo])
      .enter().append("div")
        .attr("class", "horizon")
        .call(context.horizon());
    div.append("div")
        .attr("class", "rule")
        .call(context.rule());
  });
}

Additionally, noticing that if I call the cubism.context() stuff in other views, it breaks preceding views.

Maz
  • 91
  • 1
  • 5
  • Are you sure there's a div.selectAll method? Cause I've only seen d3.selectAll. –  May 01 '13 at 02:23
  • I figured it out. The time series defaults to size 1440 (four hours, 1 pixel per second) and it was rendering outside of the encapsulating div. Now the issue determining the size of the series or at least forcing it to render such that the series disappears to the left as opposed to the right. – Maz May 01 '13 at 22:00
  • After experimentation, I've found that one pixel per data point works best. –  May 02 '13 at 02:33

1 Answers1

0

Try to debug the problem by writing a div element in your base HTML file with class "horizon".I was also facing the same issue but doing this div manipulation solved it in seconds.

sharmila
  • 1,493
  • 5
  • 23
  • 42