Skip to content

Instantly share code, notes, and snippets.

@armollica

armollica/.block

Last active March 8, 2016 02:56
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 armollica/03ac035ee46dd63ab7db to your computer and use it in GitHub Desktop.
Save armollica/03ac035ee46dd63ab7db to your computer and use it in GitHub Desktop.
Download ZIP
Munsell Color
Raw
.block
height: 960
Raw
index.html
<!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