<div id='description'>
  <h3><code>rangeIndex().intervalIndex();</code></h3>
  <h3><code>rangeValue().intervalValue();</code></h3>
  
  <p>All the above function works if the dataset used is in unix timestamp. <code>rangeIndex()</code> and <code>rangeValue()</code> specify the range of the data and splitting the data into intervals using <code>intervalIndex()</code> and <code>intervalValue()</code>for each range.</p>
<p>Check different time format to convert the epoch to human date <a href = "https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat" target="_blank">here</a> for axis format.</p>  
  <button class='rs-btn--small rs-btn--selected' onclick = 'daysvsHours()'>days vs hours</button>
  <button class='rs-btn--small' onclick = 'daysvsWeeks()'>days vs weeks</button>
  <button class='rs-btn--small' onclick = 'monthsvsDays()'>days vs months</button>
  <br></br>
  <div id='info'></div>
  <div id='chart'></div>
</div>
  
#description {
  margin: 1em;
}
//Redsift
//type();

//Dataset
//data in eppoch time 
let ddMatrix = [
      {x: 993999486000, y:993999486000 , z:8},
      {x: 996677886000, y:996677886000, z:17},
      {x: 1000553960000, y:996677886000, z: 50}
    ];

let daysHours = d3_rs_squares.html()
                              .rangeIndex('timeDay') //set the range for Index
                              .intervalIndex('timeHour') //set the interval for index
                              .rangeValue('timeWeek') //set the range for Value
                              .intervalValue('timeDay') // set the interval for value   
                              .tickAxisFormatIndex('%H') //set the Index value to hour
                              .tickAxisFormatValue('%a') //set the  value to week

d3.select('#chart')
  .datum(ddMatrix)
  .call(daysHours);

d3.select('#info')
  .html('<p>The range for Index is set to <code>"timeDay"</code> and interval to <code>"timeHour"</code> thus splitting the day into hour.</p>');

//represent the days vs hours chart
function daysvsHours(){
  
let dayvsHours = d3_rs_squares.html()
                              .rangeIndex('timeDay') //set the range for Index
                              .intervalIndex('timeHour') //set the interval for index
                              .rangeValue('timeWeek') //set the range for Value
                              .intervalValue('timeDay') // set the interval for value   
                              .tickAxisFormatIndex('%H') //set format of the Index value to hour
                              .tickAxisFormatValue('%a') //set format of the  value to week

d3.select('#chart')
  .datum(ddMatrix)
  .call(dayvsHours);
  
d3.select('#info')
  .html('<p>The range for Index is set to <code>"timeDay"</code> and interval to <code>"timeHour"</code> thus splitting the day into hour.</p>');  
}

//represent the days vs weeks chart
function daysvsWeeks(){
 let  daysWeeks = d3_rs_squares.html()
                              .intervalIndex('timeWeek') //set the interval for index
                              .rangeIndex('timeYear') //set the range for Index
                              .tickAxisFormatIndex('%U') //set the Index value to year
                              .intervalValue('timeDay') // set the interval for value 
                              .rangeValue('timeWeek') //set format of the range for Value
                              .tickAxisFormatValue('%a') //set format of the  value to week
                              .width(800);  //change the chart width
d3.select('#chart')
  .datum(ddMatrix)
  .call(daysWeeks);
 
d3.select('#info')
  .html('<p>The range for Index is set to <code>"timeYear"</code> and interval to <code>"timeWeek"</code> thus splitting the year into week.</p>');  
}

//represent the days vs months chart
function monthsvsDays(){
  
let dayvsHours = d3_rs_squares.html()
                              .rangeIndex('timeYear') //set the range for Index
                              .intervalIndex('timeMonth') //set the interval for index
                              .rangeValue('timeWeek') //set the range for Value
                              .intervalValue('timeDay') // set the interval for value   
                              .tickAxisFormatValue('%a') //set formet of the Index value to hour
                              .tickAxisFormatIndex('%b') //set format of the  value to month

d3.select('#chart')
  .datum(ddMatrix)
  .call(dayvsHours);
  
d3.select('#info')
  .html('<p>The range for Index is set to <code>"timeYear"</code> and interval to <code>"timeMonth"</code> thus splitting the year into month.</p>');  
}

// 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. //static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css

External JavaScript

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