Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created May 26, 2017 15:33
Show Gist options
  • Save aaizemberg/a41456c0fffac588662e1c90ece5d979 to your computer and use it in GitHub Desktop.
Save aaizemberg/a41456c0fffac588662e1c90ece5d979 to your computer and use it in GitHub Desktop.
Download ZIP
Legible Text on Colored Backgrounds (d3plus & colorbrewer2 qualitative paired n=10 + b&w)
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment