/
article.html
107 lines (94 loc) · 2.18 KB
/
article.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
97
98
99
100
101
102
103
104
105
106
107
---
layout: article
---
<h2> Article Prototype</h2>
<div id="master_container">
<div id="circles">
</div>
</div>
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var dataset = [];
var numPoints = 200;
var numWaves = 4;
var i, o, p;
var q = 0;
for (i = 0; i < numPoints; i += 1) {
p = i / (numPoints - 1) * 100;
o = Math.PI * p * numWaves * 2;
dataset.push({ percent: p, offset: o });
}
var svg = d3.select("#circles")
.append("svg")
.attr("width", "100%")
.attr("height", "700px");
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d.percent + "%";
})
// .attr("cy", function(d, i) {
// return (Math.random() * 100) + "%";
// })
.attr("cy", "50%")
.attr("r", function(d, i) {
return (Math.random() * 2) + "%";
})
// .attr("fill", function(d,i) {
// console.log(i)
// console.log(d)
// return "hsl(" + (360 - (d.percent * 360)) + ",100%,50%)"
// })
// .attr("r", "1%");
function wave(d) {
//Move to bottom
d3.select(this)
.transition()
.duration(900)
.attr("cy", function(d) {
var h1 = "40"
// var h1 = getRandomInt(38,42)
return d.percent + "%";
// return h1 + "%"
})
.attr("fill", "hsl(" + (d.percent * 360) + ",100%,50%)")
.attr("r", function(d) {
return ((Math.sin(d.percent / 5) + 2) * 2) + "%";
})
.each("end", function() {
//Move to top
d3.select(this)
.transition()
.duration(900)
.attr("cy", function(d) {
var h2 = "40"
// var h2 = getRandomInt(48,52)
return d.percent + "%";
// return h2 + "%"
})
.attr("fill", function(d) {
// console.log(q)
var color = "hsl(" + (360-(d.percent * 360)) + ",100%,50%)"
return color;
})
.attr("r", function(d) {
return ((Math.cos(d.percent / 5) + 4) * 2 + 2) + "%";
})
.each("end", wave);
});
};
d3.selectAll("circle")
.transition()
.delay(function(d, i) {
// if (i == ) {} else{};
return i * 50;
})
.duration(900)
.attr("cy", "60%")
// .each("end", wave)
.each("end", wave)
</script>