-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdots.html
62 lines (55 loc) · 1.83 KB
/
dots.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<script src="d3.js" charset="utf-8"></script>
<script>
var winWidth = window.innerWidth
var winHeight = window.innerHeight
var windowArea = winWidth * winHeight;
//set svg area
var svg = d3.select('body')
.append('svg')
.attr('width', winWidth)
.attr('height', winHeight)
.append('g');
//instructions
svg.append('text')
.text('Move your mouse!')
.attr('font-family','arial black')
.attr('text-anchor','middle')
.attr('font-size', 0)
.attr('opacity',.6)
.attr('dx', (winWidth) / 2)
.attr('dy', (winHeight) / 2)
.style('fill', 'red')
.transition()
.duration(5000)
.attr('font-size', winWidth/3)
.attr('opacity', -1)
.remove();
//enable mouse tracking
d3.select('svg').on("ontouchstart" in document ? "touchmove" : "mousemove", function () {
//assigns pointer position dynamically to mouse object
var mouse = {x: d3.mouse(this)[0], y: d3.mouse(this)[1]};
//circle creation and deletion
svg.insert('circle')
.attr('cx', function(){return mouse.x})
.attr('cy', function(){return mouse.y})
.attr('r', windowArea * .00002)
.attr('opacity', 1)
.style('fill',d3.hsl(Math.random()*360,1,.5))
.transition()
.duration(750)
.attr('r', windowArea * .00008 * Math.random())
.attr('opacity', 0.5)
.ease(Math.sqrt)
.transition()
.attr('r', windowArea * .000001 * Math.random())
.remove();
});
</script>
</body>
</html>