Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active August 22, 2016 02:23
Show Gist options
  • Save 1wheel/de3df8fd60e832ab69a2 to your computer and use it in GitHub Desktop.
Save 1wheel/de3df8fd60e832ab69a2 to your computer and use it in GitHub Desktop.
Download ZIP
mouseover-moire
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
line{
stroke: black;
}
</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var basesvg = d3.select('svg')
var g1 = basesvg.append("g")
var g2 = basesvg.append('g')
basesvg.append('rect')
.attr({width: width, height: height})
.style('fill-opacity', 0)
.on('mousemove', function(){
var pos = d3.mouse(this)
moire(pos[1])
g2.attr('transform',
'rotate('
+ -Math.atan((pos[0] - width/2)/(pos[1] - height/2))*180/Math.PI
+ ' ' + width/2
+ ' ' + height/2 + ')')
})
function moire(numPoints){
var x = d3.scale.linear()
.domain([0, numPoints])
.range([-width, width*2])
g1.html('').call(addLines)
g2.html('').call(addLines)
function addLines(selection){
selection.selectAll('pat-line')
.data(d3.range(numPoints)).enter()
.append('line')
.attr('x1', x)
.attr('x2', x)
.attr({y1: -width, y2: width*2})
selection.selectAll('pat-line')
.data(d3.range(numPoints*2)).enter()
.append('line')
.attr('y1', x)
.attr('y2', x)
.attr({x1: -width, x2: width*2})
}
}
moire(40)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment