<div id='description'>
  <p>Color palette for the data are already included in the library. By default the color is set to 'green'. The different are available are included in the dropdown.</p>
  <p>Set color to:  
    <select onchange='changeColor(this)'>
    <option value="green">green</option>
    <option value="pink">pink</option>
    <option value="aqua">aqua</option>
    <option value="brown">brown</option>
    <option value="red">red</option>  
    <option value="yellow">yellow</option>
    <option value="purple">purple</option>
    <option value="orange">orange</option>
    <option value="blue">blue</option>  
  <div id='chart'></div>
#description {
  margin: 1em;
//change the color of the squares to a colour theme

let dataSet = [
                { "y": "Plan", "x": "Jan", "z": 100},
                { "y": "Bonus", "x": "Feb", "z": 460},
                { "y": "Plan", "x": "Mar", "z": 720},

let chart = d3_rs_squares.html();    //default


function changeColor(selectedColour){
let chart = d3_rs_squares.html()
                         .color(selectedColour.value);    //change the square colour  


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