Skip to content

Instantly share code, notes, and snippets.

@arr-ee

arr-ee/index.html

Last active August 29, 2015 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arr-ee/8729982 to your computer and use it in GitHub Desktop.
Save arr-ee/8729982 to your computer and use it in GitHub Desktop.
Download ZIP
All palettes from colorbrewer
Raw
index.html
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<style>
body {
background: #ccc;
font: 14/1.5 Helvetica, sans-serif;
}
.palette {
display: inline-block;
vertical-align: bottom;
margin: 4px 0 4px 6px;
padding: 4px;
background: #fff;
border: solid 1px #aaa;
text-align: center;
width: 500px;
}
.variation {
text-align: left;
padding: 5px;
position: relative;
}
.variation p {
position: absolute;
margin: 0;
top: 0.5em;
}
.swatch {
display: inline-block;
vertical-align: middle;
width: 37px;
height: 22px;
margin-left: 22px;
margin-right: -22px;
}
</style>
</head>
<body>
<script>
palettes = d3.select("body")
.selectAll(".palette")
.data(d3.entries(colorbrewer))
.enter().append("div")
.attr("class", "palette")
palettes.append('h4').text(function(d) { return d.key; })
variations = palettes.selectAll(".variation")
.data(function(d) { return d3.entries(d.value); })
.enter().append("div")
.attr("class", "variation");
variations.append('p').text(function(d) {return d.key;})
variations.selectAll('.swatch')
.data(function(d){return d.value;})
.enter().append('span')
.attr('class', 'swatch')
.style('background-color', function(d){return d;})
.attr('title', function(d){return d;})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment