D3 Examples - Compare Colors

Compare Colors

A design tool for comparing colors.

In data visualizations, sometimes the visual marks appear far apart (e.g. scatter plots), and sometimes they are adjacent (e.g. heatmaps, choropleths). This tool allows you to compare colors while designing a color palette for data visualizations, such that you can see how colors visually compare to one another when they are both far apart and close together.

Intended to complement other tools for color scheme design, including:

ColorBrewer

Every ColorBrewer Scale

[Chroma.js Color Scale Helper](https://vis4.net/labs/multihue/#colors=white, green|steps=5|bez=1|coL=1)

jQuery Minicolors

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4.7.4/build/d3.min.js"></script>
  <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/jquery-minicolors@2.1.10/jquery.minicolors.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/jquery-minicolors@2.1.10/jquery.minicolors.css">
  <style>
    body {
      margin:0;
    }
  </style>
</head>
​
<body>
  <div class="container-fluid">
  <div class="row">
    <div class="col">
      <input type="text" id="a" class="form-control picker" value="#ff6161">
    </div>
    <div class="col">
      <input type="text" id="b" class="form-control picker" value="#ff0f0f">
    </div>
    <svg width="960" height="470">
      <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
      </filter>
    </svg>
  </div>
  <script>
    var svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        y;
    
    var rectEnter = svg
      .selectAll("rect")
      .data(["a", "b"])
      .enter();
    
    // Small rectangles at the top.
    var rectWidth = 90;
    var rectHeight = 90;
    y = 50;
    rectEnter
      .append("rect")
            .attr("class", function (d) { return "color-rect-" + d; })
          .attr("x", function (d, i){ return i * width/2 + width/4 - rectWidth/2; })
          .attr("y", y)
            .attr("width", rectWidth)
            .attr("height", rectHeight);
    
    // Large rectangles at the bottom.
    y = 200;
    rectEnter
      .append("rect")
            .attr("class", function (d) { return "color-rect-" + d; })
          .attr("x", function (d, i){ return i * width/2; })
            .attr("y", y)
            .attr("width", width/2)
            .attr("height", height);
    
    // Grayscale filter for comparing luminance.
    y = 335;
    rectEnter
      .append("rect")
            .attr("class", function (d) { return "color-rect-" + d; })
          .attr("x", function (d, i){ return i * width/2; })
            .attr("y", y)
            .attr("width", width/2)
            .attr("height", height)
        .attr("filter", "url(#grayscale)");;
    
    function change (value) {
      var id = d3.select(this).attr("id");
      d3.selectAll(".color-rect-" + id).attr("fill", value);
    }
    
    $(".picker")
      .minicolors({
        change: change,
        theme: "bootstrap"
      })
      .each(function (d){
        change.call(this, d3.select(this).attr("value"));
      });
  </script>
</body>
​
    