Skip to content

Instantly share code, notes, and snippets.

@armollica

armollica/README.md

Last active November 28, 2015 02:55
Show Gist options
  • Save armollica/ac363ab2ef57f130d11b to your computer and use it in GitHub Desktop.
Save armollica/ac363ab2ef57f130d11b to your computer and use it in GitHub Desktop.
Download ZIP
Arc Field
Raw
README.md
Raw
index.html
<html>
<head>
<title>Arc Field</title>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 960,
height = 500;
var scale = {
x: d3.scale.ordinal().rangeRoundBands([0, width]),
y: d3.scale.ordinal().rangeRoundBands([height, 0]),
dt: d3.scale.pow().exponent(1.5)
.domain([0, width])
.range([1, 2*Math.PI]),
t0: d3.scale.linear()
.domain([0, height])
.range([0, 2*Math.PI]),
color: d3.scale.linear()
.domain([0, width*height])
.range(["rgb(181, 175, 97)", "rgb(192, 79, 82)"])
};
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var cells = { x: 48, y: 25 };
scale.x.domain(d3.range(0, cells.x));
scale.y.domain(d3.range(0, cells.y));
draw([width/2, height/2]);
canvas.on("mousemove", function() {
draw(d3.mouse(this));
});
function draw(mouse) {
context.clearRect(0, 0, width, height);
d3.range(cells.x * cells.y)
.forEach(function(i) {
var x = i % cells.x,
y = Math.floor(i / cells.x),
t = 2*Math.PI * (i / (cells.x * cells.y)) +
scale.t0(mouse[1]);
context.beginPath();
context.arc(scale.x(x) + scale.x.rangeBand()/2,
scale.y(y) + scale.y.rangeBand()/2,
8, t - scale.dt(mouse[0]), t);
context.fillStyle = scale.color(scale.x(x) * scale.y(y));
context.fill();
context.closePath();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment