title: Unable to resize Cubism graph D3.js
body: <p>I got the cubism code from the <a href="https://square.github.io/cubism/demo/" rel="nofollow noreferrer">Cubism Demo</a>. The timeframe by default in the demo code is 4 hours. I'm trying to reduce it to 15 min. I successfully modified the option to make it 15 min but the graph got shrinked. </p>
  
  <p>Here is the JavaScript code :</p>
  
  <pre><code>var context = cubism.context()
      .step(10000)
      .size(1440); // Modified this to 90 to make it 15 min 
  
  d3.select("body").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(12).orient(d)); });
  
  d3.select("body").append("div")
      .attr("class", "rule")
      .call(context.rule());
  
  d3.select("body").selectAll(".horizon")
      .data(d3.range(1, 3).map(random))
    .enter().insert("div", ".bottom")
      .attr("class", "horizon")
      .call(context.horizon().extent([-10, 10]));
  
  context.on("focus", function(i) {
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
  });
  
  // Replace this with context.graphite and graphite.metric!
  function random(x) {
    var value = 0,
        values = [],
        i = 0,
        last;
    return context.metric(function(start, stop, step, callback) {
      start = +start, stop = +stop;
      if (isNaN(last)) last = start;
      while (last &lt; stop) {
        last += step;
        value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += x * .02)));
        values.push(value);
      }
      callback(null, values = values.slice((start - stop) / step));
    }, x);
  } 
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/hze14a7p/" rel="nofollow noreferrer">demo</a>.</p>
  
  <p>How to display 15 min or lower time frame in Cubism graph?</p>