<div id ='info'>
<h3>A simple matrix square chart example.</h3>  
</div>  
<div id ='chart'></div>
#info {
  margin: 1em;
}
//A simple square chart matrix structure

//Structure of the dataSet 
//x represent the x-axis, y represent the y-axis and z the colour intensity
let dataSet = [
               {x: 1 , y: 3, z:10},  //this represent the row 
               {x: 4 , y: 7, z:1},   
               {x: 6 , y: 9, z:5}
              ];

let  chart = d3_rs_squares.html();

d3.select('#chart')
  .datum(dataSet)
  .call(chart)
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