2

In the cubism example, changing the height parameter of context.horizon() to a smaller value causes the graph to overplot itself more. The opposite is true for increasing the value - there is less overplotting.

However, when I change the height parameter, my graphs retain the same level of overplotting and they simply scale themselves up and down accordingly. The graphs effectively lose resolution when I make the height smaller.

How do I fix this?

Here is my code:

var context = cubism.context().step(1000000).size(1000);

var graphite = context.graphite("http://graphite.example.com");
var horizon = context.horizon().metric(graphite.metric).height(200);

var metrics = [
    "summarize(example0,'10s')",
    "summarize(example1,'10s')",
    "summarize(example2),'10s')",
    "summarize(example3),'10s')"
]   

d3.select("#supergraph").append("div")
    .attr("class", "axis")
    .call(context.axis().ticks(4).orient("top"));

d3.select("#supergraph").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("#supergraph").selectAll(".horizon")
    .data(metrics)
.enter().append("div")
    .attr("class", "horizon")
    .call(horizon);

Abe Stanway
  • 95
  • 4

1 Answers1

1

Cubism will always plot a number of bands equal to the number of colors you set for it, and unless you explicitly set an extent, it will always set your maximum value at the top of the highest band to the max value of your data. This means you have two options to keep the same resolution when changing size:

1) You can explicitly set an extent with horizon.extent([min, max]) and scale the min and max values as you scale the height. In other words, if you double the height of your chart, double the min and max in your extent as well.

2) You can change the number of colors you give it, which will change the number of bands it creates. In other words, if you double the height of your chart, give it a new array of colors with half the number of colors.

Aaron
  • 81
  • 4