|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
<title>Shall we play a game?</title> |
|
<script type="text/javascript" src="https://github.com/mbostock/d3/raw/v2.7.1/d3.js"></script> |
|
<script type="text/javascript" src="https://github.com/simplegeo/polymaps/raw/v2.5.1/polymaps.js"></script> |
|
<style type="text/css"> |
|
|
|
body { |
|
background: #222; |
|
} |
|
|
|
circle { |
|
fill: none; |
|
stroke-width: 1.5px; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
|
|
var w = 960, |
|
h = 500, |
|
z = d3.scale.category20c(), |
|
n = 100, |
|
duration = 1000 * 60 * 1, // 2min |
|
po = org.polymaps, |
|
loci = d3.range(n).map(function() { |
|
return { |
|
x: Math.random() * w, |
|
y: Math.random() * h, |
|
count: Math.random() * 21 |
|
}; |
|
}); |
|
|
|
var svg = d3.select("body").append("svg:svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
var map = po.map() |
|
.container(svg.node()) |
|
.zoom(1.9) |
|
.center({lat: 0, lon: 0}) |
|
.add(po.interact()) |
|
.add(po.hash()); |
|
|
|
map.add(po.image() |
|
.url(po.url("http://{S}tile.cloudmade.com" |
|
+ "/1a1b06b230af4efdbb989ea99e9841af" |
|
+ "/33025/256/{Z}/{X}/{Y}.png") |
|
.hosts(["a.", "b.", "c.", ""]))); |
|
|
|
var layer = svg.append('g') |
|
.attr('id','data-layer'); |
|
|
|
layer.selectAll('circle') |
|
.data(loci) |
|
.enter().append('circle') |
|
.attr("cx", function(d){return d.x}) |
|
.attr("cy", function(d){return d.y}) |
|
.attr("r", function(d){return d.count*10}) |
|
.style("fill", '#ffffff') |
|
.style("stroke", '#ffffff') |
|
.style("fill-opacity", 0) |
|
.style("stroke-opacity", 0) |
|
.transition() |
|
.duration(0) |
|
.delay(function(d,i){return i*(duration/n)}) |
|
.style("fill-opacity", 1) |
|
.style("stroke-opacity", 1) |
|
.transition() |
|
.duration(1000) |
|
.ease('circle') |
|
.delay(function(d,i){return i*(duration/n)}) |
|
.style("fill", function(d,i){return z(i);}) |
|
.style("stroke", function(d,i){return z(i);}) |
|
.transition() |
|
.duration(1000) |
|
.delay(function(d,i){return i*(duration/n)}) |
|
.ease('circle') |
|
.style("fill-opacity", 0) |
|
.attr("r", 1) |
|
.transition() |
|
.duration(2000) |
|
.delay(function(d,i){return 1000+(i*(duration/n))}) |
|
.ease(Math.sqrt) |
|
.style("fill-opacity", 1) |
|
.transition() |
|
.duration(2000) |
|
.delay(function(d,i){return 2000+(i*(duration/n))}) |
|
.ease(Math.sqrt) |
|
.style("stroke-opacity", 0) |
|
.transition() |
|
.duration(4000) |
|
.delay(function(d,i){return 1000+(i*(duration/n))}) |
|
.ease(Math.sqrt) |
|
.style("fill-opacity", 0) |
|
.attr("r", function(d){return d.count*10}) |
|
|
|
</script> |
|
</body> |
|
</html> |
