Skip to content

Instantly share code, notes, and snippets.

@ludoo

ludoo/index.html

Created February 28, 2013 16:48
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 ludoo/5058117 to your computer and use it in GitHub Desktop.
Save ludoo/5058117 to your computer and use it in GitHub Desktop.
Download ZIP
Separate d3.scale.category20 colors into dark and light ranges
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h3 {
clear: left;
margin: 0;
}
ul {
width: 800px;
margin: 0;
list-style-type: none;
}
li {
width: 80px;
font-size: 13px;
padding: 13px 0;
text-align: center;
color: white;
float: left;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var body = d3.select('body'),
labels = ['d3.scale.category20()', 'dark', 'light'],
colors = d3.scale.category20().range(),
dark = colors.map(function(d, i, all) { return i<10 ? all[i*2] : null }).filter(Boolean),
light = colors.map(function(d, i, all) { return i<10 ? null : all[(i-10)*2+1] }).filter(Boolean);
[colors, dark, light].map(function(d, i) {
body.append('h3')
.text(labels[i]);
body.append('ul').selectAll('li').data(d).enter().append('li')
.style('background-color', String)
.text(String);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment