Skip to content

Instantly share code, notes, and snippets.

@gka

gka/index.html

Created July 11, 2012 06:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save gka/3088439 to your computer and use it in GitHub Desktop.
Save gka/3088439 to your computer and use it in GitHub Desktop.
Download ZIP
How to use HCL in d3.js
Raw
index.html
<!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
Copy link

the cie.js reference is now broken, you have to use https://rawgit.com/d3/d3-plugins/a77fd4fc7f548949b45ff320ca914c556ccbd7ae/cie/cie.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment