D3 Examples - Color ramp maker

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!-- https://github.com/EastDesire/jscolor -->
  <script src="jscolor.js"></script>
  <style>
  body { font-family: sans-serif; }
  .entries { padding: 0.3rem 0.1rem; }
  .inputs label { display: block; }
  label, button { font-size: 1rem; color: rgb(80, 80, 80); }
  input { margin-bottom: 1rem; margin-top: 0.4rem; }
  label { width: 12rem; }
  input.copy,
  input.jscolor,
  input#entries,
  button { padding: 0.3rem 0.5rem; border-radius: .1rem; }
  .entries { cursor: pointer; padding-left: 0.5rem;}
  .msg { color: rgb(150,150,150); padding: 0 0.5rem; }
  input.jscolor, input#entries { margin: 8px 0; border: 1px solid #ccc; box-sizing: border-box; }
  input.copy { width: 3.5rem; margin-left: 0.5rem; height: 1.1rem; }  
  button,
  input.copy {
    background-color: white;
    border: 1px solid rgb(102, 102, 102);
    box-shadow: 1px 1px 1px rgba(100, 100, 100, .5);
    font-weight: bold;
  }
  .entries-group {
    letter-spacing: 0.05rem;
    padding: 0.3rem 0;
    color:  white;
    text-shadow: 1px 1px 3px rgba(50, 50, 50, .9), 1px -1px 3px rgba(50, 50, 50, .9), -1px 1px 3px rgba(50, 50, 50, .9), -1px -1px 3px rgba(50, 50, 50, .9);
  }
  </style>
</head>
<body>
  <div class="inputs">
    <label for="low_value">From<input id="low_value" class="jscolor" value="DD503C"></label>
    <label for="high_value">To<input id="high_value" class="jscolor" value="497B94"></label>
    <label for="entries">Number of entries<input id="entries" type="number" name="entries" value="10" max="200", min="0"></label>
    <button id="colorize" type="button" name="button">build</button><input type="text" class="copy" disabled><span class="msg"></span>
  </div>
  <script>
​
​
  d3.select("#colorize").on("click", colorize);
​
​
  function colorize () {
​
    var low_color = "#" + document.getElementById("low_value").value,
    high_color = "#" + document.getElementById("high_value").value,
​
    entries = +document.getElementById("entries").value,
    values = d3.range(0, entries, 1);
​
    var color = d3.scaleLinear()
    .domain([0, entries - 1])
    .range([low_color,high_color])
​
    d3.select("body").select(".entries-group").remove();
​
    var group = d3.select("body").append("div").attr('class', 'entries-group');
​
    group.selectAll("entries").data(values)
    .enter()
    .append("div")
    .attr('class', 'entries')
    .html(function(d){ return rgb2hex(color(d)) })
    .style("background-color", function(d){
      return color(d)
    })
    .on("click", copy)
  }
  function rgb2hex(rgb){
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
  }
​
​
​
  function copy(d){
    var t = d3.transition().duration(1500).ease(d3.easeCubicOut);
    d3.select(".msg").interrupt()
    d3.select(".copy").attr('disabled', null);
​
    // reset opacity
    d3.select(".msg").style("opacity", 1);
​
    var colorString = this.innerText.slice(1);
    d3.select(".copy").attr('value', colorString)
    var inputColor = document.querySelector(".copy");
    inputColor.select();
​
    // https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
    try {
      var successful = document.execCommand('copy');
​
      d3.select(".msg").html('Copied!').transition(t).style("opacity", 0);
    } catch (err) {
      d3.select(".msg").html('Oops, unable to copy');
    }
​
    d3.select(".copy").attr('disabled', true);
​
  }
​
  </script>
</body>
​
    