<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>
//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