Sort of like the Munsell color system
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script> | |
| var width = 960, | |
| height = 960; | |
| var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); | |
| var y = d3.scale.ordinal().rangeRoundBands([height, 0], .1); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var hue = 0; | |
| var data = createData(hue); | |
| x.domain(data.map(function(d) { return d[1]; })); | |
| y.domain(data.map(function(d) { return d[2]; })); | |
| svg.call(renderCircles, data); | |
| d3.timer(function(t) { | |
| hue = t / 50; | |
| data = createData(hue); | |
| svg.call(renderCircles, data); | |
| }); | |
| function renderCircles(selection, data) { | |
| var circles = selection.selectAll("circle").data(data); | |
| circles.enter().append("circle") | |
| .attr("cx", function(d) { return x(d[1]); }) | |
| .attr("cy", function(d) { return y(d[2]); }) | |
| .attr("r", x.rangeBand()/2) | |
| .attr("transform", "translate(" + x.rangeBand()/2 + "," + y.rangeBand()/2 + ")"); | |
| circles | |
| .attr("fill", function(d) { | |
| return d3.hcl(d[0], d[1], d[2]).toString(); | |
| }); | |
| } | |
| function createData(h) { | |
| return d3.range(-125, 150, 25) | |
| .map(function(c) { | |
| return d3.range(0, 100, 10) | |
| .map(function(l) { | |
| return [h, c, l]; | |
| }); | |
| }) | |
| .reduce(function(a, b) { return a.concat(b); }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment