<div id='description'>
  <h3><code>nice();</code></h3>
  <p>Display the whole month when <code>nice()</code> is set to <code>true</code>.When set to <code>false</code> it get trimmed to the starting and ending date.</p>
<p>
 <code>nice(<button class='rs-btn--small rs-btn--selected' onclick = 'nice_true()'>true</button>
  <button class='rs-btn--small' onclick = 'nice_false()'>false</button>);</code> 
</p>  
</div>
<div id='chart'></div>
#description {
  margin: 1em;
}
//RedSift
//nice();

let dataset = [ {d: 978307200000,v: 8},
                {d: 980985600000,v: 8219},
                {d: 983404800000,v: 10686},
                {d: 986079600000,v: 14348},
                {d: 988671600000,v: 16986},
                {d: 991350000000,v: 11128},
                {d: 993942000000,v: 6980},
                {d: 996620400000,v: 7490},
                {d: 999298800000,v: 9888},
                {d: 1001890800000,v: 29556},
                {d: 1004572800000,v: 23441},
                {d: 1009018400000,v: 9471}
            ];

let chart = d3_rs_squares.html()
                         .type('calendar.days')  //type set to convert from unix timestamp
                         .nice(true)    //set the nice 
                         .width(1000);  //rescale the chart

d3.select('#chart')
  .datum(dataset)
  .call(chart);

function nice_true(){
  let chart = d3_rs_squares.html()
                         .type('calendar.days')
                         .nice(true)
                         .width(1000);

d3.select('#chart')
  .datum(dataset)
  .call(chart);
}

function nice_false(){
  let chart = d3_rs_squares.html()
                         .type('calendar.days')
                         .nice(false)
                         .width(1000);

d3.select('#chart')
  .datum(dataset)
  .call(chart);
}

// Generic function to toggle selected state of a button
d3.selectAll('button')
  .on('click', function() {
    let selected = this;
    d3.selectAll('button')
      .classed('rs-btn--selected', function() {
        return (selected === this);
      });
  });
View Compiled

External CSS

  1. https://static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css

External JavaScript

  1. https://d3js.org/d3.v4.min.js
  2. https://static.redsift.io/reusable/d3-rs-squares/latest/d3-rs-squares.umd-es2015.min.js