-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (113 loc) · 3.41 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<style>
svg {
background-color: #CEE2EB;
}
circle {
stroke: #CEE2EB;
stroke-width: 2;
fill: white;
}
text {
fill: #CEE2EB;
}
</style>
</head>
<body style="font-family: sans-serif">
<article>
<header>
<h1>D3iamonds are 4evs</h1>
</header>
<section>
<svg width="500" height="500" viewbox="0 0 300 300" id="d3amond"></svg>
</section>
<input id='letter' type="text" placeholder="enter a letter" maxlength=1></input>
<button onclick="updateChart()">Diamond me</button>
<span class="validation-error-msg" style="display: none;">INVALID INPUT</span>
</article>
<script>
var svg = d3.select('#d3amond');
var allowed = ['A', 'B', 'C', 'D', 'E', 'F', 'G','H','I','J','K','L',
'M','N','O','P','Q','R','S', 'T','U','V','W','X','Y','Z'];
var animator;
function updateChart() {
var selected = document.getElementById("letter").value.toUpperCase();
var data = allowed.slice(0, allowed.indexOf(selected) + 1).reverse();
d3.selectAll('.validation-error-msg')
.style('display', function() {
return data.length === 0 ? 'inline' : 'none';
});
if (data === []) {
return;
}
sparkleNoMore();
svg.selectAll('g').remove();
var xOrient = 1;
var yOrient = 1;
var radius = 70 / data.length;
quadrant();
quadrant();
quadrant();
quadrant();
animateIn();
sparkleSparkle();
function sparkleNoMore() {
if(animator) {
clearInterval(animator);
animator = undefined;
}
}
function sparkleSparkle() {
animator = setInterval(function(){
d3.selectAll("circle")
.transition()
.ease("linear")
.duration(600)
.delay(function(d, i) {
return (Math.random() * (i) * 3000);
})
.attr('r', radius * 1.5)
.style('fill', '#D0CDEF')
.transition()
.ease("linear")
.duration(600)
.attr('r', radius)
.style('fill', 'white')
}, 350 * data.length);
}
function animateIn() {
d3.selectAll("circle")
.transition()
.ease("linear")
.duration(500)
.delay(function(d, i) {return i * 70;})
.attr('r', radius);
}
function quadrant() {
yOrient *= xOrient *= -1;
var ySpacing = yOrient * (radius * 2);
var xSpacing = xOrient * ((radius * 2) - 2);
var container = svg.append('g');
var circles = container.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform',function(_, i) {
var x = 150 - (i * xSpacing) + ((data.length - 1) * xSpacing);
var y = 150 + (i * ySpacing);
return 'translate(' + x + ' ' + y + ')';
});
circles.append('circle');
circles.append('text')
.text(function(d) {return d})
.attr('dx', (-0.5 * radius))
.attr('dy', (0.5 * radius))
.attr('text-align', 'start')
.style('font-size', 1.5 * radius);
}
}
</script>
</body>
</html>