-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (79 loc) · 2.72 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js" charset="utf-8"></script>
<script src='d3-contort.js'></script>
</head>
<body>
<a href="https://github.com/jdungan/d3-contort">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
<svg></svg>
</body>
<script>
function confetti(duration) {
nodes = d3.range(150).map(function() { return Math.random(); })
g.selectAll('rect').data(nodes, function(d) { return d; })
.enter()
.insert('rect',':first-child')
.attr({
height : function () {
return wHeight * 0.05 * Math.random()
},
width : function () {
return wHeight * 0.05 * Math.random()
} ,
opacity : function (d,i) {
return ''+(d * 1) + 0.2
},
'stroke' : 'black',
'stroke-width' : 0.45
})
.style("fill", function(d, i) { return color(i % 10); })
//EXAMPLE OF D3-CONTORT INCREMENT
.translate(function (d,i,e) {
dist = (wWidth*2 * Math.random())+wWidth
dirX= Math.random() > .5 ? dist : -dist
dirY= Math.random() > .5 ? dist : -dist
return {x:dirX* Math.random(),y:dirY* Math.random()}
},true)
// // D3-CONTORT FUNCTIONS IN ACTION
.skewX(function (d,i) {
return Math.random()*360 % 45
})
.skewY(function (d,i) {
return Math.random()*360 % 45
})
.rotate(function (d,i) {
return Math.random()*360
})
.scale(function (d,i) {
return Math.random() * Math.min(wHeight,wWidth)*0.0025
})
.animate({
duration: duration,
ease:'cubic',
})
//STANDARD D3 TRANSITION TO FINISH
.transition()
.delay(duration-100)
.duration(1000)
.attr('opacity','0')
.remove()
}
window.addEventListener("load", function(event) {
color = d3.scale.category10();
wHeight = window.innerHeight
wWidth = window.innerWidth
body = d3.select('body')
svg=d3.select('svg').style({
height : wHeight+'px',
width : wWidth+'px'
})
g = svg.insert('g')
.translate({y:wHeight/2,x:wWidth/2})
.render()
repeat_time = 2000
var intervalID = window.setInterval(confetti, repeat_time/2,repeat_time*2)
});
</script>
</html>