Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

A quick visual reference to every ColorBrewer scale; colors by Cynthia Brewer. Available in CSS and JS format. Click on a palette to log the constituent colors in hexadecimal RGB to the console.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #ccc;
width: 960px;
height: 500px;
}
.palette {
cursor: pointer;
display: inline-block;
vertical-align: bottom;
margin: 4px 0 4px 6px;
padding: 4px;
background: #fff;
border: solid 1px #aaa;
}
.swatch {
display: block;
vertical-align: middle;
width: 37px;
height: 22px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script>
d3.select("body")
.selectAll(".palette")
.data(d3.entries(colorbrewer))
.enter().append("span")
.attr("class", "palette")
.attr("title", function(d) { return d.key; })
.on("click", function(d) { console.log(d3.values(d.value).map(JSON.stringify).join("\n")); })
.selectAll(".swatch")
.data(function(d) { return d.value[d3.keys(d.value).map(Number).sort(d3.descending)[0]]; })
.enter().append("span")
.attr("class", "swatch")
.style("background-color", function(d) { return d; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment