Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to use HCL in d3.js
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 14px;
}
div {
width: 60px;
height: 60px;
float: left;
margin-right: 14px;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js?2.9.5"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/cie/cie.js"></script>
<script>
var data = [0,1,2,3,4,5,6,7,8,9,10];
var color = d3.scale.linear()
.domain([0,10]) // min/max of data
.range(["#FDFFCB", "#232942"])
.interpolate(d3.cie.interpolateLch);
d3.select("body").selectAll("div")
.data(data)
.enter().append("div")
.style("background", function(d) { return color(d) });
</script>
</html>
@felipesabino

This comment has been minimized.

Copy link

commented Nov 13, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.