Legible Text on Colored Backgrounds (d3plus & colorbrewer2 qualitative paired n=10 + b&w) by aaizemberg

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>

<style>

  div#grid {
    margin: 25px auto;
    text-align: center;
    width: 650px;
  }

  div.color {
    display: inline-block;
    font: 10px "Helvetica", "Arial", sans-serif;
    margin: 15px;
    padding: 25px 10px;
    width: 50px;
  }

</style>

<div id="grid"></div>

<script>
  // var colors = d3plus.color.scale.range()
  var colors = [];
  colors = colors.concat(['#A6CEE3','#1F78B4','#B2DF8A','#33A02C','#FB9A99','#E31A1C','#FDBF6F','#FF7F00','#CAB2D6','#6A3D9A','#000000','#FFFFFF'])
  
  var squares = d3.select("#grid").selectAll("div.color")
    .data( colors )
    .enter().append("div")
      .attr("class","color")
      .attr("id", String)
      .style("background-color", String)
      .style("color", function(d){
        return d3plus.color.text(d)
      })
      .text(String)

</script>