<div id='description'>
  <h3><code>type();</code></h3>
  <p>Change the type to <code>'calendar.days', 'calendar.hours', 'matrix.cooc' </code>or <code>'matrix'</code> (set to default). Calendar days and hours only works if unix time stamp data are used.</p>
  <p><code>matrix.cooc</code> represent data that has the same occurrence.</p>
  <p><code>.type(<button class='rs-btn--small rs-btn--selected' onclick = 'cooc()'>matrix.cooc</button>
  <button class='rs-btn--small' onclick = 'matrixx()'>matrix</button>);</code></p>
  <div id='chartMatrix'></div>
</div>
#description {
  margin: 1em;
}
//Redsift
//type();

//Dataset
let emailData = [
  { "x": "jeff.dasovich","y": "jeff.dasovich","z": 491},
  { "x": "jeff.dasovich", "y": "james.d.steffes","z": 1967},
  { "x": "jeff.dasovich","y":"j.kaminski", "z": 2},
  { "x": "jeff.dasovich", "y": "kay.mann","z": 0},
  { "x": "jeff.dasovich","y": "steven.j.kean","z": 1396},
  { "x": "jeff.dasovich","y": "sara.shackleton","z": 0},
  { "x": "jeff.dasovich","y": "lynn.blair","z": 0},
  { "x": "jeff.dasovich", "y": "sally.beck","z": 80},
  { "x": "jeff.dasovich","y": "richard.b.sanders","z": 719},
  { "x": "jeff.dasovich", "y": "matthew.lenhart","z": 0},
  { "x": "james.d.steffes", "y": "jeff.dasovich","z": 660},
  { "x": "james.d.steffes", "y": "james.d.steffes","z": 13},
  { "x": "james.d.steffes", "y": "j.kaminski", "z": 4},
  { "x": "james.d.steffes", "y": "kay.mann","z": 0},
  { "x": "james.d.steffes","y": "steven.j.kean","z": 385},
  { "x": "james.d.steffes", "y": "sara.shackleton","z": 0},
  { "x": "james.d.steffes", "y": "lynn.blair", "z": 0},
  { "x": "james.d.steffes", "y": "sally.beck","z": 15},
  { "x": "kay.mann", "y": "sally.beck","z": 1500},
  { "x": "sally.beck", "y": "kay.mann","z": 1500}
                ];

let matrix = d3_rs_squares.html()
                          .type('matrix.cooc')  //type
                          .inset({ top:110,left:110,bottom:0,right:0 }) //inset size
                          .width(800); //change the width of the overall chart

d3.select('#chartMatrix') 
  .datum(emailData)
  .call(matrix);  

function cooc(){
  let matrix = d3_rs_squares.html()
                          .type('matrix.cooc')
                          .inset({ top:110,left:110,bottom:0,right:0 })
                          .width(800); 

  d3.select('#chartMatrix')
    .datum(emailData)
    .call(matrix);
}

function matrixx(){
  let matrix = d3_rs_squares.html()
                          .type('matrix')
                          .inset({ top:110,left:110,bottom:0,right:0 })
                          .width(800); 

  d3.select('#chartMatrix')
    .datum(emailData)
    .call(matrix);
}

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