<div id='description'>
  <h3><code>fill();</code></h3>
  <p>Change the graph colour to any specific colour. Fill can take a colour name, an rgb or an hex value.</p>

  <div> 
    <button class="rs-btn--small rs-btn--selected" onclick='colour()'>Colour name</button> 
    <button class="rs-btn--small" onclick='rgb()'>RGB colour</button> 
    <button class="rs-btn--small" onclick='hex()'>Hex colour</button>
  </div>
</div>

<div>
  <p id='hexInfo'></p>
</div>

<div id='chart'></div>

#description,#hexInfo {
  margin : 1em;
  
}
button{
  padding: 5px;
}

//RedSift
//Change the graph colour to a specific colour.
//The example shows that fill can take colour name, rgb or hex value. 


let chart = d3_rs_lines.html()
    .fill('red'); //fill graph to the colour red 

  d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);

  d3.select('#hexInfo')
    .html("The graph is filled using colour name <code>fill('red')</code>");

function colour() {

  let chart = d3_rs_lines.html()
    .fill('red'); //fill graph to the colour red

  d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);

  d3.select('#hexInfo')
    .html("The graph is filled using colour name <code>fill('red')</code>.");
}

function rgb() {
  let chart = d3_rs_lines.html()
    .fill('rgb(0,0,259)'); //rgb value set to blue colour

  d3.select('#chart').datum([1, 2, 3, 10, 20])
    .call(chart);
  d3.select('#hexInfo')
    .html("The graph is filled using rgb value <code>fill('rgb(0,0,259)')</code> representing blue colour.");
}

function hex() {
  let chart = d3_rs_lines.html()
    .fill('#99ff33'); //hex value set to green

  d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);

  d3.select('#hexInfo')
    .html("The graph is filled using hex value <code>fill('#99ff33')</code> representing green colour.");
}

// 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);
          }
        );
});