Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active August 22, 2016 02:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1wheel/7319704 to your computer and use it in GitHub Desktop.
Save 1wheel/7319704 to your computer and use it in GitHub Desktop.
Download ZIP
nyc-d3-live-code
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<body></body>
<script>
var width = 960,
height = 500;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
svg.selectAll('circle')
.data(d3.range(0, width, 10)).enter()
.append('circle')
.attr('cx', function(d){ return d; })
.attr('cy', function(d){ return Math.sin(d/50)*200 + 200})
.attr('r', 5)
svg.selectAll('circle')
.transition()
.attr('cy', function(d){ return Math.sin(d/20)*1 + 200; })
svg.selectAll('circle').on('mouseover', function(){
d3.select(this)
.transition()
.attr('cy', function(d){ return Math.sin(d/20)*100 + 200; })
.transition()
.attr('cy', function(d){ return Math.sin(d/20)*10 + 200; })
});
function addRect(size, x, y){
svg.append('rect')
.attr('x', x)
.attr('width', size)
.attr('y', y)
.attr('height', size)
.on('mouseover', function(){
addRect(size*.95, x, y);
d3.select(this)
.transition()
.attr('x', Math.random()*width)
.attr('y', Math.random()*height)
.transition()
.attr('fill', 'rgb(' + Math.random()*255 +', 100, 100)')
})
}
addRect(50, 300, 300);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment