Skip to content

Instantly share code, notes, and snippets.

@olizilla olizilla/index.html
Created Dec 10, 2012

Embed
What would you like to do?
D3 Sine Worm
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.js"></script>
<style>
body{
margin:0;
background: #222;
}
.controls{
text-align: center;
}
</style>
</head>
<body>
<svg id='' width="100%" height="300"></svg>
<div class="controls">
<input id="c" type="range" value="100" min='50' max="250" step="1">
</div>
<script>
var svg = d3.select('svg');
function dots(data){
// Data: Join the data & it's representation
var dots = svg.selectAll('circle').data(data, function(d){return d.id});
// Enter: The set of new data points without an existing representation
dots.enter()
.append('circle')
// Update: update all points with both data and representation. The circles created during the enter() step above are also updated.
dots
.transition()
.attr("cx", function(d) { return d.x } )
.attr("cy", function(d) { return d.y } )
.attr("r", function(d) { return d.r } )
.attr('fill', function(d) { return d.fill });
// Exit: the set of representations without a data
dots.exit()
.transition()
.attr("fill", '#FFFFFF').attr('r', 0)
.remove();
}
function val(id){
var node = document.getElementById(id);
return parseInt(node.value);
}
function makeData(a, b, color){
return {
id: a,
x: (8 * a) % window.innerWidth,
y: 150 + (Math.sin(b/10) * 100),
r: (( val('c') ) * Math.random()) / 5,
fill: color
}
}
var count = 0;
var data = [];
var maxDots = 20;
var color = d3.rgb('#911');
function loop() {
var fill = color.darker((count % maxDots) * Math.random() / 5);
var circleData = makeData(count, count, fill.toString());
if(data.length < maxDots){
data.push(circleData);
} else {
var index = (maxDots-1) - (count % maxDots);
var oldDot = data[index];
circleData.id = oldDot.id;
data[index] = circleData;
}
dots(data);
count++;
setTimeout(loop, val('c'))
}
loop()
</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.