Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
p7
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var width = 900;
var height = 900;
var range = d3.range(500);
var TWO_PI = 2 * Math.PI;
var colorCount = 500;
var translate = 'translate(' + (width / 2) + ',' + (height / 2) + ')';
var svg = d3.select("body")
.append("svg:svg")
.attr("width", width)
.attr("height", height);
svg.append("svg:path");
var path = svg.selectAll('path');
// power scale
var color = d3.scale
.pow()
.exponent(.5)
.domain([0, colorCount / 4, colorCount / 2, colorCount / 2 + colorCount / 4, colorCount])
.range(['#490A3D', '#BD1550', '#E97F02', '#F8CA00', '#8A9B0F']);
d3.timer(function(time) {
var vertices = updateData(time);
path = path.data(d3.geom.voronoi(vertices).map(function(d) {
return "M" + d.join("L") + "Z";
}), String);
path.exit().remove();
path.enter().append("path").attr("fill", selectColor).attr("d", String)
.attr('transform', translate);
path.order();
});
function selectColor(d, i) {
var j = i % (2 * colorCount);
if (j > colorCount) {
j = 2 * colorCount - j;
}
return color(j);
}
function updateData(time) {
var time1 = TWO_PI / 30000 * (time % 1000000);
var minorR = 40 ;
var diff = 200 - minorR+time1;
var s = diff / minorR;
var theta = 0;
var angleMultiplier = 200 - time1;
var radiusEffect = time1 + minorR;
return range.map(function() {
theta += Math.sin(Math.PI * 4 /5000)*time1/100;
var mult = angleMultiplier * theta;
return [
diff * Math.sin(mult) + radiusEffect * Math.sin(mult * s),
diff * Math.cos(mult) - radiusEffect * Math.cos(mult * s)
];
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.