Skip to content

Instantly share code, notes, and snippets.

@makoto
Created December 8, 2012 18:20
Show Gist options
  • Save makoto/4241232 to your computer and use it in GitHub Desktop.
Save makoto/4241232 to your computer and use it in GitHub Desktop.
Random update via setInterval
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<style type="text/css" media="screen">
.svg rect {
stroke: white;
fill: steelblue;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 500
,height = 400
,data = [2,4,6];
var svg = d3.select("body").append("svg")
.attr("class", "svg")
.attr("width", width)
.attr("height", height)
function draw(data){
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width - 10]);
var y = d3.scale.ordinal()
.domain(data)
.rangeBands([10, height]);
var group = svg.selectAll(".group")
.data(data);
var groupEnter = group.enter().append('g')
.attr('class', 'group')
var groupUpdate = group.transition().duration(1000)
var groupExit = d3.transition(group.exit())
.remove()
groupEnter.append("circle")
.attr("cx", function(d){return x(d)})
.attr("cy", function(d){return y(d)})
.attr("r", 5);
groupUpdate.select('circle')
.attr("cx", function(d){return x(d)})
.attr("cy", function(d){return y(d)})
}
setInterval(function(){return draw([Math.random() * 100, Math.random() * 100, Math.random() * 100]) }, 1000)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment