<div id='description'>
  <h3><code>color();</code></h3>
  <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>  
    </select>
  </p>  
  <div id='chart'></div>
</div>

#description {
  margin: 1em;
}

//RedSift
//color();
//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

d3.select('#chart')
  .datum(dataSet)   
  .call(chart);

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

d3.select('#chart')
  .datum(dataSet)   
  .call(chart);
  
}