D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
Legible Text on Colored Backgrounds (d3plus & colorbrewer2 qualitative paired n=10 + b&w)
<!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>
https://d3plus.org/js/d3.js
https://d3plus.org/js/d3plus.js